HTML and CSS Reference
In-Depth Information
1.14 Adding Links to Block-Level Content
Problem
You want to wrap your site logo and main heading with a single hyperlink.
Solution
Contain both the logo image and the heading with the
a
element:
<a href="http://html5funprofit.com">
<h1>HTML5, for Fun & Profit</h1>
<img src="logo.png" alt="HTML5 for Fun and Profit" />
</a>
Discussion
Previous versions of HTML restricted
a
to inline content. So, if you had different
elements that all needed to be linked to the same resource, you had to individually
specify the
a
for each:
<h1><a href="http://html5funprofit.com">HTML5, for Fun & Profit</a></h1>
<a href="http://html5funprofit.com"><img src="logo.png" alt="HTML5 for Fun and
Profit" /></a>
Now, with HTML5,
a
elements can contain block-level elements. You can also still use
a
as in the past, for containing inline content. The only thing you can't nest inside an
a
is another
a
.
Wrapping links around block-level elements is justification enough for
using the HTML5 DOCTYPE.
See Also
HTML5 Doctor's article “'Block-level' links in HTML5” at
http://html5doctor.com/
1.15 Marking Up Figures and Captions
Problem
You want to include an illustration with a caption on your web page.
