Specifying Custom HTML Attributes With A Custom DOCTYPE

When you add a custom attribute on an element, your page will no longer validate to the DOCTYPE you specified. (If you did not specify a DOCTYPE you do not have valid HTML or XHTML.) This page does have custom attributes which are specified in the markup per W3C recommendations using the <!ATTLIST tags and does validate correctly.

One excellent use of this method is to validly add attributes to form elements to be used in form validation.

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.

<!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>Specifying Custom HTML Attributes</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="author" content="Roderick Divilbiss">
<meta name="copyright" content="© 2005-2010 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+='VALUE '+el.value+'\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);
}

function toggleNote() {
    var oEl=document.getElementById('noteLink');
    if (oEl.innerHTML=='[more]') {
        document.getElementById('note').style.display='block';
        oEl.innerHTML='[hide]';
    }else{
        document.getElementById('note').style.display='none';
        oEl.innerHTML='[more]';
    }
}
</script>
<style type="text/css">
#topmenu {
    top:10px;
    z-index:2;
    position:absolute;
    width:96%;
    color:#FFFFFF;
    background-color:#B36B00;
    font-size:80%;
    text-align:right;
    padding-right:15px;
    height:16px;
    voice-family: "\"}\"";
    voice-family: inherit;
    height:15px
}

html>body #topmenu {
    height:15px;
}
</style>
</head>

<body>
  <input type="text" id="t1" name="t1" size="20" value="This has custom attributes" custom1="Value of custom attribute one" extradata="extradata 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.