Highlighting text using the mark element_HTML5 Multimedia Development Cookbook-QQ阅读现言女生网

上QQ阅读APP看书，第一时间看更新

Highlighting text using the mark element

"The  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 - http://whatwg.org/html5

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  element.

How to do it...

In this recipe, you'll see HTML5doctor.com has an excellent example of how to use the new  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">
<head>
<meta charset="UTF-8">
<title></title>
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script>[endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1>716,000,000 search results for the query "<mark>HTML5</mark>"</h1>
<section id="search-results">
<article>
<h2><a href="http://en.wikipedia.org/wiki/HTML_5"> <mark>HTML5</mark> - Wikipedia, the free encyclopedia</a></h2>
<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="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>HTML5</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://w3.org/TR/<mark>html5</mark>/; Latest Editor's ... <a href="http://dev.w3.org/html5/spec/Overview.html"> Read more</a></p>
</article>
</section>
</body>
</html>

Adding a simple style declaration like:

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

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

How it works...

The new  element simply highlights a word or phrase to draw the reader's attention. To do this, simply specify the  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  or  or even  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  element can accomplish the same visual effect, while also adding that extra meaning to your markup. In fact, the new  element is full of win.

long and prosper

Another great use of the new  element is highlighting a date in a calendar picker, as we often see on any date-based reservation system website like Priceline.com.

Priceline.com highlights the current date by default when booking your itinerary. Instead of using a semantically meaningless tag to achieve this, the new  element could be a perfect candidate to use.

Waiting for browsers

The new  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  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  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.