What are the rules for naming the id,class,name attributes and tag names in HTML5?Is there any difference from previous HTML standard?
No changes in ID and class. You can still use any UTF8 characters to set ID and class attributes. Remember do use the same ID only once in your document.
For custom tag-attributes, they introduced the family of data-* attributes, where you can append any custom data to your elements (in string form).
Thats all - as far as I know.
Related
I know that custom tags need to have a "-". And I kwnow that custom attributes need the "data-" prefix. But what about custom attribute on a custom tag?
If I define a custom HTML tag/element, such as <x-sososlik></x-sososlik>.
And I need some custom attributes on it. For example: hair-color.
Does that attribute need the data-* prefix?
<x-sososlik hair-color="green"></x-sososlik>
-or-
<x-sososlik data-hair-color="green"></x-sosolik>
The question is more about "what is the CORRECT way", because it works with both.
I'm asking because I cannot find that information.
I need to know it because I'm trying to shorten the attribute names on existing project, in the real code there a lot of them.
No, you don't need to use the data- prefix on an autonomous custom element (as opposed to a customized built-in element). As specified in the WHATWG HTML standard:
Any namespace-less attribute that is relevant to the element's functioning, as determined by the element's author, may be specified on an autonomous custom element, so long as the attribute name is XML-compatible and contains no ASCII upper alphas. The exception is the is attribute, which must not be specified on an autonomous custom element (and which will have no effect if it is).
This question already has answers here:
Can an HTML element have multiple ids?
(18 answers)
Closed 8 years ago.
Needed to know if an HTML element can have multiple attributes of ID's, for instance :
<input type="text" id="identifier1" id="selector1" />
As I needed to clarify this statement mentioned about selectors at W3 website.
If an element has multiple ID attributes, all of them must be treated
as IDs for that element for the purposes of the ID selector. Such a
situation could be reached using mixtures of xml:id, DOM3 Core, XML
DTDs, and namespace-specific knowledge.
The Possible duplicates which people are referring, states question for this syntax
<input type="text" id="identifier1 selector1" />
which is different than syntax that I am asking.
Needed to know if an HTML element can have multiple attributes of ID's
Short answer? No because the browser will only render the first one.
See this Fiddle, I can only target it in CSS using the first id that appears in the DOM. Try changing that CSS selector to use the second id, it won't work.
That's because it seems like the second ID is being disregarded by the browser, as this is the output HTML:
<input type="text" id="identifier1">
If you really need additional identifiers on an element, you should think about using either multiple class names or data attributes to correspond to additional data.
Needed to know if an HTML element can have multiple attributes of ID's
No. No element in HTML may have more then one instance of a given attribute.
As I needed to clarify this statement
Note the last sentence in that statement.
Also note that the CSS idea of an "ID attribute" is not "An attribute with the name id". Also quoting from that document:
Document languages may contain attributes that are declared to be of type ID
Only the id attribute is an ID type in HTML.
No, even if you specify multiple ids, the first encountered id attribute is used.
No ID can not be same for html elements, but the Classes are to use for multiple elements, and one element may have multiple classes
No, because an attribute must not be repeated in tag. This is a general rule in HTML, not limited to the id attribute. For nominally SGML-based versions of HTML and for XHTML, this follows from general SGML and XML rules. For HTML serialized HTML5, see HTML5 CR, 8.1.2.3 Attributes.
It’s difficult to see why you would use duplicate id attributes, so I can’t suggest a workaround. In general, for any normal use of the id attribute, one attribute per element is sufficient.
No. Element IDs should be unique within the entire document.
My question is simple
How many custom attributes we can use in a element e.g
<input value="1" vcFlag="true" name="example" />
I am using vcFlag="true" as custom attribute how many attributes like this I can put in this input element. Is there any limit or not.
thanks
There is no (theoric) limit to the number of attributes you can add to a HTML tag:
Every HTML element may have any number of custom data attributes specified, with any value.
Attribute parsing is slower than node parsing so if you use a huge number of custom attributes you may slow down page parsing, specially on some old browsers.
Just rmember to prefix them with data- to be HTML 5 compatible: Data Attributes on W3C Working Draft.
In your case it should be:
<input value="1" data-vcFlag="true" name="example" />
There is no limit for custom attributes.
Thanks to HTML5, we now have the ability to embed custom data attributes on all HTML elements, these new custom data attributes consist of two parts:
Attribute Name :
The data attribute name must be at least one character long and must be prefixed with 'data-' and should not contain any uppercase letters.
Attribute Value :
The attribute value can be any string.
HTH
Are there any advantages to using <div id="here" ... instead of <div name="here" ...?
Are they both referenced to as #here?
Here are some differences between both:
name has never been a div element attribute.
name as used on the form controls (input, textarea, select, and button elements) is radically different from the id attribute on named elements. In this case, the name attribute relates to how data is labeled when sent to server, and multiple elements may share the same name.
The id attribute on the other hand is for identifying one unique element for the purposes of scripting, styling, or addressing.
The use of the name attribute on other elements than form controls was in HTML 4.01 the same as that of id, but it allowed for a wider set of characters than the id attribute and wasn't controlled in quite the same way. Because of this ambiguity the W3C decided to deprecate/remove the name attribute on those elements in favor for the unambigous id attribute in XHTML.
This is also connected to another detail of XML however - only one attribute of any element may be of the type ID, which would not be the case if they let name stay on the element, but corrected the ambiguity problems.
As the name attribute didn't work the same on those two sets of elements, it was best to remove one of them.
In short, for backwards compatibility, you should use the name and id attribute both, both set to the same value, for all elements except form controls if you use HTML 4.01 or XHTML 1.0 Transitional. If you use XHTML 1.0 Strict or later you should use only id. For form controls, you should use name for what you want the form to send to the server and for DOM 0 access, and only use id for styling, DOM1-3 access or addressing reasons
It depends on where you are going to use them.
Usually, id of an element is unique while multiple elements can share the same name.
Id is referenced as #here, and name is referenced as [name=here].
They are not interchangeable, even if they sometimes appear to be.
Name should only exist on form input fields. It is what that tag will cause the browser to pass in the submission as the name of the field. As Tomalak noted in a comment, DIV actually does not have a Name attribute.
ID is the unique identifier for the DOM, to manipulate or refer to the tag; for example, in JavaScript.
The "id" attribute assigns an identifier to the associated element. This identifier must be unique in the document and can be used to refer to that element.
Check div element.
You are probably thinking about the input tag. It offers the name attribute to identify which input is what when the form is submitted.
id would be only used to style the input, whereas name would not.
One thing of importance that hasn't been mentioned in the other answers is that a form with a name attribute gets added as a variable to the document object in JavaScript. Any form controls with a name inside that form are accessible as child objects on the form element.
So if, for example, you had some HTML like the following:
<form name="myForm">
<input name="myInput" type="text" />
</form>
You could access the form with document.myForm or access the input element with document.myForm.myInput.
See an example of this idea in action on JSFiddle.
The answer is:
the id attribute is to be unique across the entirety of the HTML document, and
the name attribute has no such requirement.
By convention, the name value is used with forms to help with the processing of forms, particularly with radio buttons. How you use the name attribute depends on your use case. If you need some other tag for your use case, you can of course create a new attribute and use that as you will; pick a name for your attribute that will likely be very unique!
Like a tag that I can use to store some necessary info? But really isn’t required or used by the HTML? Works like the tag attribute for objects on Visual Basic?
Up until HTML5 no. With HTML 5 there is provision for this with the data-* attribute.
For example:-
<div id="myStuff" data-mydata="here is my data">
In current technology there is no "official" away to do this. However all browsers allow you to add any arbitary attribute to a HTML element so in HTML4 you can do this:-
<div id="myStuff" data-mydata="here is my data">
Which as you can see is identical but not offically sactioned and if you want strict XHMTL compliance will be considered "broken".
You can access the attribute just as you would any other:-
var mydata = document.getElementById("myStuff").getAttribute("data-mydata");
You could perhaps use the html5 data-* attributes? It'll fail validation on html4, but it is still probably the best option...
If you're storing data to use in javascript, you can also use something like jQuery's Metadata plugin. Basically, you can store data within the element's class="" attribute, like so:
<div id="aaa" class="class1 class2 class3 { type: 'food', color: 'green' }"></div>
Then in javascript:
alert($('#aaa').metadata().color) // "green"
Other kits use the title or rel attributes to store data. While this is more validation friendly, it may or may not be better than using AnthonyWJones' answer of just using non-standard attributes. It'll "break" validation, but then again according to Dojo, custom attributes are perfectly valid HTML, even if they don't validate against a DTD.
So no - there isn't a single well accepted specific attribute where you can dump all data. All existing attributes are for specific uses. But you can either 1) create your own attributes, or 2) coopt an existing tag to reuse for your purposes. Just wanted to point out the alternative.
Have a look at www.htmlref.com or W3C for the used attributes.
Other than those you can just add your own, they will render and they will be accessible via code for instance in C# you can access a controls attribute collection.
Control.Attributes["MyCustomAttribute"] = "Hello World";
there’s rel and rev attributes, which work in elements with an href-attribute. they have a semantic meaning, but are often abused as an attribute to store additional information