TIL: Less Known Semantic Elements In HTML

2021-12-15
Today I Learned
HTML
Semantic Web
page formatting
Smashing Podcast
Future Of The Web

Semantic Formatting

Recent episode "Is The Web Dead?" of Smashing Podcast (it's a very good discussion BTW) highlighted some things in modern HTML markup I was unaware of. I can't really position myself as any sort of frontend specialist, although I've been creating web pages of various complexity for as far as my IT career goes, so any extra knowledge around it is still highly relevant.

The podcast touched specifically on details/summary elements, however that got me thinking there must be more, and there definitely is. This list is based on a portion of W3Schools article, plus some extra s I also missed.

The Elements

From that same article,

"Semantic elements = elements with a meaning."

which means a lot of HTML elements fall under this category - form, article, header and so on. Those are better know though, so here I'm listing several examples of lesser known elements in the category, namely:

  • details / summary
  • figure / figcaption
  • dl / dt / dd (although I guess these are a tad bit less semantic)
  • time
  • mark

And so,

Details / Summary

Specifics of the element Specify details that the user can open and close on demand. Closed by default, and can nest any sort of content.

Specifics of the element Specify details that the user can open and close on demand. Closed by default, and can nest any sort of content.

Figure / Figcaption

Specifies the self-contained content (images, illustrations, code) along with the caption:

Specifies the self-contained content (images, illustrations, code) along with the caption
Figure/figcaption code example

Figure/figcaption code example

Description List / Description Term / Description Details

Or dl / dt / dd. Typical usage to implement a list of terms with description (e.g. glossary). An example:

dl: a description list.
The element encloses a list of groups of terms and descriptions.
dt: a term in a description or definition list.
Must be used inside a dl element.
dd: description details.
Provides the description, definition, or value for the preceding term.

dl: a description list.
The element encloses a list of groups of terms and descriptions.
dt: a term in a description or definition list.
Must be used inside a
element.
dd: description details.
Provides the description, definition, or value for the preceding term.

Time

Used for a formatting of time (e.g. ), and also to make it machine-readable for any automated actions related to teh page (e.g. mark in a calendar)

Mark

Used to highlight a portion of text.

Used to highlight a portion of text

What's next

Jumping back to the beginning, one of the important ideas mentioned in the podcast was that going forward we'll likely see more elements and technologies supported by browsers that we're now using libraries for - think native browser support for variable reactivity, modal dialogues, other markup languages and so on.

The future is bright, but also the future is now.