Can I add a custom attribute to an HTML tag?

Html Problem Overview

Can I add a custom attribute to an HTML tag like the following?

<tag myAttri="myVal" />

Html Solutions

Solution 1 - Html

You can add custom attributes to your elements at will. But that will make your document invalid.

In HTML 5 you will have the opportunity to use custom data attributes prefixed with data-.

Solution 2 - Html

You can amend your !DOCTYPE declaration (i.e. DTD) to allow it, so that the [XML] document will still be valid:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
[
  <!ATTLIST tag myAttri CDATA #IMPLIED>
]>

#IMPLIED means it is an optional attribute, or you could use #REQUIRED, etc.

More information is in DTD - Attributes.

Solution 3 - Html

No, this will break validation.

In HTML 5 you can/will be able to add custom attributes. Something like this:

<tag data-myAttri="myVal" />

Solution 4 - Html

The jQuery data() function allows you to associate arbitrary data with DOM elements. Here's an example.

Solution 5 - Html

In HTML5: yes: use the data- attribute.

 <ul>
  <li data-animal-type="bird">Owl</li>
  <li data-animal-type="fish">Salmon</li>
  <li data-animal-type="spider">Tarantula</li>
</ul>

Solution 6 - Html

Yes, you can do it!

Having the next HTML tag:

<tag key="value"/>

We can access their attributes with JavaScript:

element.getAttribute('key'); // Getter
element.setAttribute('key', 'value'); // Setter

Element.setAttribute() put the attribute in the HTML tag if not exist. So, you dont need to declare it in the HTML code if you are going to set it with JavaScript.

key: could be any name you desire for the attribute, while is not already used for the current tag. value: it's always a string containing what you need.

Solution 7 - Html

Yes, you can, you did it in the question itself: <html myAttri="myVal"/>.

Solution 8 - Html

var demo = document.getElementById("demo")
console.log(demo.dataset.myvar)
// or
alert(demo.dataset.myvar)
//this will show in console the value of myvar

<div id="demo" data-myvar="foo">anything</div>

Solution 9 - Html

You can set properties from JavaScript.

document.getElementById("foo").myAttri = "myVal"

Solution 10 - Html

Here is the example:

document.getElementsByTagName("html").foo="bar"

Here is another example how to set custom attributes into body tag element:

document.getElementsByTagName('body')[0].dataset.attr1 = "foo";
document.getElementsByTagName('body')[0].dataset.attr2 = "bar";

Then read the attribute by:

attr1 = document.getElementsByTagName('body')[0].dataset.attr1
attr2 = document.getElementsByTagName('body')[0].dataset.attr2

You can test above code in Console in DevTools, e.g.

Solution 11 - Html

use data-any , I use them a lot

<aside data-area="asidetop" data-type="responsive" class="top">

Solution 12 - Html

Yes, you can use data-* attribute. The data-* attribute is used to store custom data private to the page or application.

<ul>
    <li data-pageNumber="1"> 1 </li>
    <li data-pageNumber="2"> 2 </li>  
    <li data-pageNumber="3"> 3 </li>  
</ul

Solution 13 - Html

well! you can actually create a bunch of custom HTML attributes by disguising the data attributes in what you actually want.

eg.

[attribute='value']{
color:red;
}

<span attribute="value" >hello world</span>

It apparently works but that would invalidate your document, there is no need of using JScript for you to have custom attributes or even elements unless you have to, you just need to treat your new formulated(custom) attributes just the same way you treat your "data" attribute

Remember "invalid" does not mean anything. The document will load fine at all the time. and some browsers would actually validate your document only by the presence of DOCTYPE....., you actually know what I mean.

Solution 14 - Html

Another approach, which is clean and will keep the document valid, is to concatenate the data you want into another tag e.g. id, then use split to take what you want when you want it.

<html>
<script>
  function demonstrate(){
    var x = document.getElementById("example data").querySelectorAll("input");
    console.log(x);
    for(i=0;i<x.length;i++){
      var line_to_illustrate = x[i].id  + ":" + document.getElementById ( x[i].id ).value;
      //concatenated values
      console.log("this is all together: " + line_to_illustrate); 
      //split values
      var split_line_to_illustrate = line_to_illustrate.split(":");
      for(j=0;j<split_line_to_illustrate.length;j++){
        console.log("item " + j+ " is: " + split_line_to_illustrate[j]);
      }      
    }
  }
</script> 

<body>

<div id="example data">
  <!-- consider the id values representing a 'from-to' relationship -->
  <input id="1:2" type="number" name="quantity" min="0" max="9" value="2">
  <input id="1:4" type="number" name="quantity" min="0" max="9" value="1">
  <input id="3:6" type="number" name="quantity" min="0" max="9" value="5">  
</div>

<input type="button" name="" id="?" value="show me" onclick="demonstrate()"/>

</body>
</html>

Solution 15 - Html

I can think of a handy use for the custom tag "init". Include a JavaScript expression that gets evaluated at document.onLoad() time and provides a value for the tag, e.g.

<p>&lt;p&gt;The UTC date is &lt;span init="new Date().toUTCString()"&gt;?&lt;/span&gt;.&lt;p&gt;</p>

Some boilerplate JavaScript code would scan all the tags in the DOM at document.onload() time looking for the init attributes, evaluating the expressions that they contain, and assigning them to the containing tag's innerHTML. This would give HTML some of the power of JSP, PHP etc. Currently we have to split the HTML markup and the JavaScript code that illuminates it. Bugs love split code.

Solution 16 - Html

With custom elements, it seems common to add custom attributes without data- prefix.

Here is an example from HTML standard: Custom elements (note the country attribute):

<flag-icon country="nl"></flag-icon>

Another example from MDN Web Docs: Using custom elements (note the l and c attributes):

<custom-square l="100" c="red"></custom-square>

Solution 17 - Html

You can add, but then you have to write a line of JavaScript code too,

document.createElement('tag');

to make sure everything fall in place. I mean Internet Explorer :)

Solution 18 - Html

You can do something like this to extract the value you want from JavaScript instead of an attribute:

<a href='#' class='click'>
    <span style='display:none;'>value for JavaScript</span>some text
</a>

Content Type	Original Author	Original Content on Stackoverflow
Question	lovespring	View Question on Stackoverflow
Solution 1 - Html	Gumbo	View Answer on Stackoverflow
Solution 2 - Html	carillonator	View Answer on Stackoverflow
Solution 3 - Html	user151323	View Answer on Stackoverflow
Solution 4 - Html	Draemon	View Answer on Stackoverflow
Solution 5 - Html	Davide Andrea	View Answer on Stackoverflow
Solution 6 - Html	IgniteCoders	View Answer on Stackoverflow
Solution 7 - Html	luvieere	View Answer on Stackoverflow
Solution 8 - Html	Jasim Droid	View Answer on Stackoverflow
Solution 9 - Html	ewg	View Answer on Stackoverflow
Solution 10 - Html	kenorb	View Answer on Stackoverflow
Solution 11 - Html	Erick Boileau	View Answer on Stackoverflow
Solution 12 - Html	Ajinkya Badave	View Answer on Stackoverflow
Solution 13 - Html	Abdulbasit	View Answer on Stackoverflow
Solution 14 - Html	CAtoOH	View Answer on Stackoverflow
Solution 15 - Html	Trevor Turton	View Answer on Stackoverflow
Solution 16 - Html	Mahozad	View Answer on Stackoverflow
Solution 17 - Html	defau1t	View Answer on Stackoverflow
Solution 18 - Html	Frog	View Answer on Stackoverflow