HTML 5 – Easier and Better Than XHTML

HTML 4.01 was replaced by XHTML, which 18 months ago I was praising XHTML as the greatest thing. XHTML is a strict version of XML and HTML. XHTML aimed to be a pure XML language and dropped most of the formatting elements like the font, b (bold) and i (italics) tags. XHTML was strict and had the following rules:

• Elements have to be in lower case
• Elements’ attributes have to be in lowercase
• For every element opened, it had to be closed, though you could self-close elements
• Only the set attributes for each element could be used
• The document application type needed to be XML, though this was rarely practiced
• In line elements (e.g. anchor tags for links) were not to wrap around block level (e.g. divs).
• Double quotation marks had to be used to contain the attributes values
• Only markup was contained in the document, the presentation and interaction was pushed out to external files

An XHMTL could look like

[cc lang=”XHTML”]

An XHTML Document

Example

This is an example XHTML document.

[/cc]

While the same page in HTML 5 could look like (though is poorly formed):

[cc lang=”html”]

An HTML Document

Example

This is an example HTML document.

[/cc]

Notice in HTML 5:

• A DOCTYPE is declared, though in XHTML even though it is not required many developers declared it anyway because they do not serve their pages as XML
• The HTML DTD URI is not declared, useless anyway as browsers ignored the published DTD anyway
• The body element name is in uppercase, as HTML5 is not case sensitive, though I personally prefer to keep it lower case
• The class attribute of body is in uppercase (for example purposes only)
• The value of the class attribute of body is not wrap in quotation marks, in HTML 5 you can use single, double or no quotation marks. Though again I prefer to use double quotation marks for readability.
• The paragraph attribute is not closed. This actually bugs me as I think it actually makes it easier to find problems and makes it easier to read if the tags are closed.

FYI – HTML/XHTML is a collection of blocks of content, aka elements or tags. These blocks describe the structure of the page. An element is declared by an open angle bracket (), the content, open angle bracket ().

i.e.
[cc][content][/cc]

e.g.
[cc lang=”HTML”]

This is an example paragraph

[/cc]

XHTML by being stricter help developers to form much nicer HTML. It forced you to be discipline and made making updates and debugging a lot easier.

Being unforgiving, XHMTL drove a lot of developers nuts. So I think developers should look at HTML 5’s looser restrictions as a reward and not a right. Documents should be well structured/form, though enjoy the ability to add attributes to tags outside of the spec such as placeholder.

By following the disciplines of XHTML, my HTML 5 example should look like:

[cc lang=”HTML”]

An HTML Document

Example

This is an example HTML document.

[/cc]

This document still looks a lot like the XHMTL document, and not that much easier. This is because we are looking at too simple of a page. A lot of the ease comes in the form of the new elements which help make the HTML more readable and adding functionality.

For example:

• The video element will eventually replace the need to use Flash or SilverLight to embed videos into the page
• The placeholder attribute will replace the JavaScript hacks to add placeholders to inputs
• The new input types will replace the JS hacks for dates, numbers, sliders