Tips, Tricks & Tutorials

HTML Home | Development of HTML5 | Why HTML5?
Current Support | What's New | Content Models

HTML5: What's New?

HTML5 is mostly a revised version of HTML4, which means if you are comfortable writing HTML4, you will feel comfortable with most of the HTML5 specification.

The reason HTML5 specifications are twice as long as HTML4 (900 pages total) is that HTML5 replaces not only HTML4, but also XHTML1.0 and DOM Level 2 specification. Major differences in HTML5:

1. Simplified DOCTYPE: <!DOCTYPE HTML>

Some people would say that since HTML5 is no longer SGML based, a DOCTYPE really isn’t even required. In the HTML5 specifications, it states that a doctype is still required to trigger Standards mode. Without a doctype, quirks mode would be triggered.*

*To ensure older pages worked, browsers created two rendering modes: Quirks and Standards modes. Quirks mode rendered older non-valid code, while Standards mode ensured that pages rendered correctly based on the current specifications.

Also note, there must be no white space prior to the doctype. If there is an empty line above the doctype, that could trigger Quirks mode.

Previous DOCTYPE example: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

DOCTYPE is case sensitive. See W3.org.

2. Simplified character encoding.

HTML5 simplified character encoding: <meta charset=”UTF-8” />

Previous character encoding example: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML5 is backwards compatible, so this syntax still works if you wanted to use XHTML, for example.

Character encoding is how your browser takes the binary data sent to it and translates to characters on the screen.

3. Some new elements for page structure and embedded content.

article, aside, audio, footer, video, header, hgroup, figure, details, source, datalist, keygen, section, etc.

4. New form controls and input types allow you to create more powerful forms.

New form elements include date pickers and color pickers.

New input types such as url, email and search that make it easier to control presentation and behavior.

Added support for PUT and DELETE methods make it easier to submit data to many applications.

5. New integrated APIs that make developing web applications easier across multiple devices and user agents. These APIs include:

video

audio.

6. Structural Tags for sectioning content of the document.
HTML5 has new structural tags to give content more meaning. Currently DIV tags are often used to section content and identify it through a class or ID attribute. This method does not add meaning to the structure. With HTML 5, new structural tags can be used to identify and section content, replacing some of the more generic DIV tags.* Below are some examples of new structural tags in HTML5.

<footer></footer>
This element allows you to create footers.

<nav></nav>
Use this element for a section of a page that contains navigation links. Should only be used for major navigation blocks, not to wrap every grouping of links. Suitable for main navigation, but should not be used for links inside of footers, for example. The specification also intend the nav element to be used by assistive technology in determining when navigation should be skipped or immediately available for user agents such as screen readers.

<article></article>
May be used for a forum post, newspaper article, blog entry, or any other independent item of content. If the content can be syndicated through a feed or republished on its own, an article tag is warranted. Use when you want to create a new titled section in your document.

<section></section>
Use when you want to create a new titled section in your document.

<aside></aside>
This element is for a section of the page that consists of content that is related to the content around the element, but considered separate content. It should be nested within the section of content that it relates to. Perfect example for aside tag is pull quotes, related navigational groupings and sidebar content.

<header></header>
Although it is not required, the header element usually contains the section’s heading, an h1-h6 element or hgroup element. Header elements can be used to wrap a section’s table of contents or a search form.

*Use div tag when you need a container tag to specifically assist with styling or scripting. If you want to wrap the entire page in a tag to control layout, use divs. If you want to make sure several paragraphs are rendered as a column or that a series of images relate to each other, use divs as it is the best choice for adding structure in those cases. Use div element only when no other element is suitable. In HTML5, use of the div element instead of more appropriate elements leads to poor accessibility for readers and poor maintainability for authors. Consider using the new structural tags to identify sections of the document so that the content structure has greater meaning.

You should not need IDs as often to uniquely identify and give additional meaning to elements. For example, instead of using a div with an ID of header, you can now just use a header tag to give meaning to the structure of your document.
Example: http://www.alistapart.com/articles/previewofhtml5

7. Content tags allow you to place new types of content directly into your pages, without requiring plug-ins or additional programs.

<video></video>

<audio></audio>

<embed></embed>
Although not new, it was not included in previous HTML or XHTML specifications. Used to embed external, typically not HTML, content. For example, use to embed Flash into your web sites.

<canvas></canvas>
Used to render graphs or other visual images on the fly. In other words, graphics can be drawn directly on the page. The canvas element allows you define the canvas area (height and width) to include the graphic on the page.