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

<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

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

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>

Time

Used for a formatting of time (e.g. 12:22), 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>

Mark

Used to highlight a portion of text.

Used to <mark>highlight</mark> 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.