Don’t become a PEBKAC.

Sectioning Tags

<main>

This element is subject to some constraints:

• There must not be more than one <main> element in a document,
• It must not be a descendent of an <article>,<aside>, <footer>, <header>, or <nav> element.

<article>

This can contain <section>s and other sectioning elements (except main).

<section>

This can contain <article>'s and other sectioning selements (except main).

<nav>

<aside>

<header>

<footer>

Under-appreciated Tags

<abbr title="expanded term">

Used to expand an abbreviation. Note: As of HTML5, the <acronym> has been deprecated; use <abbr> instead. See below for an example.

<address>

For mailing addresses.

<blockquote>

Often used, incorrectly, to indent a block of text. This should be reserved for an actual quotation.

<caption>

This is used only on tables. There can be only one <caption> tag per table.

<cite>

The cite element represents the cited title of a work; for example, the title of a book mentioned within the main text flow of a document. For example, this definition came from the W3C Org Cheatsheet. You can see that most browsers render the text inside <cite> as italic.

Note: There is also a cite attribute that is intended to hold a URL. It is an attribute for <q>, <blockquote>, <del>, <ins>. For example, 9 out of 10 dentists recommend beer. Browsers do not apply any special formatting, but it is interesting that they do surround <q> text with typographer’s quotes.

<code>

To show computer code. A monospaced font is used.

<dl>

Definition lists. What you are reading now is a <dl> structure. See below for more information.

<figcaption>

This is used with the <figure> tag; typically for photographs, charts, and graphs.

<q>

A short quotation. The text automatically get’s typographer’s quotes wrapped around the text.

<samp>

To show computer output.

<wbr>

Gives a hint to the browser where it may start a new line. For more information, see the example on the White Space page. The opposite of this is the CSS property .nobr { white-space:nowrap; }

<del>, <ins>, and Strike

Used to indicate deleted and new content.
<del> is rendered with a strike line. This is an example.
<ins> is rendered with an underline (a really poor default if you ask me). This is an example.
Note: <strike> has been obsoleted.

Meter and Progress Bar

The <progress> element may seem very similar to the <meter> element — which was also introduced in HTML5 — but it can be seen as a more specific kind of <meter> element that's only used to measure progress of a task. It's worth bearing this in mind when deciding which one to use.

Great article on using and styling the Progress Bar.

Summary and Details

These HTML5 tags are used to show/hide extra information.

<details>
<summary>Show More...</summary>
<p>Really? It’s that easy to make collapsible panels?</p>
<p>The source code for this looks like:</p>
</details>

Definition Lists

The required markup for a definition list begins with an opening <dl> tag. Under that will be pairs of <dt> (terms) and <dd> (definitions) tags. For example:

Apple

Tasty fruit, or nice computer.

Banana

Another tasty fruit, or dangerous slip hazard in cartoons.

<dl>
  <dt>Apple</dt>
    <dd>Tasty fruit, or nice computer.</dd>
  <dt>Banana</dt>
    <dd>Another tasty fruit, or dangerous slip hazard in cartoons.</dd>
</dl>

Definition Element <dfn>

Related, but serving a different purpose is the <dfn> tag. It is used to mark the location of where a term is being defined. For example:

After getting called over to Kay’s computer for the fifth time in the same day, the IT guy determined that her problem was a classic case of PEBKAC. He didn’t have the heart to tell her that PEBKAC stood for “problem exists between keyboard and chair.”

The markup for this example is:

<blockquote>After getting called over to Kay's computer for the fifth time in the same day, the IT guy determined that her problem was a classic case of <abbr title="Problem Exists Between Keyboard And Chair">PEBKAC</abbr>. He didn't have the heart to tell her that <dfn id="PEBKAC" title="PEBKAC"><abbr title="Problem Exists Between Keyboard And Chair">PEBKAC</abbr></dfn> stood for "problem exists between keyboard and chair".</blockquote>

A couple of things to notice:

1. The <abbr> tag gets styled differently from regular <p> text depending on the browser.
2. By using an id attribute in the <dfn> tag, you can link to it. The first line in this document does this.
3. As a bonus, this example uses the <abbr> tag. It is not necessary for the <dfn> element, but now you know how to use it. After hovering your mouse over an <abbr> term you’ll see the title displayed after a short delay (in most browsers).

Continuing with our fruit list from above, it could more accurately be constructed as:

<dl id="fruitList">
  <dt><dfn id="Apple">Apple</dfn></dt>
    <dd>Tasty fruit, or nice computer.</dd>
  <dt><dfn id="Banana">Banana</dfn></dt>
    <dd>Another tasty fruit, or dangerous slip hazard in cartoons.</dd>
</dl>

I recommend this style of mark-up when you plan to link to these definitions. Otherwise, it may be overkill.