DEV Community

Rohit Sharma
Rohit Sharma

Posted on

Highlight text with HTML

Hello Everyone
Today, we'll be discussing about how we can highlight text using html only. You can check it out this video for reference.

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

Let's consider a example

<body>
  <p><mark>Important</mark> things to notice</p>
</body>
Enter fullscreen mode Exit fullscreen mode

The default highlight color is Yellow but we can change it by using CSS.

mark{
  background-color:magenta;
}
Enter fullscreen mode Exit fullscreen mode

Note:
The <mark> tags can be useful but only for content that you control. If you want to let users make their own highlights, using <mark> can potentially break the markup.

Do you know about these html tags <sub> and <sup>. For this check the following video.

You can support my work

Top comments (1)

Collapse
 
gorango profile image
Goran Spasojevic

The <mark> tags can be useful but only for content that you control. If you want to let users make their own highlights, using <mark> can potentially break the markup.

Consider the following markup:

<p>
  The <em>lazy dog</em> jumped <b>over the sleeping fox</b>.
</p>
Enter fullscreen mode Exit fullscreen mode

How would you highlight:

"dog jumped over"

You would need three separate <mark> elements to wrap the content. And to change or remove that highlight would require some heavy lifting to preserve the structure of the markup.

While the <mark> tag can be useful - it is very limited for any interactive UIs.