Quick Tip - 08: Highlight Search Results With the HTML5 Mark Tag

February 28, 2014 | 0 Minute Read

The HTML5 mark tag was created in order to highlight text within a document that is relative to another context. This is perfect for highlighting the search term in a list of results.

For Example…

Google currently does this using an em tag:

Google search results using em tag

When it comes to semantics, the HTML5 mark tag is a better way to handle this sort of thing going forward.

Demo

<mark>HTML5</mark> is a markup language used for structuring 
and presenting content for the World Wide Web and a core 
technology of the Internet. It is the fifth revision of...
HTML5 is a markup language used for structuring and presenting content for the World Wide Web and a core technology of the Internet. It is the fifth revision of …

Sources