💡 Today I Learned

Semantic HTML: Underused text-level elements

Here are some elements I don't use/consider enough.

These are just basic textual elements, not major structural pieces. (Ok, figure is structural, but not as major as section etc..)

<abbr> - Abbreviation

<cite> - Citations

<dfn> - Definition

<dl>, <dt>, <dd> - Definition list, term and details

<figure> - Figure with Captions

Example:

<figure>
<img src="mr_t.jpg" alt="Mr T.">
<figcaption>This is Mr. T</figcaption>
</figure>
Mr T.
This is Mr. T

It took me quite a while to find CSS that would do what I wanted for the figure/img/figcaption combo above.

Given that I was already centering my images, with something like this:

img {
	max-width: calc(100% - 30px);
	margin: 15px auto;
	display: block;
}

I wanted to have the figure provide a border, be centered, and not be full-width, and for the figcaption to be centered under the img.

figure {
	margin: 0 auto;
	border: 1px solid var(--table-border);
	width: max-content;
}

figcaption {
	margin: 15px auto;
	text-align: center;
}

<mark> - Mark

Rather than <span class='hilite'>highlighted text</span> - use <mark>highlighted text</mark>

Let me mark a few choice phrases in this fascinating sentence.

Indicating <mark> in markdig markdown

According to markdig test on 'emphasis' we can use ==equals== to indicate the text to mark up.

<q> - Inline Quotation

The inline complement to blockquote, for times when a quotation does not receive its own block.

<p>Mr. T says <q cite='https://en.wikipedia.org/wiki/I_Pity_the_Fool_(TV_series)'>I pity the fool</q></p>

Mr. T says I pity the fool

There are probably quotes around that, provided by the user-agent stylesheet, via a q::before { content: open-quote } (and ... close-quote). Some CSS-Tricks info about that

tip The quote element should be used for literal quotes, not for decorative purposes such as "sarcasm", "air-quotes" and other rhetorical instances. (i.e. use it to for literal quotes, but not for "literal" quotes.)

(There is no <sarcasm> element. Or rather: <sarcasm>There is a sarcasm element<sarcasm>. w3c disccusion here)

<time> - Time element

Example:

<time datetime="2021-02-22">22 February 2022</time>
<time datetime="2021-02-22T19:30+01:00">7.30pm, 22 February 2021 is 8.30pm in France</time>

Sources

At developer.mozilla.org:

See also