Can I add a custom attribute to an HTML tag

Question

Can I add a custom attribute to an HTML tag like the following    lt tag myAttri  myVal    gt

User · Answer

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 nbsp Explorer

User · Answer

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       lt span attribute  value   gt hello world lt  span gt      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

User · Answer

Yes  you can use data-  attribute  The data-  attribute is used to store custom data private to the page or application   lt ul gt       lt li data-pageNumber  quot 1 quot  gt  1  lt  li gt       lt li data-pageNumber  quot 2 quot  gt  2  lt  li gt         lt li data-pageNumber  quot 3 quot  gt  3  lt  li gt     lt  ul

User · Answer

I can think of a handy use for the custom tag  quot init quot    Include a JavaScript expression that gets evaluated at document onLoad   time and provides a value for the tag  e g   lt p gt  amp lt p amp gt The UTC date is  amp lt span init  quot new Date   toUTCString   quot  amp gt   amp lt  span amp gt   amp lt p amp gt  lt  p gt   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

User · Answer

You can do something like this to extract the value you want from JavaScript instead of an attribute    lt a href     class  click  gt       lt span style  display none   gt value for JavaScript lt  span gt some text  lt  a gt

User · Answer

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-

User · Answer

No  this will break validation   In HTML 5 you can will be able to add custom attributes  Something like this    lt tag data-myAttri  myVal    gt

User · Answer

Yes  you can do it   Having the next HTML tag    lt tag key  value   gt    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

User · Answer

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

User · Answer

use data-any   I use them  a lot   lt aside data-area  asidetop  data-type  responsive  class  top  gt

User · Answer

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     lt html gt   lt script gt    function demonstrate        var x   document getElementById  example data   querySelectorAll  input        console log x       for i 0 i lt 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 lt split line to illustrate length j             console log  item     j    is      split line to illustrate j                             lt  script gt     lt body gt    lt div id  example data  gt     lt  -- consider the id values representing a  from-to  relationship -- gt     lt input id  1 2  type  number  name  quantity  min  0  max  9  value  2  gt     lt input id  1 4  type  number  name  quantity  min  0  max  9  value  1  gt     lt input id  3 6  type  number  name  quantity  min  0  max  9  value  5  gt     lt  div gt    lt input type  button  name    id     value  show me  onclick  demonstrate     gt    lt  body gt   lt  html gt

User · Answer

In HTML5  yes  use the data- attribute     lt ul gt     lt li data-animal-type  bird  gt Owl lt  li gt     lt li data-animal-type  fish  gt Salmon lt  li gt     lt li data-animal-type  spider  gt Tarantula lt  li gt   lt  ul gt

User · Answer

x000D   x000D  var demo   document getElementById  demo   x000D  console log demo dataset myvar  x000D     or x000D  alert demo dataset myvar  x000D    this will show in console the value of myvar x000D   lt div id  demo  data-myvar  foo  gt anything lt  div gt  x000D   x000D   x000D

User · Answer

You can set properties from JavaScript   document getElementById  foo   myAttri    myVal

User · Answer

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

User · Answer

You can amend your  DOCTYPE declaration  i e  DTD  to allow it  so that the  XML  document will still be valid    lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Transitional  EN   http   www w3 org TR xhtml1 DTD xhtml1-transitional dtd       lt  ATTLIST tag myAttri CDATA  IMPLIED gt    gt     IMPLIED means it is an optional attribute  or you could use  REQUIRED  etc   More information is in DTD - Attributes

User · Answer

Yes  you can  you did it in the question itself   lt html myAttri  myVal   gt

[html] Can I add a custom attribute to an HTML tag?

Examples related to html

Examples related to custom-attribute