Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > HTML/XHTML

  • Print
  • + Share This
  • 💬 Discuss

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.

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 (red-a.jpg and red-b.jpg). This is akin to the real-world task of highlighting a textbook or contract.

    red-a.jpg 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.

    116figb.jpg

    Click to view larger image

    red-b.jpg 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 (red-c.jpg and red-d.jpg).

red-c.jpg This example uses mark to draw attention to a code segment.

117figd.jpg

red-d.jpg The code noted with mark is called out.

To highlight text

  1. Type <mark>.
  2. Type the word or words to which you want to call attention.
  3. Type </mark>.
  • + Share This
  • 🔖 Save To Your Account

Discussions

comments powered by Disqus