my understanding is that with HTML5 it IS now correct to wrap blocks with an <a> tag...
"...• Block-level links—Links can now be placed around block-level elements. So if you need to link an image, headline, and paragraph text to the same place you can do it with just one link. Here's an example. In HTML4 you had to write: <h2><a href="site.html">Headline</a></h2> <p> <a href="site.html"><img src="site.jpg" alt="site"></a> <a href="site.html">Text about the site. Read More...</a> </p> But with HTML5, you need only one link around the entire block of HTML: <a href="site.html"> <h2>Headline</h2> <p> <img src="site.jpg" alt="site"> Text about the site. Read More... </p> </a> ..." above code example from http://webdesign.about.com/od/html5tags/qt/html5-links.htm -john petroshius On Sep 12, 2013, at 2:28 PM, Chris Rockwell wrote: > Yeah, I don't think I've ever seen/notice it failing, I just prefer to do > it this way. Putting aside the fact that it's not correct, it just looks > funny, to me, to see an <a> around a bunch of content :) > > > On Thu, Sep 12, 2013 at 3:24 PM, Tom Livingston <[email protected]> wrote: > >> On Thu, Sep 12, 2013 at 3:19 PM, Chris Rockwell <[email protected]> >> wrote: >>> <a> is an inline element and cannot contain block level elements (such as >>> <div>). >>> >>> One way is: >>> >>> .container { >>> position: relative; >>> } >>> a { >>> display: block; >>> position: absolute; >>> left:0; >>> top: 0; >>> width: 100%; >>> height: 100%; >>> text-indent: -9999em; >>> z-index: 1 /* or higher if necessary */ >>> } >>> >>> <div class="container"> >>> <div>Some content here</div> >>> <a>Link</a> >>> </div> >>> >>> >> >> This is nice. I'll have to remember this one. >> >> I will say though, that I have wrapped other elements such as div in >> an href with success in IE8+ and other "normal" browsers. >> >> -- >> >> Tom Livingston | Senior Front-End Developer | Media Logic | >> ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com >> > > > > -- > Chris Rockwell > ______________________________________________________________________ > css-discuss [[email protected]] > http://www.css-discuss.org/mailman/listinfo/css-d > List wiki/FAQ -- http://css-discuss.incutio.com/ > List policies -- http://css-discuss.org/policies.html > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ ______________________________________________________________________ css-discuss [[email protected]] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
