<!DOCTYPE html> - The Right DOCTYPE Is That Simple

 

ATTENTION: THIS PAGE IS Valid HTML 5 AND IS BEST VIEWED WITH HTML 5 - Please upgrade your browser or download one of the HTML 5 compatible browsers such as Mozilla Firefox, Chrome, Opera or IE 9 (March 14, 2011 or later). For more information see HTML 5 browsers.


If you find this helpful, please click the Google +1 Button to the left, if it is white, to make it turn blue or red. Thank you! (It also helps find this page again more easily.)


PDF mobile

Just use "<!DOCTYPE html>" for HTML 5

The <!DOCTYPE html> document type declaration tag is one of the declaration tags in HTML and indicates that the content of the document is using HTML (Hypertext Markup Language) coding. The name parameter of the DOCTYPE declaration must be html, matching the name of the top element of an HTML document. The PUBLIC ...FPI... part of the declaration (<!DOCTYPE html PUBLIC ...>) identifies older HTML versions and should no longer be included in the DOCTYPE declaration.

The DOCTYPE declaration comes after the xml declaration and optional xml-stylesheet processing instruction, and before the starting <html> tag.

HTML Best Practices - Why specify a DOCTYPE?

From the W3C Tips for Webmasters:

Why specify a DOCTYPE? Because it defines which version of (X)HTML your document is actually using, and this is a critical piece of information needed by browsers or other tools processing the document.

Since the document type is needed by web browsers, viewers and other HTML parsing tools in order to properly interpret a document as a particular version of HTML, the information provided by the <!DOCTYPE html> tag is especially significant in situations where there are no HTTP headers available or when the headers do not indicate an xHTML/XML media type such as application/xhtml+xml. Therefore, the DOCTYPE declaration is an important element in HTML documents, especially when creating polyglot HTML documents.

How to verify the DOCTYPE is working right

To verify that the DOCTYPE on a web page is working, bring up the page in Firefox (on a Windows system). Look for the three indicators on the right hand side of the tool bar, as shown in the screen capture below. You can mouse over them to get a pop-up tool tip showing what the indicators mean. The first one should be a green check mark to indicate the page is being displayed in Standards Compliance Mode. The other two should also be green indicating the page is free from CSS errors and free from JavaScript errors, respectively.

Firefox Standards Compliance Mode

Syntax of the <!DOCTYPE html> Tag for HTML 5

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet ...?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
   ...
</html>
Rules for coding the DOCTYPE declaration for HTML 5
  • Code the DOCTYPE declaration just before the beginning <html> tag, below the xml declaration and any processing instructions such as an xml-stylesheet processing instruction.
  • The DOCTYPE declaration starts with the characters <!. This indicates that the element is a SGML declaration rather than an HTML tag. (Besides the DOCTYPE declaration, the only other HTML code that starts with the characters <! are HTML comments.)
  • Code the name of the top element of the document. The DOCTYPE for HTML documents is html. This is not a named attribute value, and therefore is not enclosed in quotes.
  • Do not include a PUBLIC DTD identifier or SYSTEM URL. There is no DTD in HTML 5.
  • The DOCTYPE declaration ends with the character >. (There is no ! or self-closing / before the > terminating delimiter.)
  • The DOCTYPE declaration does not have a corresponding end tag.

Attributes of the <!DOCTYPE html> Declaration

The <!DOCTYPE html> tag is an SGML declaration and therefore does not have any named attributes like those used when coding other HTML tags.

The tag name of the top element of the HTML document follows the DOCTYPE keyword.

<!DOCTYPE html>

The PUBLIC identifier should never be coded on the DOCTYPE declaration.

If software generating HTML code requires that either a PUBLIC or SYSTEM identifier be included, then the SYSTEM keyword may be coded followed by the value "about:legacy-compat" enclosed in double quotes.

<!DOCTYPE html SYSTEM "about:legacy-compat">

DOCTYPE Declaration Examples

Examples of the DOCTYPE declaration in HTML 5
<!DOCTYPE html> with no additional entity declarations
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="/site-template.xsl"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
   ...
</html>

<! indicates that this is a SGML declaration, DOCTYPE indicates the declaration is for the document type, html is the tag name of the top element of the document and > ends the declaration.

If software generating HTML code does not allow the DTD to be omitted, the URI about:legacy-compat may be specified as a SYSTEM identifier:

<!DOCTYPE html SYSTEM "about:legacy-compat">
<!DOCTYPE html> with entities defined in an internal subset
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="/site-template.xsl"?>
<!DOCTYPE html [
   <!ENTITY nbsp "&#160;">
]>
<html xmlns="http://www.w3.org/1999/xhtml">
   ...
</html>

Changes in HTML 5 - <!DOCTYPE html> Declaration

What's new in HTML 5

There is no DTD in HTML 5. Therefore, the <!DOCTYPE html> tag should never contain a PUBLIC FPI and preferably should not include a SYSTEM identifier either. If the SYSTEM identifier is specified, the value should always be about:legacy-compat.

Differences between HTML 5 and earlier versions of HTML

In HTML 5, there is no more transitional DOCTYPE, which allowed deprecated presentational elements to be included in the HTML code. In previous versions of HTML the separation of content from presentation using the strict DOCTYPE with style sheets was optional. Going forward, web developers should always use style sheets.

The new <!DOCTYPE html> declaration is much simpler and easier to remember. The PUBLIC and SYSTEM DTD identifiers should be removed from these declarations:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

HTML pages that include a DTD (DOCTYPE definition) in the document type declaration as shown above may be interpreted as one of the older (1997, 1999, 2000 or 2001) versions of HTML or, worse yet, using quirks mode. Once the PUBLIC FPI and DTD identifiers have been removed, the pages should only be interpreted as HTML 5 standards mode documents.


Valid HTML 5