HTML 5

HTML 5 is the future of the content portion (CSS will still handle the presentation) of the web. It will enable developers to do things with content that they have long been unable to do. The following is a primer on what new aspects HTML 5 will enable developers to do.

Clearly Designed websites are coded using HTML 5 and CSS 3 (where applicable).

HTML 5 Demo

The following code block is a simple, bare-bones, easy to understand HTML 5 demo:

    <body>
    <header>TEXT</header>
    <nav>TEXT</nav>
    <article><section>TEXT</section></article>
    <aside>TEXT</aside>
    <footer>TEXT</footer>
    </body>
    

HTML 5 is the long awaited "hyper text markup language" revision that many developers have been waiting for for years. It is still not a W3C recommendation yet however and is still being developed, but this HTML 5 tutorial page will help you get a jump on it before it arrives. It will include functions for adding audio, video, and graphics to your site as well as new features such as form controls, APIs, multimedia, and maybe most importantly semantics. Currently HTML 4 is used and many developers use divs to separate their content semantically and name these divs with ids or classes to lable them. Naming conventions are hardly standard, but generally include a "header", "navigation bar", "content", and "footer". As with the HTML 5 demo you see above, many of these are now elements, so instead of creating divs named as them, you can use their own elements.

Clearly Designed sites are now built using HTML 5 and CSS 3 (where applicable).

HTML 5 Support

For the latest official news on HTML 5 support, visit the W3C: http://www.w3.org/html/ and the Web Hypertext Application Technology Working Group ("WHATWG"): http://www.whatwg.org/

HTML 5 Tutorial

Those familiar with HTML 4 need only to learn how to use the following newly introduced HTML 5 tags:

    <article>
    <aside>
    <audio>
    <canvas>
    <command>
    <datalist>
    <details>
    <embed>
    <figcaption>
    <figure>
    <footer>
    <header>
    <hgroup>
    <keygen>
    <mark>
    <meter>
    <nav>
    <output>
    <progress>
    <rp>
    <rt>
    <ruby>
    <section>
    <source>
    <summary>
    <time>
    <video>
    

The following tags have been deprecated for HTML 5

    <acronym>
    <applet>
    <basefont>
    <big>
    <center>
    <dir>
    <font>
    <frame>
    <frameset>
    <noframes>
    <s>
    <strike>
    <tt>
    <u>
    <xmp>
    

The DOCTYPE is updated for HTML 5

The DOCTYPE in HTML 4.01 was longer because it needed a reference to a DTD because it was based on SGML, but since HTML 5 is not, its DOCTYPE is: (not case sensitive)

    <!DOCTYPE HTML>
    

Upgrading the DOCTYPE from HTML 4 STRICT to HTML 5 is a low risk upgrade to future proof your code because browsers will render non-HTML 5 markup the same.

HTML 5 CSS

Instead of using CSS to style divs according to their ids and classes, we will be able to style the new "header", "nav", "article", "section", "aside", and "footer" elements directly in addition to any id or class specific styling.

HTML 5 Examples

The following code block is a HTML 5 example with possible content in each section.

    <body>
    <header>Page Header</header>
    <nav><a href="#">Page 1</a><a href="#">Page 2</a><a href="#">Page 3</a></nav>
    <article><section>Section 1 of article.</section></article>
    <aside>This text appears in the right column</aside>
    <footer>© ClearlyDesigned.com</footer>
    </body>