Scribd
Upload
182 views1 page

html5 Sectioning Flowchart PDF

The document is an HTML5 element flowchart that helps determine which HTML5 element to use based on a content's semantics and structure. It shows that sectioning elements like <nav> and <article> should be used for major navigational blocks and standalone articles or blog posts. The <figure> element is for images or graphics with captions, <section> is for dividing a page or article into sections, and other semantic elements like <p> and <blockquote> can be used where appropriate. The flowchart aims to help select the most accurate and semantic HTML5 element for different types of web content.

Uploaded by

Stevelk
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
182 views1 page

html5 Sectioning Flowchart PDF

The document is an HTML5 element flowchart that helps determine which HTML5 element to use based on a content's semantics and structure. It shows that sectioning elements like <nav> and <article> should be used for major navigational blocks and standalone articles or blog posts. The <figure> element is for images or graphics with captions, <section> is for dividing a page or article into sections, and other semantic elements like <p> and <blockquote> can be used where appropriate. The flowchart aims to help select the most accurate and semantic HTML5 element for different types of web content.

Uploaded by

Stevelk
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 1

HTML5 Element Flowchart

Sectioning content elements and friends


By @riddle & @boblet
www.html5doctor.com

A block of flow content


Start (not inline phrasing content)

Sidebar, comments
section, pullquote,
Is it required glossary, advertising,
Is it a major Does it make
navigation block? sense on its own?
to understand the No <aside>* footnote etc that’s
current content? tangentially related to
e.g. in a the page or content…
feed reader → html5doctor.com/aside

Yes Yes
Could you move Is it logical Does it have
it to an appendix? to add a heading? any semantics? No <div>

<nav>* <article>* Flow content with no


additional semantics,
Site or in-page News article, weblog or e.g. for CSS hooks…
navigation (anything forum post, comment Yes Yes → html5doctor.com/div
Yes
you’d use a “skip to on an article, sidebar
nav” link for) widget etc, with a
heading…
→ html5doctor.com/nav
→ html5doctor.com/article <figure> <section>* Appropriate
element
One or more images, A section of the page, Probably <p>, but
graphics, code samples or chapter of an possibly <address>,
etc, plus optional <article>, with a <blockquote>, <pre>…
<figcaption>… heading… → html5doctor.com/semantics
→ html5doctor.com/figure → html5doctor.com/section
* Sectioning content element
These four elements (and their headings) are used by 2011-07-22 v1.5
HTML5’s outlining algorithm to make the document’s outline For more information:
→ html5doctor.com/outline www.html5doctor.com/semantics

You might also like