Other kinda useful semantic elements

Below are elements often complicated to add if you use a CMS or a markup language like Markdown as they don't give syntactic shortcuts for most of them, so you have to write them by hand.

Favor these semantic elements when working for very specific projects where text cannot always convey all the meaning by itself. If you have a design system, incorporating them to specific components could probably increase their usage.

<abbr>
Stands for abbreviation. Can be used for currencies for example.
<code>
For code, obviously, often best used with <pre>.
<time>
For time values of course.
<mark>
To highlight some parts of your text.
<s>
Strikes the text to indicate it's no longer relevant. Don't confuse it with strike who just strikes the text for... design?
<del> & <ins>
If you have an edit to make to a text and want to keep trace of the change <del> and <ins> are a good pick!

Next: Some interactive elements that can be useful


Initially published: November 23rd, 2020
Generated: November 12th, 2021