HTML and CSS Reference
In-Depth Information
HTML5 Element Flowchart
Sectioning content elements and friends
By @riddle & @boblet
A block of flow content
(not inline phrasing content)
Sidebar, comments
section, pullquote,
glossary, advertising,
footnote etc that's
tangentially related to
the page or content…
Is it required
to understand the
current content?
Does it make
sense on its own?
Is it a major
navigation block?
e.g. in a
feed reader
Could you move
it to an appendix?
Is it logical
to add a heading?
Does it have
any semantics?
<nav> *
<article> *
Flow content with no
additional semantics,
e.g. for CSS hooks…
Site or in-page
navigation (anything
you'd use a ''skip to
nav'' link for )
News article, weblog or
forum post, comment
on an article, sidebar
widget etc, with a
One or more images,
graphics, code samples
etc, plus optional
A section of the page,
or chapter of an
<article>, with a
Probably <p>, but
possibly <address>,
<blockquote>, <pre>…
* Sectioning content element
These four elements (and their headings) are used by
HTML5's outlining algorithm to make the document's outline
2011-07-22 v1.5
For more information:
Figure 3-3. The HTML5 Doctor's HTML5 Element Chooser Flowchart
HTML5 already has a plethora of new elements, and by the launch of the final spec, to be decided at a future time,
there could even be more. More of the new and updated elements will be covered throughout the topic.
For the latest, most up-to-date information on the htML5 element index, visit .
For web creators, the new semantic markup in HTML5 is really invaluable when creating web content that is well
formed and structured and search engine friendly. It improves overall search engine optimization (SEO), as a search
giant like Google can parse the page's content much more efficiently, separating the page's content from its structure.
It also helps developers keep to a standard naming practice when developing across properties, as tag names will now
be the same moving forward. For instance there'll now be header and footer tags, just like head and body tags.
htML5-compliant browsers do not need quotes around attributes. For example, <div id="ad"></div> can
now be written <div id=ad></div> .
Search WWH ::

Custom Search