In HTML we use id's and classes. we can choose any name for id.Can we choose any name for class also? Or is there any specification name for classes ?
From the HTML 5 specification:
ID:
The id attribute specifies its element's unique identifier (ID). The
value must be unique amongst all the IDs in the element's home subtree
and must contain at least one character. The value must not contain
any space characters.
There are no other restrictions on what form an ID can take; in
particular, IDs can consist of just digits, start with a digit, start
with an underscore, consist of just punctuation, etc.
Class:
The attribute, if specified, must have a value that is a set of
space-separated tokens representing the various classes that the
element belongs to.
The classes that an HTML element has assigned to it consists of all
the classes returned when the value of the class attribute is split on
spaces. (Duplicates are ignored.)
Also, there are style guides that define good and very used pattern for choose the values to use for id or classes, etc. I recommend you this one from W3Schools.
Related
I have the below given
with lowercase name and id values
<input type="text" name="abc" id ="abc">
with uppercase name and id values
<input type="text" name="ABC" id ="ABC">
I have seen only lowercase name and id values. Can we use uppercase also? Is there a benefit using lowercase?
What values are acceptable for a given attribute depend on the specific attribute.
Name and Id attributes can both include upper and lower case characters, and both are case sensitive.
Case insensitivity in tag names and attribute names
Tag names for HTML elements may be written with any mix of lowercase
and uppercase letters that are a case-insensitive match for the names
of the elements given in the HTML elements section of this document;
that is, tag names are case-insensitive.
Attribute names for HTML elements may be written with any mix of
lowercase and uppercase letters that are a case-insensitive match for
the names of the attributes given in the HTML elements section of this
document; that is, attribute names are case-insensitive.
And for Values:
Some attribute values are case insensitive, while other attribute
values—most notably the attributes id and class—are case sensitive. As
these attributes are case sensitive in HTML, ID selectors and class
selectors must always match the case of the id and class attribute
values in the document. To find out which attribute values are case
sensitive and which aren’t, consult the HTML specification.
yes ... they can be uppercase or lowercase ...
for example consider the __VIEWSTATE that is usually used in hidden inputs ( ASP.Net Websites )
these are just names ... so there is no benefit if you use uppercase or lowercase...
I was having some trouble with two links that was linking to two different parts of a webpage, one further down the page than the other, i had done the following:
<a class="nav-link" href="#portfolio">Portfolio</a>
<a class="nav-link" href="#cv">CV</a>
...
...
<a id="portfolio"></a>
...
...
...
<a id="cv"></a>
It seems to only partially work. Clicking the portfolio link got me to the portfolio section, but the cv link did not work. However once i changed the cv link to this it worked:
<a class="nav-link" href="#portfolio">Portfolio</a>
<a class="nav-link" href="#info">CV</a>
...
...
<a id="portfolio"></a>
...
...
...
<a id="info"></a>
I know that you can't start an ID with a number, but is there also a minimum requirement for digits/length as well?
It should be at least one letter.
Check the rules here from the MDN:
This attribute's value is an opaque string: this means that web author must not use it to convey any information. Particular meaning, for example semantic meaning, must not be derived from the string.
This attribute's value must not contain white spaces. Browsers treat non-conforming IDs that contains white spaces as if the white space is part of the ID. In contrast to the class attribute, which allows space-separated values, elements can only have one single ID defined through the id attribute. Note that an element may have several IDs, but the others should be set by another means, such as via a script interfacing with the DOM interface of the element.
Using characters except ASCII letters and digits, '_', '-' and '.' may cause compatibility problems, as they weren't allowed in HTML 4. Though this restriction has been lifted in HTML 5, an ID should start with a letter for compatibility.
Check also the HTML5 specs:
The id attribute specifies its element's unique identifier (ID). [DOM]
The value must be unique amongst all the IDs in the element's home subtree and must contain at least one character. The value must not contain any space characters.
There are no other restrictions on what form an ID can take; in particular, IDs can consist of just digits, start with a digit, start with an underscore, consist of just punctuation, etc.
An element's unique identifier can be used for a variety of purposes, most notably as a way to link to specific parts of a document using fragment identifiers, as a way to target an element when scripting, and as a way to style a specific element from CSS.
Identifiers are opaque strings. Particular meanings should not be derived from the value of the id attribute.
There's no minimum length requirement for id except that it must be non-empty.
But there's a constraint that there MUST NOT be 2+ elements with the same id in a single HTML document.
Short ids make collisions more probable.
Note that scripts (e.g. some widget plugins) may dynamically create elements with ids, or change elements' ids. Maybe that's happening on your page.
You may use the following bookmarklet to find out whether an element with id=='cv' already exists on your page:
javascript:alert(document.getElementById("cv"));
It should output null if there's no such element, or something like [object ...] if there's one.
Or more general:
javascript:alert(document.getElementById(prompt("enter id: "))==null ? "No elements with such id" : "There is an element with such id");
Can I use an anchor ID starting with a number in HTML5?
<a id="1" class="anchor"></a>
I was told this was a NO NO. But it seems to work fine in IE9, Firefox and Chrome. So, what gives?
Yes, this is perfectly valid in HTML5.
3.2.3.1 The id attribute
The id attribute specifies its element's unique identifier (ID). [DOM]
The value must be unique amongst all the IDs in the element's home subtree and must contain at least one character. The value must not contain any space characters.
Note: There are no other restrictions on what form an ID can take; in particular, IDs can consist of just digits, start with a digit, start with an underscore, consist of just punctuation, etc.
http://www.w3.org/TR/html5/dom.html#the-id-attribute (emphasis added)
"The id attribute got more classy in HTML5" is written at some pages. If I use class attribute instead of id, does it conform to HTML5? Thanks for your help.
I believe you're talking about this article. Well, nothing has really changed — classes and ids are used the same way as in HTML4.
Except one thing: The HTML4 spec says the following
ID and NAME tokens must begin with a letter ([A-Za-z]) and may be
followed by any number of letters, digits ([0-9]), hyphens (“-“),
underscores (“_”), colons (“:”), and periods (“.”).
However, in the HTML5 spec, the requirement for ids is much less rigid
The value must be unique amongst all the IDs in the element’s home
subtree and must contain at least one character. The value must not
contain any space characters.
So HTML5 ids can accept more characters, which is what the article you're reffering to is talking about.
The attributes still have two different purposes:
class can contain multiple classes and multiple elements can have the same classes
id contains a single ID and that ID can only be used for one element.
The statement you quoted exists because some restrictions on how an ID must look like have been lifted in HTML5 - classes never had those restrictions.
The difference between ID and class is that the ID has to be unique at one page but the class can be used multiply times.
Both is valid HTML 5, you can validate your page here: http://validator.w3.org/
Nothing has really changed with HTML5 in that respect. IDs are still unique, and classes can be shared across elements. Not sure what the quote was referring to.
class is for generic purpose and id is for unique identification purpose. I mean, id uniquely identifies an element and class specifies a group elements to have the same type of behavior. I hope, it clears the prupose of class and id.
What's the point of the name attribute on an HTML form? As far as I can tell, you can't read the form name on submission or do anything else with it. Does it serve a purpose?
In short, and probably oversimplifying a bit: It is used instead of id for browsers that don't understand document.getElementById.
These days it serves no real purpose. It is a legacy from the early days of the browser wars before the use of name to describe how to send control values when a form is submitted and id to identify an element within the page was settled.
From the specification:
The name attribute represents the form's name within the forms collection.
Once you assign a name to an element, you can refer to that element via document.name_of_element throughout your code. It doesn't work to tell when you've got multiple fields of the same name, but it does allow shortcuts like:
<form name="myform" ...>
document.myform.submit();
instead of
document.getElementsByName('myform')[0].submit();
Here's what MDN has to say about it:
name
The name of the form. In HTML 4, its use is deprecated (id should be used instead). It must be unique among the forms in a document and not just an empty string in HTML 5.
(from <form>, Attributes, name)
I find it slightly confusing that specifies that it must be unique, non-empty string in HTML 5 when it was deprecated in HTML 4. (I'd guess that requirement only applies if the name attribute is specified at all?). But I think it's safe to say that any purpose it once served has been superseded by the id attribute.
You can use the name attribute as an "extra information" attribute - similarly as with a hidden input - but this keeps the extra information tied into the form, which makes it just a little simpler to read/access.
name attribute is not completely redundant vis-à-vis id. As aforementioned, it useful with <forms>, but less known is that it can also be used with with any HTMLCollection, such as the children property of any DOM element.
HTMLCollection, in additional to be a array-like object, will have named properties commensurate with any named members (or the first occurrence in case of non-unique name). It is useful to retrieve specific named nodes.
For example, in the following example HTML:
<div id='person1'>
<span name='firstname'>John</span>
<span name='lastname'>Doe</span>
<span name='middlename'></span>
</div>
<div id='person2'>
<span name='firstname'>Jane</span>
<span name='lastname'>Doe</span>
<span name='middlename'></span>
</div>
by naming each child, one can quickly and efficiently retrieve a named element, such as lastname, as such:
document.getElementById('person1').children.namedItem('lastname')
...and if there is no risk of 'length' being the name of a member element, (being that length is a reserved property of HTMLCollection), a more terse notation may be used instead:
document.getElementById('person1').children.lastname
DOM Living Standard 2019 March 29
An HTMLCollection object is a collection of elements...
The namedItem(key) method, when invoked, must run these steps:
If key is the empty string, return null.
Return the first element in the collection for which at least one of the following is true:
it has an ID which is key;
it is in the HTML namespace and has a name attribute whose value is key;