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

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

  • Print
  • + Share This
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 (red_circle-a.jpg and red_circle-b.jpg).

    red_circle-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. Default browser rendering of mark text varies gray_circle-b.jpg.

    ...
    
    <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>
    04_10.jpg

    red_circle-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_circle-c.jpg and red_circle-d.jpg).

red_circle-c.jpg 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>
04_11.jpg

red_circle-d.jpg This 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