VIEWS: 5 PAGES: 1 POSTED ON: 2/23/2012
HTML5 Element Flowchart Sectioning content elements and friends By @riddle & @boblet www.html5doctor.com A block of ﬂow content Start (not inline phrasing content) Sidebar, comments section, pullquote, Is it required glossary, advertising, Is it a major Does it make * navigation block? to understand the No <aside> footnote etc that’s sense on its own? 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/ﬁgure → 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
"HTML5 Element Flowchart"