Scribd
Upload
107 views1 page

h5d Sectioning Flowchart

This document provides a flowchart for selecting the appropriate HTML5 sectioning element or other element for a block of content. It evaluates whether the content is navigation, an article, figure, or another element. If it is a major section, the choices are <nav>, <article>, or <section>. If not, it may be <aside> if tangential, <figure> if images, or <div> if just for styling. The document aims to help select semantics-rich elements to define the document outline.

Uploaded by

Jon Twycross
Copyright
© Attribution Non-Commercial (BY-NC)
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
107 views1 page

h5d Sectioning Flowchart

This document provides a flowchart for selecting the appropriate HTML5 sectioning element or other element for a block of content. It evaluates whether the content is navigation, an article, figure, or another element. If it is a major section, the choices are <nav>, <article>, or <section>. If not, it may be <aside> if tangential, <figure> if images, or <div> if just for styling. The document aims to help select semantics-rich elements to define the document outline.

Uploaded by

Jon Twycross
Copyright
© Attribution Non-Commercial (BY-NC)
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 ow content (not inline phrasing content) Sidebar, comments section, pullquote, glossary, advertising, footnote etc thats tangentially related to the page or content
html5doctor.com/aside

Start

Is it a major navigation block?

Does it make sense on its own?

Is it required to understand the current content?

No

* <aside>

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?

No

<div>

* <nav>
Site or in-page navigation (anything youd use a skip to nav link for)
html5doctor.com/nav

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

Flow content with no additional semantics, e.g. for CSS hooks


Yes Yes Yes
html5doctor.com/div

<figure>
One or more images, graphics, code samples etc, plus optional <figcaption>

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

Appropriate element Probably <p>, but possibly <address>, <blockquote>, <pre>


html5doctor.com/semantics

* Sectioning content element


These four elements (and their headings) are used by HTML5s outlining algorithm to make the documents outline html5doctor.com/outline

html5doctor.com/gure

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

You might also like