Docstoc

e Amazing Easily Confused HTML5 Element Flowchart Enlightenment_ of

Document Sample
e Amazing Easily Confused HTML5 Element Flowchart Enlightenment_ of Powered By Docstoc
					                                          e Amazing


                                                                        Easily Confused HTML5 Element Flowchart
                                                                     of Enlightenment!           By @riddle & @boblet
                                                                                                                      www.html5doctor.com
                         A block of flow content
          Start          (not inline phrasing content)


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

           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 nav”             on an article, sidebar
       link for)                    widget etc, with a
                                        heading…
 → html5doctor.com/nav
                                                                                                            *                       Appropriate
                                  → html5doctor.com/article              <figure>                   <section>
                                                                                                                                     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
ese four elements (and their headings) are used by                                                                                                                      2010-06-29 v1.3
HTML5’s outlining algorithm to make the document’s outline                                                                                                          For more information:
→ html5doctor.com/outline                                                                                                                                  www.html5doctor.com/semantics

				
DOCUMENT INFO
Shared By:
Tags: HTML5
Stats:
views:70
posted:7/31/2010
language:English
pages:1
Description: The predecessor of the draft HTML5 called Web Applications 1.0. In 2004 was WHATWG proposed by W3C in 2007 to accept and set up a new HTML working group. In the January 22, 2008, the first draft of a formal announcement is expected in September 2010 formally recommended to the public. WHATWG said the specification is being done, still many years of effort.