Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Unable to put a div or article element inside an anchor

Tags:

html

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?

like image 252
skerit Avatar asked Feb 15 '12 12:02

skerit


People also ask

Can you put a div inside an anchor?

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.

Which elements can be placed inside anchor?

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.

How do I link an anchor tag to a div?

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.

Can I add anchor tag inside anchor tag?

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.


1 Answers

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.

like image 70
skerit Avatar answered Sep 19 '22 06:09

skerit