jQuery: detecting HTML5

Sometimes your code needs that the host document uses HTML5. How can you detect if your target document is using HTML5? There are currently two ways of doing this: DTD detection and element detection. Let's see the analysis of both approaches.

DTD detection

Though it's not consistently supported, you can use the doctype property of the document object. The following code creates a tool for inspecting this object:

(function($) {

  $.isHTML5 = function() {
  
    var DTD = document.doctype;
    var str = '';
    
    $.each(DTD, function(prop, value) {
    
      str += '[' + prop + ']' + value + '\n';
    
    
    });
    
    $('#console').text(str);
  
  };

})(jQuery);

$(function() {

  $.isHTML5();

});

Results are the following:

HTML5 DOCTYPE

[parentElement]null
[nodeType]10
[localName]null
[prefix]null
[ownerDocument][object HTMLDocument]
[previousSibling]null
[namespaceURI]null
[lastChild]null
[textContent]null
[nextSibling][object HTMLHtmlElement]
[childNodes][object NodeList]
[name]html
[baseURI]null
[notations]null
[firstChild]null
[attributes]null
[parentNode][object HTMLDocument]
[internalSubset]null
[systemId]
[nodeName]html
[nodeValue]null
[entities]null
[publicId]
[insertBefore]function insertBefore() { [native code] }
[replaceChild]function replaceChild() { [native code] }
[removeChild]function removeChild() { [native code] }
[appendChild]function appendChild() { [native code] }
[hasChildNodes]function hasChildNodes() { [native code] }
[cloneNode]function cloneNode() { [native code] }
[normalize]function normalize() { [native code] }
[isSupported]function isSupported() { [native code] }
[hasAttributes]function hasAttributes() { [native code] }
[lookupPrefix]function lookupPrefix() { [native code] }
[isDefaultNamespace]function isDefaultNamespace() { [native code] }
[lookupNamespaceURI]function lookupNamespaceURI() { [native code] }
[addEventListener]function addEventListener() { [native code] }
[removeEventListener]function removeEventListener() { [native code] }
[isSameNode]function isSameNode() { [native code] }
[isEqualNode]function isEqualNode() { [native code] }
[compareDocumentPosition]function compareDocumentPosition() { [native code] }
[dispatchEvent]function dispatchEvent() { [native code] }
[ELEMENT_NODE]1
[ATTRIBUTE_NODE]2
[TEXT_NODE]3
[CDATA_SECTION_NODE]4
[ENTITY_REFERENCE_NODE]5
[ENTITY_NODE]6
[PROCESSING_INSTRUCTION_NODE]7
[COMMENT_NODE]8
[DOCUMENT_NODE]9
[DOCUMENT_TYPE_NODE]10
[DOCUMENT_FRAGMENT_NODE]11
[NOTATION_NODE]12
[DOCUMENT_POSITION_DISCONNECTED]1
[DOCUMENT_POSITION_PRECEDING]2
[DOCUMENT_POSITION_FOLLOWING]4
[DOCUMENT_POSITION_CONTAINS]8
[DOCUMENT_POSITION_CONTAINED_BY]16
[DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC]32

XHTML 1.0 Strict DOCTYPE

[parentElement]null
[nodeType]10
[localName]null
[prefix]null
[ownerDocument][object HTMLDocument]
[previousSibling]null
[namespaceURI]null
[lastChild]null
[textContent]null
[nextSibling][object HTMLHtmlElement]
[childNodes][object NodeList]
[name]html
[baseURI]null
[notations]null
[firstChild]null
[attributes]null
[parentNode][object HTMLDocument]
[internalSubset]null
[systemId]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
[nodeName]html
[nodeValue]null
[entities]null
[publicId]-//W3C//DTD XHTML 1.0 Strict//EN
[insertBefore]function insertBefore() { [native code] }
[replaceChild]function replaceChild() { [native code] }
[removeChild]function removeChild() { [native code] }
[appendChild]function appendChild() { [native code] }
[hasChildNodes]function hasChildNodes() { [native code] }
[cloneNode]function cloneNode() { [native code] }
[normalize]function normalize() { [native code] }
[isSupported]function isSupported() { [native code] }
[hasAttributes]function hasAttributes() { [native code] }
[lookupPrefix]function lookupPrefix() { [native code] }
[isDefaultNamespace]function isDefaultNamespace() { [native code] }
[lookupNamespaceURI]function lookupNamespaceURI() { [native code] }
[addEventListener]function addEventListener() { [native code] }
[removeEventListener]function removeEventListener() { [native code] }
[isSameNode]function isSameNode() { [native code] }
[isEqualNode]function isEqualNode() { [native code] }
[compareDocumentPosition]function compareDocumentPosition() { [native code] }
[dispatchEvent]function dispatchEvent() { [native code] }
[ELEMENT_NODE]1
[ATTRIBUTE_NODE]2
[TEXT_NODE]3
[CDATA_SECTION_NODE]4
[ENTITY_REFERENCE_NODE]5
[ENTITY_NODE]6
[PROCESSING_INSTRUCTION_NODE]7
[COMMENT_NODE]8
[DOCUMENT_NODE]9
[DOCUMENT_TYPE_NODE]10
[DOCUMENT_FRAGMENT_NODE]11
[NOTATION_NODE]12
[DOCUMENT_POSITION_DISCONNECTED]1
[DOCUMENT_POSITION_PRECEDING]2
[DOCUMENT_POSITION_FOLLOWING]4
[DOCUMENT_POSITION_CONTAINS]8
[DOCUMENT_POSITION_CONTAINED_BY]16
[DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC]32

