rodsdot.com :: custom attributes

A Note about validating your HTML.

The W3C recommendation allows you to specify your custom attributes so your HTML markup will be valid. You may do this two ways.

You may specify the custom attributes inline with the DOCTYPE tag (as I have done here,) or
You may create a custom DTD file and place your attribute specifications in that file.

If you choose the second method, your DOCTYPE tag will specify your file, such as:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.yourdomain.com/path/yourcustom.dtd">

The W3C validator will not correctly validate your page if you use your own custom definition file. It will validate your page if you use the first method, but you will also see a ]> at the beginning of the page as you may see here. (You can position your top element - here a brown menu bar - over the ]> using CSS.)

Also note that TIDY (http://tidy.sourceforge.net/) is an open source HTML validator and clean up service. It is currently unable to follow the W3C recommendation for custom extensions to the document type definition. Your markup is still valid, but TIDY does not understand. TIDY is used as a plugin for some web browsers to report if the page being viewed has valid markup. [hide note]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"
[
  <!ATTLIST input custom1 CDATA #IMPLIED>
  <!ATTLIST input extradata CDATA #IMPLIED>
]>
<html lang="en">

<head>
<title>custom attributes</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="author" content="Roderick Divilbiss">
<meta name="copyright" content="© 2005, 2006 Roderick Divilbiss">
<script type="text/javascript">
<!--
function showAtts(el) {
  var out='Attributes for '+el.name+'\n';
  out+='ID '+el.id+'\n';
  out+='TYPE '+el.type+'\n';
  out+='CUSTOM1 '+el.getAttribute('custom1')+'\n';
  out+='extradata  '+el.getAttribute('extradata ')+'\n';
  alert(out);
}

function setAtt(el1,el2) {
  el1.setAttribute('extradata ',el2.value);
  showAtts(el1);
}
//-->
</script>
</head>

<body>
  <input type="text" id="t1" name="t1" size="20" value="This has custom attributes" custom1="Value of custom attribute one" extradata="custom 2 value"> <input type="button" value="Show Value of Custom Attributes" name="B1" onclick="showAtts(document.getElementById('t1'));"><br>
  <input type="text" id="t2" name="t2" size="20"> <input type="button" onclick="setAtt(document.getElementById('t1'),document.getElementById('t2'));" value="Set New Value for custom1" name="b2"></div>
</body>

</html>

Except where otherwise noted, this site, all content, and all source code and markup is licensed under a Creative Commons License Creative Commons License.

No part of this web site including all application code and examples may be used for commercial purposes without prior written permission from the author, Roderick W. Divilbiss of Overland Park, Kansas, United States of America.

How can you use custom attributes on an HTML element?

A Note about validating your HTML.