- Sep 5, 2013
- Adding a Paragraph
- Specifying Fine Print
- Marking Important and Emphasized Text
- Creating a Figure
- Indicating a Citation or Reference
- Quoting Text
- Specifying Time
- Explaining Abbreviations
- Defining a Term
- Creating Superscripts and Subscripts
- Adding Author Contact Information
- Noting Edits and Inaccurate Text
- Marking Up Code
- Using Preformatted Text
- Highlighting Text
- Creating a Line Break
- Creating Spans
- Other Elements
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.
HTML5 replicates this with the new mark element. Think of mark as a semantic version of a highlighter pen. In other words, what’s important is that you’re noting certain words; how they appear isn’t important. 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 ). This is akin to the real-world task of highlighting a textbook or contract.
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.
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 code segment.
The 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>.