oli22 Posted October 14, 2011 Share Posted October 14, 2011 The question is about how i have placed <a href.../> tags. It makes whole area click-able but is placed in between other tags in a way that does not look like w3c compliant. Will this be potentially bad? Minor fault? or absolut ok? <div class="description"> <div class="descriptionInner"> <a href="Documentary.php?playThis=valley" target="_self" > <img src="images/logos/valley.gif" width="160" height="95" /> California Valley<br/> hicking in california<br/> </div> <div> <span class="timeShow"> 08:15 </a> </span> </div> <hr class="blueLine"> </div> as you can see <a href> tags starts and ends inside between many tags instead of end & start of one tag Quote Link to comment Share on other sites More sharing options...
markjoe Posted October 14, 2011 Share Posted October 14, 2011 I agree it looks "iffy", but I don't find anything to suggest it is not allowed. In fact to the contrary, the specs seem to suggest that it is allowed. While they do not give any examples of an anchor tag containing other tags, the only limitation explicitly listed for anchor content is that it may not contain another anchor tag. http://www.w3.org/TR/html401/struct/links.html#edef-A http://www.w3.org/TR/xhtml1/#prohibitions Quote Link to comment Share on other sites More sharing options...
teynon Posted October 14, 2011 Share Posted October 14, 2011 Your code might work, but it works because browsers were made to try and correct issues like this. A good way to understand what I mean is open that page in Google Chrome. Right click and click "Inspect Element" Look at the HTML structure in there. You'll see that it is adding multiple links itself. (IE Correcting your code) Tag's should never be "interwoven" so to speak like the way you are doing. Yes, it would be invalid if it wasn't easily correctable by the browser. (But that doesn't mean it will show up the way you would expect in every browser.) This is what Chrome shows me: <html> <head></head> <body> <div class="description"> <div class="descriptionInner"> <a href="Documentary.php?playThis=valley" target="_self"> <img src="images/logos/valley.gif" width="160" height="95"> California Valley<br> hicking in california<br> </a> </div> <a href="Documentary.php?playThis=valley" target="_self"> </a> <div> <a href="Documentary.php?playThis=valley" target="_self"> <span class="timeShow"> 08:15 </span> </a> </div> <hr class="blueLine"> </div> </body> </html> <div class="description"> <div class="descriptionInner"> <a href="Documentary.php?playThis=valley" target="_self" > <img src="images/logos/valley.gif" width="160" height="95" /> California Valley<br/> hicking in california<br/> </div> <div> <span class="timeShow"> 08:15 </a> </span> </div> <hr class="blueLine"> </div> Quote Link to comment Share on other sites More sharing options...
markjoe Posted October 14, 2011 Share Posted October 14, 2011 Woops I didn't look at the code structure close enough. You should absolutely never "weave" code, like teynon previously said. Open and close tags should always be "symmetrical". But other than that point, I cannot find any reason why this wouldn't be acceptable: <div class="description"> <a href="Documentary.php?playThis=valley" target="_self" > <div class="descriptionInner"> <img src="images/logos/valley.gif" width="160" height="95" /> California Valley<br/> hicking in california<br/> </div> <div> <span class="timeShow"> 08:15 </span> </div> </a> <hr class="blueLine"> </div> Granted, I wouldn't do it myself, but I cannot find any spec that says you can't. Quote Link to comment Share on other sites More sharing options...
teynon Posted October 14, 2011 Share Posted October 14, 2011 markjoe, I link blocks all the time. It's actually essential to some of my administrative interfaces. (It helps make things dummy proof.) That being said, when I say "weave", I mean all tags in HTML should be properly nested. IE It should always look like this: <div> <a href="blah"> <span>blah</span> </a> </div> Never like: <div> <a href="blah"> <span> </a> Blah </span> </div> Just thought of a better way to explain this... <a href="blah.html"><img src="image.jpg"></a> That's linking a block. There is a glitch, however, in... IE (I think) where if you try to link an empty block with CSS applied to it, it doesn't actually link it. (Because in IE blocks that are empty or don't display anything are not actually rendered. Sort of like a compiler stripping out comments or unused variables. Quote Link to comment Share on other sites More sharing options...
oli22 Posted October 19, 2011 Author Share Posted October 19, 2011 Thanks for shedding light on this Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.