Reputation: 21985
Putting block elements inside an anchor is now "possible" or allowed in HTML5, but it does not work for some reason. Here's the code:
<a href="#"><div>
<figure>
<img src="prodimg/senseo-m.jpg"/>
</figure>
<div class="proddetail">
<header>
<hgroup>
<h2>Koffiepadsysteem</h2>
<h1>Senseo</h1>
</hgroup>
<div class="clear"></div>
</header>
<span class="price">€ 79,99</span>
<span class="elders">elders € 89,99</span>
<span class="bespaart">u bespaart € 15%</span>
<a href="#"><span class="meerinfo">Meer info</span></a>
</div>
</div></a>
When I inspect the code in firefox or chrome, I get this result:
<a href="#"></a>
<div><a href="#">
<figure>
<img src="prodimg/senseo-m.jpg">
</figure>
</a><div class="proddetail"><a href="#">
<header>
<hgroup>
<h2>Koffiepadsysteem</h2>
<h1>Senseo</h1>
</hgroup>
<div class="clear"></div>
</header>
<span class="price">€ 79,99</span>
<span class="elders">elders € 89,99</span>
<span class="bespaart">u bespaart € 15%</span>
</a><a href="#"><span class="meerinfo">Meer info</span></a>
</div>
</div>
That's almost good, but certain spots still aren't clickable. Any idea when can be done here?
Upvotes: 6
Views: 3097
Reputation: 21985
Problem found!
Wrapping a block element in an anchor IS possible, but you can't put another anchor in there, too. Then it breaks.
So the parent anchor can't contain a child anchor.
Upvotes: 12