HTML5 Multimedia Development Cookbook

Highlighting text using the mark element

“The <mark> element represents a run of text in one document marked or
highlighted for reference purposes, due to its relevance in another context. When
used in a quotation or other block of text referred to from the prose, it indicates
a highlight that was not originally present but which has been added to bring
the reader’s attention to a part of the text that might not have been considered
important by the original author when the block was originally written, but which
is now under previously unexpected scrutiny. When used in the main prose of a
document, it indicates a part of the document that has been highlighted due to its
likely relevance to the user’s current activity.” – WHATWG’s HTML5 Draft Standard


Getting ready

When viewing search results, you’ll often find the term for which you searched highlighted.
Instead of relying on a semantically meaningless tag, we can now use the more meaningful
<mark> element.

How to do it…

In this recipe, you’ll see has an excellent example of how to use the new
<mark> element to highlight a search results term. This gives a useful semantic hook not only
for styling but also for the machine tracking the results.

	<!DOCTYPE html>
	<html lang="en">
		<meta charset="UTF-8">
		<!--[if lt IE 9]><script
		<meta name="viewport" content="width=device-width,
		<h1>716,000,000 search results for
			the query "<mark>HTML5</mark>"</h1>
		<section id="search-results">
				<h2><a href="">
				<mark>HTML5</mark> - Wikipedia, the free
				<p><mark>HTML5</mark> is the next major revision of
				<mark>HTML</mark> ("hypertext markup language"), the core
					markup language of the World Wide Web. The WHATWG started
					work on the ... <a href="">
					Read more</a></p>
				<h2><a href="">
				<p>A vocabulary and associated APIs for <mark>HTML</mark> and
				XHTML. Editor's Draft 16 August 2009. Latest Published
				Version:<mark>html5</mark>/; Latest
				Editor's ... <a
				Read more</a></p>

Adding a simple style declaration like:

	<style type="text/css">
		mark {background-color: yellow; font-weight: bold;}

in the <head> section helps us render this highlighted text:

How it works…

The new <mark> element simply highlights a word or phrase to draw the reader’s attention. To
do this, simply specify the <mark> to be bold or italicized or highlighted in some way in your
corresponding Cascading Style Sheet.

There’s more…

Sure, you could mark up and style a search-results page to use the <b> or <i> or even
<span> tags to indicate for which term the search took place, but each of those tags only
affects the presentation layer. They lack meaning. The new <mark> element can accomplish
the same visual effect, while also adding that extra meaning to your markup. In fact, the new
<mark> element is full of win.

<Mark> long and prosper

An other great use of the new <mark> element is highlighting a date in a calendar picker, as
we often see on any date-based reservation system website like highlights the current date by default when booking your itinerary. Instead
of using a semantically meaningless tag to achieve this, the new <mark> element could be a
perfect candidate to use.

Waiting for browsers

The new <mark> element isn’t fully supported by any web browser at the time of this writing.
Though the extra semantic meaning may not be apparent to machine readers, we can still use
the new <mark> element as a stylistic “hook” until the day its meaning is fully supported by a
variety of browsers.

Is “future proof” a word?

Remember that HTML5’s new elements attempt to add extra meaning to our markup. The
goal is never to take away meaning or break pages. With this in mind, it becomes much more
palatable to layer on new elements like the <mark> element that’s not fully implemented by
browsers yet. Even if its meaning is not fully understood by machines yet, it certainly does not
hurt to add it and make our pages as “future proof” as we possibly can.

See also

In 2001, Carrie Bickner prepared the “New York Public Library Online Style Guide”
( for branches of the NYPL to use when
updating their websites. In this seminal publication, Bickner made the case for web standards
by separating content (markup) from presentation (Cascading Style Sheets) from behavior
(JavaScript). The publication was extremely forward-thinking for the time and was in use
for many years.

Pages: 1 2 3 4

Leave a Reply

Your email address will not be published. Required fields are marked *

Pin It on Pinterest

Share This

Share this post with your friends!