HTML 4.01 Strict DOCTYPE

[parentElement]null
[nodeType]10
[localName]null
[prefix]null
[ownerDocument][object HTMLDocument]
[previousSibling]null
[namespaceURI]null
[lastChild]null
[textContent]null
[nextSibling][object HTMLHtmlElement]
[childNodes][object NodeList]
[name]html
[baseURI]null
[notations]null
[firstChild]null
[attributes]null
[parentNode][object HTMLDocument]
[internalSubset]null
[systemId]http://www.w3.org/TR/html4/strict.dtd
[nodeName]html
[nodeValue]null
[entities]null
[publicId]-//W3C//DTD HTML 4.01//EN
[insertBefore]function insertBefore() { [native code] }
[replaceChild]function replaceChild() { [native code] }
[removeChild]function removeChild() { [native code] }
[appendChild]function appendChild() { [native code] }
[hasChildNodes]function hasChildNodes() { [native code] }
[cloneNode]function cloneNode() { [native code] }
[normalize]function normalize() { [native code] }
[isSupported]function isSupported() { [native code] }
[hasAttributes]function hasAttributes() { [native code] }
[lookupPrefix]function lookupPrefix() { [native code] }
[isDefaultNamespace]function isDefaultNamespace() { [native code] }
[lookupNamespaceURI]function lookupNamespaceURI() { [native code] }
[addEventListener]function addEventListener() { [native code] }
[removeEventListener]function removeEventListener() { [native code] }
[isSameNode]function isSameNode() { [native code] }
[isEqualNode]function isEqualNode() { [native code] }
[compareDocumentPosition]function compareDocumentPosition() { [native code] }
[dispatchEvent]function dispatchEvent() { [native code] }
[ELEMENT_NODE]1
[ATTRIBUTE_NODE]2
[TEXT_NODE]3
[CDATA_SECTION_NODE]4
[ENTITY_REFERENCE_NODE]5
[ENTITY_NODE]6
[PROCESSING_INSTRUCTION_NODE]7
[COMMENT_NODE]8
[DOCUMENT_NODE]9
[DOCUMENT_TYPE_NODE]10
[DOCUMENT_FRAGMENT_NODE]11
[NOTATION_NODE]12
[DOCUMENT_POSITION_DISCONNECTED]1
[DOCUMENT_POSITION_PRECEDING]2
[DOCUMENT_POSITION_FOLLOWING]4
[DOCUMENT_POSITION_CONTAINS]8
[DOCUMENT_POSITION_CONTAINED_BY]16
[DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC]32

HTML5 doesn't have a publicId and systemId values. They're empty. Theoretically speaking, you could run a check on these properties to test whether they have a value or not. However, this kind of test is not 100% safe.

Element detection

XHTML and HTML4 elements (except for some deprecated elements, such as acronym) are also valid HTML5 elements. This means that if you wish to run an element detection, you should start by checking for the existence of the new HTML5 elements in a document. This is rather complicated, because an author could have chosen to avoid the new elements and stick to the old ones.

In some new Wordpress themes, the first HTML5 element used in the source is header:

if($('header', 'body').length) {

  // do something

}

This kind of detection is rather expensive and prone to failure.