June 1, 2011

How to use the HTML5 elements

5  comments

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.


Tags

article, aside, elements, footer, header, html5, nav, section


You may also like

Leave a Reply

Your email address will not be published. Required fields are marked

Information about Data protection

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  1. 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. 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.

  3. 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.

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}