HTML5 Element Flowchart

Document Sample
HTML5 Element Flowchart Powered By Docstoc
					                                                              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?
                                                                     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/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

				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:5
posted:2/23/2012
language:
pages:1