This post covers some less-known HTML semantic elements after reading Advanced text formatting on MDN, such as
<time> and so on.
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:
The browser default styles will display description lists with the descriptions indented somewhat from the terms.
HTML also has features available for marking up quotations using
<q>; which element you use depends on whether you are marking up a block or inline quotation.
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.
Browser default styling will render this as an indented paragraph, as an indicator that it is a quote.
<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 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:
Citations are styled in italic font by default.
<abbr> is used to wrap around an abbreviation or acronym, an example:
HTML has an element for marking up contact details —
<address>. This simply wraps around your contact details. This is a block-level element.
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
<sub> elements handle this job. For example:
<p>My birthday is on the 25<sup>th</sup> of May 2001.</p>
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.
HTML also provides the
<time> element for marking up times and dates in a machine-readable format. For example:
<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
- 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