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.
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>
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.
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
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
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.
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.
The addition of
mark to HTML is welcome, preventing stretching the definitions of
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”
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.
[…] Draw attention with mark | HTML5 Doctor […]
[…] more information about the mark element, see Miek Robinson’s HTML5doctor article Draw attention with mark. Posted in HTML5, accessibility web standards . Follow comments via RSS feed. Comment. […]
In the first example, wouldn’t the
qelement also be suitable?
@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.
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. ;)
Thanks for the feedback Sam. I’ll speak to the other doctors and see if we can make the highlighting optional or less obtrusive.
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.
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.
@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.
[…] http://html5doctor.com/draw-attention-with-mark […]
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).
Join the discussion.