Other than allowing Marks everywhere to rejoice that they have an element that shares their name, HTML 5 introduces mark as a way to highlight text to indicate its relevance to the user. Read on as we tally up the uses of this new element.

As always, the defining text passed down to us in the specification:

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.

Both uses are aimed at drawing attention to what is relevant to the user. mark can provide a very useful aid to the user with appropriate styling.

Examples

Search Results

A prime example of how to use mark today is to highlight the term a user has searched for. Many search engines already do this using other methods to mark the text, which shows the need for this new element.

<h1>716,000,000 search results for the query "<mark>HTML 5</mark>"</h1>
<section id="search-results">
  <article>
    <h2><a href="http://en.wikipedia.org/wiki/HTML_5"><mark>HTML 5</mark> - Wikipedia, the free encyclopedia</a></h2>
    <p><mark>HTML 5</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="http://en.wikipedia.org/wiki/HTML_5">Read more</a></p>
  </article>
  <article>
    <h2><a href="http://dev.w3.org/html5/spec/Overview.html"><mark>HTML 5</mark></a></h2>
    <p>A vocabulary and associated APIs for <mark>HTML</mark> and XHTML. Editor's Draft 16 August 2009. Latest Published Version: http://www.w3.org/TR/<mark>html5</mark>/; Latest Editor's ... <a href="http://dev.w3.org/html5/spec/Overview.html">Read more</a></p>
  </article>
  <article>
    <h2><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/"><mark>HTML 5</mark></a></h2>
    <p>Multiple-page version: http://whatwg.org/<mark>html5</mark>; One-page version: http://www.whatwg.org/specs/web-apps/current-work/; PDF print versions: ... <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/">Read more</a></p>
  </article>
  <article>
    <h2><a href="http://html5gallery.com/"><mark>HTML5</mark> Gallery | A showcase of sites using <mark>HTML 5</mark> markup</a></h2>
    <p>A showcase of sites using <mark>html5</mark> markup, with twin primary aims to help web designers and developers of how to implement <mark>html5</mark> into their sites now, ... <a href="http://html5gallery.com/">Read more</a></p>
  </article>
</section>
<nav>
  <ol>
    <li>1</li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>...</li>
  </ol>
</nav>

View a live example

Any instance of “HTML 5″, and even simply “HTML”, has been marked as relevant to the user’s search. This can help the user see how relevant their search results are, so they can pick the best results for what they need. When implementing this in a language like PHP, you can use functions like str_replace() or some clever regular expressions to find the search term within your output and wrap mark around each instance.

Quotes

In all the brilliant things that have been said, there is always a chance that someone will come back to scrutinize parts in the future. These pieces of text or speech may not have had any importance when they were original formed, and hence not been given such emphasis, but now have attracted particular interest by a another party. mark can be used in quotations to highlight such text.

<p>Mike once said:</p>
<blockquote><p>Google won't last, <mark>they will fail</mark> at search and advertising as nothing will topple Yahoo.</p></blockquote>
<p>Of course, we now know he was wrong. Google has not failed, they excelled in search and online advertising, making them a very profitable company.</p>

Here I have quoted myself, highlighting where I was wrong in my original statement and then immediately correcting this error in the following paragraph.

Differences from strong and em

Previously, you may have used em and strong for adding emphasis or importance, respectively, to portions of text. mark differs from these two as it is used purely for highlighting the relevance of a piece of text to the user and/or page’s content. In the past you may have used em and strong for this purpose, which was arguably valid at the time due to the lack of a better element, but the introduction of mark simply means their use will be more strict.

Use strong when you need to indicate the importance of a piece of text, such as an error or warning message, and em should be for adding emphasis to text, stressing words to adapt the meaning of a sentence.

Final Thoughts

The addition of mark to HTML is welcome, preventing stretching the definitions of strong and em too thin. There are many practical uses of mark in the world today, particularly for search and educational articles like tutorials. Put your highlighter pens down and start using mark to highlight relevant text (it’s better for your screen!).

Disclaimer: I have nothing against Google, this was merely a fictitious example vaguely related to the use of mark in search. Long live Google?

Share and Save:

Draw attention with mark originally appeared on HTML5 Doctor on August 18, 2009.