Less Known HTML Semantic Elements

This post covers some less-known HTML semantic elements after reading Advanced text formatting on MDN, such as <dl>, <blockquote>, <q>, <cite>, <address>, <time> and so on.

Description Lists

The purpose of these lists is to mark up a set of items and their associated descriptions, such as terms and definitions, or questions and answers.

Description lists use <dl> as the wrapper; in addition each term is wrapped in a <dt> (description term) element, and each description is wrapped in a <dd> (description definition) element. A example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<dl>
<dt>Apple</dt>
<dd>
An American multinational technology company that sells expensive products.
</dd>
<dt>Samsung</dt>
<dd>
A South Korean multinational conglomerate that sells good products.
</dd>
<dt>Smartisan</dt>
<dd>
A Chinese multinational technology company that designs excellent products.
</dd>
</dl>

The browser default styles will display description lists with the descriptions indented somewhat from the terms.

Quotations

HTML also has features available for marking up quotations using <blockquotes> or <q>; which element you use depends on whether you are marking up a block or inline quotation.

Blockquotes

If a section of block level content (be it a paragraph, multiple paragraphs, a list, etc.) is quoted from somewhere else, you should wrap it inside a <blockquote> element to signify this, and include a URL pointing to the source of the quote inside a cite attribute.

1
2
3
<blockquote cite="https://sichenwang.com">
<p>Sichen wang is a student.</p>
</blockquote>

Browser default styling will render this as an indented paragraph, as an indicator that it is a quote.

Inline quotations

Use the <q> element.

1
<p>Sichen Wang is a <q cite="https://sichenwang.com">CS Student</q></p>

Browser default styling will render this as normal text put in quotes to indicate a quotation.

cite

The content of the cite attribute sounds useful, but unfortunately browsers, screenreaders, etc. don’t really do much with it. There is no way to get the browser to display the contents of cite, without writing your own solution using JavaScript or CSS.

cite above is an attribute, but there is also a element called <cite> meant to contain the title of the resource being quoted, you can use it like:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<p>
According to the
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote"
><cite>MDN blockquote page</cite></a
>:
</p>

<blockquote
cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote"
>
<p>
The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or
<em>HTML Block Quotation Element</em>) indicates that the enclosed text is
an extended quotation.
</p>
</blockquote>

<p>
The quote element — <code>&lt;q&gt;</code> — is
<q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q"
>intended for short quotations that don't require paragraph breaks.</q
>
--
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">
<cite>MDN q page</cite></a
>.
</p>

Citations are styled in italic font by default.

Abbreviations

<abbr> is used to wrap around an abbreviation or acronym, an example:

1
2
3
4
<p>
We use <abbr title="Hypertext Markup Language">HTML</abbr> to structure our
web documents.
</p>

Contact Details

HTML has an element for marking up contact details — <address>. This simply wraps around your contact details. This is a block-level element.

Superscript and Subscript

You will occasionally need to use superscript and subscript when marking up items like dates, chemical formulae, and mathematical equations so they have the correct meaning. The <sup> and <sub> elements handle this job. For example:

1
2
3
4
5
6
<p>My birthday is on the 25<sup>th</sup> of May 2001.</p>
<p>
Caffeine's chemical formula is
C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.
</p>
<p>If x<sup>2</sup> is 9, x must equal 3 or -3.</p>

Representing Code

There are a number of elements available for marking up code using HTML:

  • <code>: For marking up generic pieces of computer code.
  • <pre>: For retaining whitespace (generally code blocks) — if you use indentation or excess whitespace inside your text, browsers will ignore it and you will not see it on your rendered page. If you wrap the text in <pre></pre> tags however, your whitespace will be rendered identically to how you see it in your text editor.
  • <var>: For specifically marking up variable names.
  • <kbd>: For marking up keyboard (and other types of) input entered into the computer.
  • <samp>: For marking up the output of a computer program.

Times and Dates

HTML also provides the <time> element for marking up times and dates in a machine-readable format. For example:

1
<time datetime="2020-03-31">31 March 2020</time>

Why is this useful? Well, there are many different ways that humans write down dates. The above date could be written as:

  • 2016 年 1 月 20 日
  • 20 January 2016
  • 20th January 2016
  • Jan 20 2016
  • 20/01/16
  • 01/20/16
  • The 20th of next month

But these different forms cannot be easily recognised by computers — let’s say you wanna build a schedule app, what if you wanted to automatically grab the dates of all events in a page and insert them into a calendar? The <time> element allows you to attach an unambiguous, machine-readable time/date for this purpose with datetime attribute.