TIL: Less Known Semantic Elements In HTML
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.
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)
Details / Summary
Specifics of the elementSpecify details that the user can open and close on demand. Closed by default, and can nest any sort of content.
<details style="border: 1px solid; padding: 0.3em; border-radius: 5px;"> <summary>Specifics of the element</summary> Specify details that the user can open and close on demand. Closed by default, and can nest any sort of content. </details>
Figure / Figcaption
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> <dt> dl: a description list. <dd> The element encloses a list of groups of terms and descriptions. </dd> </dt> <dt> dt: a term in a description or definition list. <dd> Must be used inside a <dl> element. </dd> </dt> <dt> dd: description details. <dd> Provides the description, definition, or value for the preceding term. </dd> </dt> </dl>
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)
<time datetime="2021-12-15 12:22:00">12:22</time>
Used to highlight a portion of text.
Used to <mark>highlight</mark> a portion of text
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.