How to use the HTML5 elements 2

Posted by Jens J├Ąger on June 01, 2011

These are the important new HTML5 elements:

  • <header>
  • <footer>
  • <nav>
  • <section>
  • <article>
  • <aside>
  • This diagram shows how to use them:


You can also download the diagram as OmniGraffle file.


Use this link to trackback from your own site.


Leave a response

  1. JChristian Villafuerte Thu, 18 Oct 2012 10:12:14 CET

    Almost perfect diagram … thanks for sharing :)

    It’s almost perfect because I think the HTML is misconceived in the diagram.

    I pass this text W3C:

    “The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.

    Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site’s home page could be split into sections for an introduction, news items, and contact information.

    Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the element.

    The section element is not a generic container element. When an element is needed only for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element’s contents would be listed explicitly in the document’s outline”.

  2. Jens Thu, 18 Oct 2012 20:56:18 CET

    Hi Christian,

    thanks for your comment and the link.



Information about Data protection