Highlight text with HTML
source link: https://dev.to/devrohit0/highlight-text-with-html-apo
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
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
Do you know about these html tags <sub> and <sup>. For this check the following video.
Discussion (1)
Collapse
Expand
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.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK