- Starting a New Paragraph
- Adding Author Contact Information
- Creating a Figure
- Specifying Time
- Marking Important and Emphasized Text
- Indicating a Citation or Reference
- Quoting Text
- Highlighting Text
- Explaining Abbreviations
- Defining a Term
- Creating Superscripts and Subscripts
- Noting Edits and Inaccurate Text
- Marking Up Code
- Using Preformatted Text
- Specifying Fine Print
- Creating a Line Break
- Creating Spans
- Other Elements
This chapter is from the book
This chapter is from the book
This chapter is from the book
Highlighting Text
We’ve all used a highlighter pen at some point or another. Maybe it was when studying for an exam or going through a contract. Whatever the case, you used the highlighter to mark key words or phrases that were relevant to a task.
HTML5 replicates this with the new mark element. Think of mark like a semantic version of a highlighter pen. In other words, what’s important is that you’re noting certain words; how they appear is irrelevant. Style its text with CSS as you please (or not at all), but use mark only when it’s pertinent to do so.
No matter when you use mark, it’s to draw the reader’s attention to a particular text segment. Here are some use cases for it:
- To highlight a search term when it appears in a search results page or an article. When people talk about mark, this is the most common context. Suppose you used a site’s search feature to look for “solar panels.” The search results or each resulting article could use <mark>solar panels</mark> to highlight the term throughout the text.
- To call attention to part of a quote that wasn’t highlighted by the author in its original form (
and 
).
Although mark may see its most widespread use in search results, here’s another valid use of it. The phrase “15 minutes” was not highlighted in the instructions on the packaging. Instead, the author of this HTML used mark to call out the phrase as part of the story. Default browser rendering of mark text varies 
.... <body> <p>So, I went back and read the instructions myself to see what I'd done wrong. They said:</p> <blockquote> <p>Remove the tray from the box. Pierce the overwrap several times with a fork and cook on High for<mark>15 minutes</mark>, rotating it half way through.</p> </blockquote> <p>I thought he'd told me <em>fifty</em>. No wonder it exploded in my microwave.</p> </body> </html>
Browsers with native support of the mark element display a yellow background behind the text by default. Older browsers don’t, but you can tell them to do so with a simple rule in your style sheet (see the tips). - To draw attention to a code fragment (
and 
).
This example uses mark to draw attention to a segment of code.
...
<body>
<p>It's bad practice to use a class name that
describes how an element should look, such as the highlighted portion of CSS below:
<pre>
<code>
<mark>.greenText</mark> {
color: green;
}
</code>
</pre>
</body>
</html>
This code noted with mark is called out.
To highlight text
- Type <mark>.
- Type the word or words to which you want to call attention.
- Type </mark>.
TIP
Since mark is new in HTML5, older browsers don’t render a background color by default
and
. You can instruct them to do so by adding mark { background-color: yellow; } to your style sheet.