Advertising with Web Standards - HTML5 Advertising - page 40

HTML5 Element Flowchart
Sectioning content elements and friends

By @riddle & @boblet
www.html5doctor.com

A block of flow content
(not inline phrasing content)

Start

Sidebar, comments
section, pullquote,
glossary, advertising,
footnote etc that's
tangentially related to
the page or content…
html5doctor.com/aside

Is it required
to understand the
current content?

Does it make
sense on its own?

Is it a major
navigation block?

*

<aside>

No

e.g. in a
feed reader

Yes Yes

Could you move
it to an appendix?

Is it logical
to add a heading?

Does it have
any semantics?

<div>

No

<nav> *

<article> *

Flow content with no
additional semantics,
e.g. for CSS hooks…
html5doctor.com/div

Site or in-page
navigation (anything
you'd use a ''skip to
nav'' link for )
html5doctor.com/nav

News article, weblog or
forum post, comment
on an article, sidebar
widget etc, with a
heading…
html5doctor.com/article

Yes Yes

Yes

Appropriate
element

*

<figure> <section>

One or more images,
graphics, code samples
etc, plus optional
<figcaption>…
html5doctor.com/figure

A section of the page,
or chapter of an
<article>, with a
heading…
html5doctor.com/section

Probably <p>, but
possibly <address>,
<blockquote>, <pre>…
html5doctor.com/semantics

* Sectioning content element
These four elements (and their headings) are used by
HTML5's outlining algorithm to make the document's outline
html5doctor.com/outline

2011-07-22 v1.5
For more information:
www.html5doctor.com/semantics

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
html5doctor.com/element-index .

Note

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

Note