Scribd
Upload
233 views1 page

HTML Doctor Sectioning Flowchart

This document provides a flowchart to help determine which HTML5 element to use for a given block of content. The flowchart guides the user to ask questions about the content such as whether it can stand alone, is navigation, or has a heading to determine if it should be wrapped in an <article>, <aside>, <nav>, <section>, <figure>, or other semantic element. It also notes that certain elements like <nav> and <article> are used by the HTML5 outlining algorithm to structure the document outline.

Uploaded by

Pathompong Sangkajit
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
233 views1 page

HTML Doctor Sectioning Flowchart

This document provides a flowchart to help determine which HTML5 element to use for a given block of content. The flowchart guides the user to ask questions about the content such as whether it can stand alone, is navigation, or has a heading to determine if it should be wrapped in an <article>, <aside>, <nav>, <section>, <figure>, or other semantic element. It also notes that certain elements like <nav> and <article> are used by the HTML5 outlining algorithm to structure the document outline.

Uploaded by

Pathompong Sangkajit
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

e Amazing Easily Confused HTML5 Element Flowchart of Enlightenment!

By @riddle & @boblet


www.html5doctor.com

Start

A block of ow content (not inline phrasing content) Tangentially related page or content sidebar, comments section, pullquote, glossary, advertising, footnote
html5doctor.com/aside

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


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

html5doctor.com/gure

2010-06-29 v1.3 For more information: www.html5doctor.com/semantics

You might also like