Well, I guess my response would be that the semantic solution you speak of is limited to html5 browsers. Anchors in html4 are not block level. So your doing the same thing as javascript. Creating for a platform that must be there to work correctly. However, the chances of the browser not running javascript are less likely then the browser being html5 compatible.. for now. :)
Not to mention some browsers put their own styling like margin and padding on anchors and if they are on the outside of a div, that could get messy. Needless work IMO. If they are inside the div, they will utilize the space provided by the div. As far as navigation goes, there again, there is no need to wrap the div in an anchor tag when you can put the anchor inside it. My response was more towards the point made by the info on linking a block of elements together by wrapping it, div and all, in an anchor tag. Best, Best, Karl DeSaulniers Design Drumm http://designdrumm.com On Sep 14, 2013, at 7:27 AM, Chris Rockwell wrote: > I'll answer with a question: why use JavaScript which, as you say, may not be > available, when there is a perfectly valid, semantic solution without it that > delivers the same user experience? > > On Sep 14, 2013 5:25 AM, "Karl DeSaulniers" <k...@designdrumm.com> wrote: > Just curious, but why would you wrap a div in an anchor tag when you can just > use the onclick handler? > > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> > <html xmlns="http://www.w3.org/1999/xhtml";> > <head> > <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> > <title>Untitled Document</title> > <script type="text/javascript"> > function getURL() { > window.location.href = "http://somewebsite.com";; > } > </script> > </head> > > <body> > > <div onclick="getURL();"> > <h2>Header</h2> > <img src="someimage.PNG" /> > <p>This is some text!</p> > </div> > </body> > </html> > > Everything in the div is linked and no <a> tag throwing off any layout. :) > Only thing I can think of is if you are building a site that does not use > javascript for instance? > But other then that... > > Best, > > Karl DeSaulniers > Design Drumm > http://designdrumm.com > > > > On Sep 13, 2013, at 1:39 PM, Chris Rockwell wrote: > > > Hey John - you understand correctly. Tom pointed that out earlier in the > > thread. > > > > > > On Fri, Sep 13, 2013 at 2:36 PM, john petroshius > > <j...@prairiestudio.com>wrote: > > > >> 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 <tom...@gmail.com> > >> wrote: > >>> > >>>> On Thu, Sep 12, 2013 at 3:19 PM, Chris Rockwell < > >> ch...@chrisrockwell.com> > >>>> 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 [css-d@lists.css-discuss.org] > >>> 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/ > >> > >> > > > > > > -- > > Chris Rockwell > > ______________________________________________________________________ > > css-discuss [css-d@lists.css-discuss.org] > > 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 [css-d@lists.css-discuss.org] > 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 [css-d@lists.css-discuss.org] 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/
