Ever wondered what those first few lines of an HTML file — that you probably copy-and-pasted from elsewhere — actually mean? Well this blog post will try to shed some light on that.
The first line of a properly formatted HTML document should be a DOCTYPE tag. This lets the browser know what type of document follows. In previous version of HTML (before HTML5), SGML tools relied upon Document Type Definitions to parse and validate the HTML. Most browsers however do not rely upon SGML and therefore do not read the DTD. HTML5 does not even define a DTD. The DTDs for HTML4 can still be found on the w3.org servers:
Examples of the DOCTYPE tag for various versions of HTML are shown below:
HTML 2 (1995)
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
HTML 3.2 (1997)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
HTML 4.01 (1999)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML Vs XHTML
In 2000 XHTML was introduced as a more restrictive subset of SGML for which HTML was originally based. By using the more restrictive XML as a basis for XHTML, standard XML parsers could be used to parse and validate XHTML. XHTML 1.0 was made a WC3 Recommendation in 2000 and XHTML 1.1 in 2001.
Depending upon the element/tag that is used with XHTML, the order of the DOCTYPE and html/xml are different. When using the html tag, the page must start with a DOCTYPE tag as shown below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
When using XHTML, and the xml tag, the document must start with the xml tag as shown below:
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
In the end, most browsers are fairly backwards compatible, but this doesn’t mean you should abuse that fact as it will cause a browser to render a page incorrectly at some point. For HTML stick with the simple DOCTYPE shown above, and for XHTML pick either an XML or HTML tag and follow the examples shown above.