UX Design and Development course

HTML elements that matter

With HTML5 comes a great new series of semantically rich elements that when used will add actual content structure to the document.

Mark

The mark element is permitted in contexts other than search results, but I’m damned if I can think of a single such example.

<ol>
  <li><a href="http://clearleft.com/">
  Riding the UX <mark>unicorn</mark> across
  the rainbow of the web.
  </a></li>
</ol>

Time

The time element can be used for dates, times, or combinations of both:

<time datetime="17:00">5pm</time>
<time datetime="2010-04-07">April 7th</time>
<time datetime="2010-04-07T17:00">5pm on April 7th</time>

Meter

The meter element can be used to mark up measurements, provided that those measurements are part of a scale with minimum and maximum values.

<meter>7 out of 10 stars</meter>
<meter max="10">7 stars</meter>
<meter min="0" max="105" low="5" high="65" optimum="45" value="47">
  The car is moving at a decent average mile per hour.
</meter>

Progress

The progress element is most useful when it used in combination with DOM Scripting. You can use JavaScript to dynamically update the value, allowing the browser to communicate that change to the user—very handy for Ajax file uploads.

You are <progress>50%</progress> complete.

<progress min="0" max="100" value="50">
  Hold tight, your getting there.
</progress>

Figure

<figure> represents a figure illustrated as part of the document. <figcaption> Represents the legend of a figure.

<figure>
  <img src="/mdn-logo-sm.png" alt="awesome picture">
  <figcaption>Caption for awesome picture</figcaption>
</figure>

Represents an unordered list of menu choices, or commands

The <menu> and <ul> both represent an unordered list of items. They differ in the way that the <ul> element only contains items to display while the <menu> element contains interactive items, to act on.

<menu type="toolbar">
  <li>
    <menu label="File">
      <button type="button" onclick="new()">New...</button>
      <button type="button" onclick="save()">Save...</button>
    </menu>
  </li>
  <li>
    <menu label="Edit">
      <button type="button" onclick="cut()">Cut...</button>
      <button type="button" onclick="copy()">Copy...</button>
      <button type="button" onclick="paste()">Paste...</button>
    </menu>
  </li>
</menu>

Note: This element was deprecated in HTML4, but reintroduced in HTML5.

Hiding text

Element, and contents, are not yet, or no longer relevant.

<div hidden> content not to be shown to humans.</div>

Using ARIA roles, this is also semantically correct and will also be hidden from assistive technologies.

<div aria-hidden="true"> content not to be shown to humans.</div>

Note: Neither of these techniques hide text from view. This is only semantic, not presentational. Use CSS for the presentation.

Abbreviation

Use the title attribute to define the full description of the abbreviation

<p>Tony Blair is the prime minister of the
  <abbr title="United Kingdom">UK</abbr>
</p>

B

Stylistically offset without importance.

<b>...</b>

Strong

Strong emphasis.

<strong>...</strong>

I

Alternative voice or tone.

<i>...</i>

Em

Stressed emphasis.

<em>...</em>

U

An unarticulated annotation.

<u>...</u>

Ins

Text added to the document.

<ins cite="#" datetime="2011-08-24">...</ins>

Cite

Specifically a reference to a title of work.

<p>
  <cite>
    <a href="#">Steve Jobs</a>
  </cite> by Walter Isaacson is truly inspirational.
</p>

Q

Short, inline quotation.

<p>
  <a href="#">Steve Jobs</a> once said,
  <q cite="#">Stay hungry, stay foolish.</q>
</p>

CSS Language support for the <q> element

English

“English quote with a ‘nested’ quote.”

q:lang(en) {
  quotes: "\201C" "\201D" "\2018" "\2019";
}
French

«French quote with a «nested» quote.»

q:lang(fr) {
  quotes: "\AB" "\BB";
}

Blockquote

Longer, extended quotation.

<blockquote cite="#">
  <p>Design is a funny word...</p>
  <p>
    <a href="#">Steve Jobs</a> in
    <cite>
      <a href="#">Fortune Magazine</a>
    </cite>
  </p>
</blockquote>

S

No longer accurate or relevant.

<s>...</s>

Del

Text deleted from the document.

<del cite="#" datetime="2011-08-24">...</del>