␡
- Beginner Recipe: How to markup figures and captions using the figure and figcaption elements
- Beginner Recipe: How to markup the date and time using the <time> element
- Beginner Recipe: Make a Native Toggle Widget with the <details> element
- Beginner Recipe: How to Correctly Use the <address> Element
- Beginner Recipe: Highlight Text with the <mark> Element
- Beginner Recipe: Tracking the Completion of a Task with the <progress> Element
- Beginner Recipe: Measuring with the <meter> Element
- Beginner Recipe: How and When to Use the <s> element
- Beginner Recipe: Changes to existing elements
- Recipe: Wrapping links around elements
- Intermediate Recipe: Adding more semantic information with Microdata
- Intermediate Recipe: Using WAI-ARIA with HTML5
- Advanced Recipe: Markup an Article Page with Comments
From the Rough Cut
Beginner Recipe: Highlight Text with the <mark> Element
From the Rough Cut
From the Rough Cut
From the Rough Cut
Beginner Recipe: Highlight Text with the <mark> Element
The mark element gives the document author a chance to highlight, or bring attention to, some text in the document.
If a user had search a site and was taken to a separate page, the term they had originally searched for might be highlighted for their reference. We would use a mark here, rather than a strong or em because we are not giving the term(s) any importance or emphasis, simply highlighting it for the user. Figure
)
Figure 2.4 The mark element used to highlight text for a user
Listing 2.6
<style>
mark {background-color: #0F0;font-weight:bold;}
</style>
<article>
<header>
<h1>Something in Latin</h1>
</header>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. <mark>Vestibulum tortor quam</mark>,
feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu
libero sit amet quam egestas semper. Aenean ultricies mi vitae est
. Mauris placerat eleifend leo.</p>
</article>
Interestingly enough, Chrome automatically highlights mark with a yellow background.