HTML5 Overview

Nov 09, 2011
Santiago Valle

HTML5

HTML5 is close to be the new web standard. One advantage of HTML5 is that it doesn't need third party plug-ins like flash to play a video, also it reduces development costs and easily  recover from errors.

Some of the new features are audio,  video, canvas, client-side data storage. It also introduces  a wide range of  form types, controls, validation,  APIs, multimedia, structure  and semantics elements.

STRUCTURE


HTML5 introduces a list of new elements to build a page structure. Old structures will be replaced with new elements, such as headers, footers, sections, articles, etc. The idea is to get rid of unnecessary div elements.


As you can see old div layout will be replaced with new tags, the final result will be a more organized and cleaner code.


The new markup will look like the following:

<body>

    <header>...</header>

    <nav>...</nav>

    <article>

      <section>

        ...

      </section>

    </article>

  <aside>...</aside>

  <footer>...</footer>

</body>


HTML5 NEW ELEMENTS


The header tag represents the header of a section.

<header>

  <h1>HTML5</h1>

  <p class="byline">Author</p>

</header>

<header>

  <h1>Blog1</h1>

  <h2>Text.</h2>

</header>

The footer tag represents the footer section of the page.

<footer>© 20011 footer.</footer>

The nav tag represents a section for navigation links.

<nav>

  <ul>

    <li><a href="/">Home</a></li>

    <li><a href="/products">Products</a></li>

    <li><a href="/services">Services</a></li>

    <li><a href="/about">About</a></li>

  </ul>

</nav>

The aside tag is mostly used for sidebars.

<aside>

  <h1>Archives</h1>

  <ul>

    <li><a href="/2011/09/">September 2011</a></li>

    <li><a href="/2011/08/">August 2011</a></li>

    <li><a href="/2011/07/">July 2011</a></li>

  </ul>

</aside>

The section tag is used to describe a section of a document or application.

<section>

  <h1>Tittle 1</h1>

  <p>paragraph content

     ...</p>

</section>

The article tag is used for content like news or blog articles.

<article id="comments">

  <header>

    <h4><a href="#comments" rel="bookmark">Comment</a>

        by <a href="http://oshyn.com/">Author Name</a></h4>

    <p><time datetime="20011-08-29T13:00Z">August 111th, 2011 at 13:00</time>

  </header>

  <p>Article content</p>

</article>