How to use the HTML5 elements 4

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:

    html5-elements

You can also download the diagram as OmniGraffle file.

Trackbacks

Use this link to trackback from your own site.

Comments

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”.
    http://www.w3.org/TR/html5/the-section-element.html#the-section-element

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

    Hi Christian,

    thanks for your comment and the link.

    Jens

  3. gid4763 Mon, 14 Jan 2019 09:59:30 CET

    the diagram is cool, and sections are fine but it is recommended… see copy from w3c below
    https://www.w3.org/TR/html5/sections.html#the-section-element (they seem to have changed the location)

    Authors are encouraged to use the element instead of the element when the content is complete, or self-contained, composition.

    The 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 element instead. A general rule is that the element is appropriate only if the element’s contents would be listed explicitly in the document’s outline.

  4. gid4763 Mon, 14 Jan 2019 10:02:57 CET

    below the correctly pasted copy

    Authors are encouraged to use the article element instead of the section element when the content is complete, or self-contained, composition.

    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.

Comments

Information about Data protection