DEV Community

Rohit Sharma
Rohit Sharma

Posted on

Highlight text with HTML

#webdev #html #tutorial #beginners

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.