Browsed by
Category: HTML5

The HTML5 element

The HTML5 element

Most web applications have search functionality, where some need to search through texts. A common practice, is to highlight the keyword in the search results by marking it yellow.

This is a text where I need to <span class="mark">mark</span>something.

In the CSS we specify a highlight background color like:

.mark {
    background-color: yellow;

Now HTML5 has native highlighting using the <mark> element. Which is supported in all current browsers, and Internet Explorer from 9.0. With the <mark> element we just need to surround the part we want to mark with <mark> tags like:

This is a text where I need to <mark>mark</mark> something.

Which results in:

This is a text where I need to mark something.