HTML5

Links

• developers.whatwg.org
• dev.w3.org/html5/markup/

<section>

generic document or application section (not a generic container element)

<article>

a composition that forms an independent part of a document, page, application, or site. This could be a forum post, a magazine or newspaper article, a Web log entry, a user-submitted comment, an interactive widget, or any other independent item of content

<footer>

typically contains information about its section such as who wrote it

<header> ^doctor

typically contains a group of introductory or navigational aids

Figures – for Images, Code, … ^{html5doctor on it}

<figure>
  <img src="" alt="" />
  <figcaption></figcaption>
</figure>

<aside> ^{html5doctor on it}

• If the content is simply related and not essential, use <aside>.
• If the content is essential but its position in the flow of content isn’t important, use <figure>.
• Having said that, if its position relates to previous and subsequent content, use a more appropriate element – e.g., a <div>, a plain old <img>, a <blockquote>, or possibly even <canvas>, depending on its content.

<figure> ^spec

The figure element represents a unit of content, optionally with a caption, that is self-contained, that is typically referenced as a single unit from the main flow of the document, and that can be moved away from the main flow of the document without affecting the document’s meaning.

<figcaption> ^spec

<aside> ^{html5doctor on it}

<article>…
  <aside>
    <!-- related to article -->
    Glossary …
  </aside>
</article>
<aside>
  <!-- not in article, related to page but not as much to the article as aside above -->
</aside>

<abbr>

<abbr title="Laughing Out Loud">LOL</abbr>
<abbr title="Internet slogan for saying something is funny.">LOL</abbr>

Quoting, Citing, Code

<blockquote>
  This is a blockquote.
  The tag <code>&amp;lt;blockquote&amp;gt; is used to mark it.
</blockquote>

The title of this section is named and can be quoted Quoting, Citing, Code

In the Book My Book Title bla bla …

<cite> explicitly for work titles only

<address> represents the contact information for its nearest article or body element ancestor

The i, b, em, & strong elements ^{htmldoc on it}

<i>

for text in an “alternate voice,” such as foreign words (use lang-attribute, technical terms, typographically italicized text (W3C:Markup, WHATWG)

<b>

now for “stylistically offset” text, such as keywords and typographically emboldened text (W3C:Markup, WHATWG)

<em>

for emphasized text, stress emphasis (i.e., something you’d pronounce differently) (W3C:Markup, WHATWG)

<strong>

for strong importance (semantic importance) (stronger emphasis or importance is now indicated by nesting) (W3C:Markup, WHATWG)

<mark>

for highlighted or marked text

Common notes

Only use <i> when nothing more suitable is available – e.g., <em> for text with stress emphasis, <strong> for text with semantic importance, <cite> for titles in a citation or bibliography, <dfn> for defining a word, and <var> for mathematical variables. Use CSS instead for italicizing blocks of text, such as asides, verse, and (as used here for W3C specification quote) block quotations. Remember to use the class attribute to identify why the element is being used, making it easy to restyle a particular use.

<b> for text offset without higher importance. typographical differentiation (like bold text)

<small>

side comments and small print (W3C:Markup, WHATWG, doctor), such as legal disclaimers and caveats, use only on inline content

<details open="open">
  <legend>Terms & Conditions</legend>
  <p>You agree to xyz, etc.</p>
</details>