Jelle De Loecker
Jelle De Loecker

Reputation: 21985

Unable to put a div or article element inside an anchor

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">&euro; 79,99</span>
                    <span class="elders">elders &euro; 89,99</span>
                    <span class="bespaart">u bespaart &euro; 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

Answers (1)

Jelle De Loecker
Jelle De Loecker

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

Related Questions