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?
You can't put <div> inside <a> - it's not valid (X)HTML. Even though you style a span with display: block you still can't put block-level elements inside it: the (X)HTML still has to obey the (X)HTML DTD (whichever one you use), no matter how the CSS alters things.
As of HTML5 - which was released years ago - it is OK to wrap block-level elements inside of an Anchor tag. In fact, pretty much the only thing you can't put inside of an Anchor tag is another Anchor tag.
You can now link to this section (div) using the anchor tag. To do that, just use the id of the section with a # as the prefix for the href value.
Nested links are illegal. Links and anchors defined by the A element must not be nested; an A element must not contain any other A elements.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With