Use-Cases of this Tutorial
- Know how to highlight special text in a HTML page in a semantic way.
- Know about the HTML <mark> element.
In webpages, specially if an article, we generally like to highlight text that are of special importance in the context. This is different from making the text bold — but bold would mean that we are trying to emphasize the text. Sometimes we just need to highlight the text and not emphasize it.
Highlighting text can obviously be done using a <span> with specific CSS applied. But this is not the semantic way of doing this. Machines and scripts will not understand that the CSS highlighted text is marked for special importance.
To mark text of special importance, the HTML <mark> element can be used.
<mark></mark><p>Only <mark>He</mark>, and <mark>He</mark> alone is the master of the Universe.</p>The <mark> tag can be read by machines, scripts, screen readers etc and they can conclude that text within the <mark> tag is special. The marked text can be used for their automated learning purposes, or they may choose to present this information in a different way to the user.
Demo
HTML :
Lorem ipsum dolor sit amet, consectetur <mark>adipiscing</mark> elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
<mark>exercitation</mark> ullamco laboris nisi ut aliquip ex ea <mark>commodo</mark> consequat.