<mark>, <em> and </strong>

By raae for Semantic Advent |

Christmas prep got me, and this weekend, I could not keep up to speed with the calendar. Sorry about that, and I hope you are ready for this triple whammy!

The <mark> HTML element represents text that is marked or highlighted for reference or notation purposes due to the marked passage's relevance in the enclosing context.
MDN Docs

The <em> HTML element marks text that has stress emphasis. The <em> element can be nested, with each level of nesting indicating a greater degree of emphasis.
MDN Docs

The <strong> HTML element indicates that its contents have strong importance, seriousness, or urgency. Browsers typically render the contents in bold type.
MDN Docs

Same, same, but different?!?

They all indicate that the enclosed text is different from its surrounding text.

And they all have default styling:

  • <mark> has a yellow background, like a highlighter
  • <em> is italic, like emphasized text in a book
  • <strong> is bold, like important text in a book

But never shall you use these for styling purposes alone. I'll come find you and exile you from the high seas of the World Wide Web together with most users of any WISIWYG ever made 🤪

<mark> is used to denote content that has a degree of relevance , while <em> is for words that should be read/spoken with emphasis., and <strong> indicates text of importance.

I tried to devise an example that used them all but drew a blank.

Can you? Reply and I'll include it in next years run of the calendar with attribution using <blockquote> and <cite> properly!

Sign up and receive byte-sized emails about Semantic HTML Elements this advent with real-world use cases!