Doctype, Meta, and More | Thomas Wallace

Up until recently the xhtml doctype has been the doctype of choice for proponents of web standards. At the core of this practice was the need to for predictable rendering of html. Failure to declare a doctype could lead the browser to render in a fallback mode in an attempt to make sense of bad or undeclared mark up. These fallback modes are…

Quirks Mode

In the Quirks mode, browsers violate contemporary Web format specifications in order to avoid “breaking” pages authored according to practices that were prevalent in the late 1990s.

Standards Mode

In the Standards mode, browsers try to give conforming documents the specification-wise correct treatment to the extent implemented in a particular browser. HTML5 calls this mode the “no quirks mode.”

Almost Standards Mode

Firefox, Safari, Chrome, Opera (since 7.5) and IE8 also have a mode known as “Almost Standards mode,” that implements the vertical sizing of table cells traditionally and not rigorously according to the CSS2 specification. HTML5 calls this mode the “limited quirks mode.”

More here on the different modes if you are interested.

Before html5 came along the only way to get the browser to render in Standards Mode was to declare a long doctype like this.

XHTML Doctype

[crayon][/crayon]

With HTML5 this is overkill. The new doctype will trigger standards mode in all modern browsers.

HTML5 Doctype

[crayon][/crayon]

The HTML element (Root Element)

[crayon][/crayon]

In xhtml we had to declare a namespace attribute in order to create a valid document. In addition we needed needed to declare a language for the document twice (one for html and one for xml). With html5 the “xmlns” attribute is no longer necessary. So is the additional xml:lang attribute. We can now pare down the html element to the tag and one attribute like so.

[crayon][/crayon]

The HEAD Element

Character Encoding

While the head of any given xhtml document will contain numerous snippets of meta-data and linked related content, there are several elements that should be included in every document we create. Let’s look at a few.

[crayon][/crayon]

No longer do we need to set the the “http-equiv” or “content” attribute but we still need to set the “charset”. We’ll use UTF-8 as it is most often going to meet our needs. The tag should look like so now.

[crayon][/crayon]

Link Elements and REL attributes

We’ve discussed on several occasions how the HEAD section contains links or references to all kinds of resources that are either required or desired for our site to function as intended. The link element is the primary means of doing this. For example, let’s look at a simple style sheet link in the head of our sample document.

[crayon][/crayon]

There are two attributes you should notice here. The the type attribute and the rel attribute. In this example the type attribute is no longer necessary and the rel attribute is give the browser or more importantly search engines more information about the relationship between the linked resource and the html document.

[crayon][/crayon]

Looking further on down the content of the HEAD section you’ll notice several other instances of link tags with different “rel” attributes.

[crayon]

[/crayon]