- 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
Recipe: Wrapping links around elements
A very handy new feature of HTML5 is the ability to group several elements into one link. This gives us a much wider click area, something that we may have in the past used JavaScript to do the job, or a combination of tags.
If we were marking up a news or blog home page, with several articles to link to, we may have previously used something like this to make each item clickable. Listing 2.12 shows what we might have done to solve this in HTML 4.
Listing 2.12
<div class="article"> <h2><a href="article.htm"><img alt="article thumbnail" src="thumb.jpg" height="100" width="100" /> My article title</a></h2> <p><a href="article.htm">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</a></p> </div>
Listing 2.13 shows that in HTML5 we can wrap all of that in one a.
Listing 2.13
<article> <a href="article.htm"> <h2><img alt="article thumbnail" src="thumb.jpg" height="100" width="100" /> My article title</h2> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> </a> </article>
You are able to wrap the article in an a as well if you wanted, however this has been known to cause a couple of browser issues so we would advise against that approach.