Draw attention with mark

by .

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?

13 Responses on the article “Draw attention with mark”

Aleksey says

I was wondering why all the yellow stayed on my screen when highlighting parts of web pages. Thanks to this new element, I won’t have that problem anymore! LOL ^_^

In all seriousness tough, it’s a needed element.

Jacob Rask says

In the first example, wouldn’t the q element also be suitable?

Zeke Franco says

@jacob q is for non-sectioning quotes. “They will fail” was part of a larger quote not a sub quote of the blockquote. q element also implies that you want the content wrapped in ” ” which wasn’t the case.

Sam says

Is there any way to turn this off when visiting your site? You guys usually have good advice, but I tend to avoid you because the highlighting is so distracting. I can get rid of it by opening the article in a new tab instead of clicking directly in from Google—or by using my Web Inspector—but I think it’d be great if you included a little JavaScript link to turn it off. Like right next to the Tweet button. And it could be “mark”ed as well, so that it could be more easily seen.

I think it would be simple enough to implement, but I can’t understand a word of JavaScript myself, so I don’t really know.

Sam says

Edit:

Actually, even opening articles in a new tab—when clicked directly from Google—will still show the highlighting. It only disappears when I either copy the url and go to it or when I use Command-Return to open the page in a new tab from the site itself.

P.S. I hope I don’t sound whiney, I’m just trying to provide all the information needed should you decide to try this out. ;)

Mike Robinson says

Thanks for the feedback Sam. I’ll speak to the other doctors and see if we can make the highlighting optional or less obtrusive.

Edward says

So, I am working with a lot of pre-existing content (old print stuff) that includes many instances block-quotes in which the author has italicized some relevant portion of the quoted text and then followed the quote with a parenthetical “(emphasis added)”.

I have always understood these to be emphasized text and I don’t really see any semantic difference to a typical use of <em> or why the fact that it is happening inside quoted text would require a different tag such as <mark>.

If writers commonly refer to this situation as emphasis, it should use the emphasis tag. Setting a standard in which something commonly called emphasis is not really the proper use of the emphasis tag is just inviting tag misuse and non-conformance.

swhiteman says

Old post, but since @Edward posted recently, thought I’d join in because his point is well taken.

Maybe I’d separate them semantically like this:

em: when you add emphasis as the phrase is read, including by screen readers, regardless of context, so the <em> is important at the most unadorned version of the resource.

mark: when emphasis is relative to the context of the document, i.e. if it is the result of a search or persistent filter. I have difficultly imagining when a raw source document would have <mark>s, rather I would see this as a runtime representation of a resource.

George N says

@swhiteman, I recently encountered a very appropriate use of in a static setting. It was used to highlight differences in source code between one listing to the next and which are being referred to by the prose in more detail. The source code itself, of course is just plain text and does not carry any inherit styling.

rudy ferrara says

Hi

I am looking for a shorter way (if one exists) to save excerpts from online google articles without having to cut and paste from say a dozen googled articles, excerpts relevant to my topic. Then cutting and pasting these exerpts from each article and putting them in say a word document to be later incorporated into my blog or newsletter.

Ie, is there a way to take a relevant google article(s) for my blog or newsletter, highlight certain important portions while i’m still online reading it, then save the entire highlighted article somewhere else like my desktop, saving me much time cutting & pasting excerpts, and sequencing them somehow for my blog or newsletter while keeping track of the original article(s).

Thanks

rudy ferrara

Join the discussion.

Some HTML is ok

You can use these tags:
<a href="" title="">
<abbr title="">
<b>
<blockquote cite="">
<cite>
<del datetime="">
<em>
<i>
<q cite="">
<strong>

You can also use <code>, and remember to use &lt; and &gt; for brackets.