How to use the semantic element mark – HTML5

In today’s post, we will see the importance of the semantic element mark, which originated in HTML5 and has very particular and unique use in web pages.

How to use the semantic element mark?

The mark element serves to highlight a part of our code, basically this.

So when there is a need to highlight a part of the page, we can use the <mark> tag.

But it’s a content relevancy highlight, it’s not for design or importance purposes.

This issue of importance and relevance can be confusing, but understand relevance as: directly aligned to page content.

In other versions of HTML, the same case should be built by an element that doesn’t come with a display block by default.

A good candidate would be <span>, but we would still have to add some CSS for things to work the same way.

We wouldn’t be able to get the semantics in the code, but it would still be the best choice for this situation.

As for recommendations from relevant sites like MDN, we should pay attention to two situations about the use of the mark.

When we want to highlight an excerpt of the page but with only design value, we must use the <span> tag and not <mark>.

And we shouldn’t confuse <strong> with <mark>

• mark: excerpts of special relevance
• strong: excerpts of special importance

That said, let’s get to the practical part of mark.

Using mark in practice:

A great reference for the semantic element mark, for example, would be in search results on a given page.

Since the user has requested that he wants to find that particular word or sentence.

We can wrap it in a <mark> tag, see an example:

<p>We grow <mark>carrots</mark> because we love this vegetable.</p>
<p>The <mark>carrot</mark> can be used both for salads and to make a delicious cake.</p>
<p>Also, one of the biggest benefits of adding <mark>carrots</mark> to your diet is: vitamin A, which is important for vision health.</p>
<p>Are you going to start eating <mark>carrots</mark> too?</p>

See example in browser:

We learned today that the main semantic element serves to add the main content of our page inside it.

We must not repeat throughout the page the same content that is inserted in the tag.

And we must also be careful that the <main> is not inserted inside some tags.

They are: article, aside, footer, header, and nav

This is because the semantics of these tags do not meet the semantics of main, breaking the flow and semantics of the HTML document that will be inserted.

And that’s it for today, until the next post!

Note that the mark highlights the keywords found.

Of course, the addition of CSS would be beneficial to match the layout of the page it’s in.

Note: This can be easily done by accessing the mark tag in the style sheet, as the mark is an HTML element

Another idea of ​​using the mark would be to highlight a part of the quote that interests the user in the middle of a blockquote.

For example, if he is reading a news story about politics, and an interviewee makes a quote that directly involves the main topic.

We can use the semantic element mark to highlight the most notorious part of this sentence

This is in line with the semantic use of this element

Always remembering those semantics in the code and well-written code are important factors taken into account by search engines like Google.

Making your site rank higher than those that do not address these best practices, okay? 😀

Conclusion

We’ve seen that the mark element must be used in parts of the code that have special relevance to the page.

It is important to remember that if the detail on the page is only aesthetic, we should choose the span element instead of the mark.

We shouldn’t confuse strong with mark, strong is for excerpts with importance and mark for excerpts with relevance.

And that’s it for today, until the next post!