I was trying to get an entire <li> row to be clickable rather than just the text inside it. So I put the <a> tags on either side of the <ul> tags and it works. My question is: is this correct usage, or am I heading into trouble later? Here’s the complete test HTML:
<!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>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
h2, p{
font-family:Arial, Helvetica, sans-serif;
}
.outer {
margin:0;padding:0;
position:relative;
display:table;
height: 100px;
width: 200px;
vertical-align: middle;
text-align: left;
border: 1px solid #000;
background:#bbb;
clear: both;
}
.inner {
margin:0;padding:0;
display:table-cell;
vertical-align:middle;
position:relative;
border: 1px solid #ff0000;
padding-left: .6em;
}
.inner a {
color:blue;
text-decoration:none;
}
</style>
</head>
<body>
<h2>Vertical alignment of elements of different heights</h2>
<p>Putting the < a > tags around the < ul > tags allows the whole < li > row to be clickable instead of just the < p > text.</p>
<a href="#" alt=""><ul class="outer">
<li class="inner">
<p>This is some random text</p>
</li></ul></a>
<a href="#" alt=""><ul class="outer">
<li class="inner">
<p>This is some random text<br>This is some random text</p>
</li></ul></a>
<a href="#" alt=""><ul class="outer">
<li class="inner">
<p>This is some random text<br>This is some random text<br>This is some random text</p>
</li></ul></a>
</body>
</html>
#1) Why do you have only one LI inside UL? , even if what you were doing were valid all list items would go to the same link? SO I assume you mean putting the A around the LI, that would be more sensible.
#2) That is only valid in HTML 5, so you would need to change your doctype and do a few other cross-browser preps
#3) For what you have, you could simply omit the P tags replace them with the A tags OR replace the P tags with SPANs and wrap an A around all the spans and set the SPANs and the A to to display:block;
As dresden_phoenix says, that is only valid in (X)HTML5. In earlier versions, <a> can only contain text and inline elements, not block elements like <ul> and <li>.
And creating a separate list for each bullet point just so that you can wrap <a> tags around the list is a horrible, horrible way of doing it, and completely negates the point of having a list there in the first place.
What are you putting alt=“” attributes on an <a> tag for? They can only be used on <img> – they designate alternative text to be used when the image can’t be displayed. Having them here makes no sense.
There is a very easy way to achieve the goal of making the entire width of the line into a clickable area, that is valid in HTML4 and XHTML1.
<ul class="outer">
<li><a href="#">Some text</a></li>
<li><a href="#">More text</a></li>
<li><a href="#">Lots and lots of text</a></li>
</ul>
ul.outer a {display:block;}
You don’t need to put a class on the <li>s either, much easier just to put their styles in ul.outer li {...}. And there’s no need for <p> for such short text – if you want to increase the spacing between bullets then you can do that with margins and padding on the <li>.
Using the code you gave in #1, I get 7 errors and 5 warnings.
Because of: nesting <ul> inside <li>, using < instead of [noparse]<[/noparse], illegal use of alt attribute, using <br> instead of <br />.
It’s worth noting that while anchors around block level elements wasn’t valid before HTML5 it still works in every browser so the validity means nothing really.
There’s also no reason to go around changing doctypes other than validation.
I disagree. If it passes the validator then it is legal. If it doesn’t then it isn’t. If the html is valid then we can argue ad infinitum on whether it is proper semantics or not and that is a different issue alltogether.
So validation does mean something.
Sure, code might work in some browsers even if it fails the validator, but to me, publsihing pages with invalid code reflects poorly on the ability of the author of the page. Think of it this way. Just about anyone can build a house and all will probably provide shelter initially, but the poorly built houses will start leaking, falling apart etc much, much sooner than a well built house
I sometimes go around my competitors’ websites and check the validity of the html in at least their home pages. If it is invalid I send them a message through their contact page to tell them their pages are invalid and that they have lost me as a potential customer. If their page is fixed after a few days I highlight their invalid website on my website and recommend people to avoid the site with invalid code.
I’m not sure that would hold up in a court of law.
I sometimes go around my competitors’ websites and check the validity of the html in at least their home pages. If it is invalid I send them a message through their contact page to tell them their pages are invalid and that they have lost me as a potential customer. If their page is fixed after a few days I highlight their invalid website on my website and recommend people to avoid the site with invalid code.
I’d suggest you quit doing that, it’s a waste of time and effort and has no positive side to it at all.
I build websites for real people, not validators or browsers.
The “validation error” in this case worked in every browser, was very useful, so it became a standard in HTML5.
Having a doctype other than HTML5 has no impact what so ever on the output page, it simply doesn’t matter.
I’m not promoting invalid code, only promoting looking at validation reasonably.
I could have suggested dropping the unnecessary closing </li> tags as well but your brain may have melted at the prospect
<ul class="outer">
<li><a href="#">Some text</a>
<li><a href="#">More text</a>
<li><a href="#">Lots and lots of text</a>
</ul>
You can suggest all you like but I’m not going to stop on the say-so of someone in a forum .
The positive aspect of highlighting other peoples’ invalid code can only increase the possibility of someone asking at least me to give them a quote for their website, especially as my website validates with a Strict doctype. It certainly can’t do me any harm :).
I’m sorry to disagree with you Mark but browsers hate inline elements wrapped around block level elements and I’m seeing more and more errors in the forums now especially as everyone is doing this in html5. IE hates it and will misplace or even hide the element altogether in complicated situations and indeed Mozilla will occasionally hiccough on this. It has happened so often in html 5 layouts that I advise not to use this structure. If you do warp the anchor around the block level element then at least set the anchor to display:block and although this makes it more reliable it does not cure the bug completely.
What’s worse is that the behaviour is erratic and sometimes it works and sometimes it doesn’t making a bug that should just be avoided in the first place.
I don’t know what they were thinking when they made this possible in html5 and obviously didn’t test how browsers handle it.
You are right that validation for the sake of validation is a waste of time especially as vendor pre fixes are so widely used these days. Validation is a tool to find errors in the code and fix them and not a badge to be worn .
It depends on how you wear it. I use it and highlighting other peoples’ invalid code as a marketing tool. For me there is only potential upside and no downside at all. It doesn’t guarantee more work but it certainly does no harm either.
Nah, clients warm to the idea that they can have annoying auto-playing videos and stupid stockfoto carousels and 9px-light-grey-on-white-text and drop-shadows-on-rounded-corners because today that makes everyone’s MonsterTemplate site look “modern”. Positivity to them means you say “yes” when they ask for this crap.
Since clients have no idea that invalid code on websites isn’t anything like an error caught by the C compiler causing the space shuttle to crash in a fiery blaze with 15 gorgeous supermodel astro-nettes on board, caught on several wavering iWhatevers on a nearby tropical tourist-haven island as it splashes magnificently into the sea killing the last of the endagered purple sea walruses and displayed on the local Fox Snooze channel so everyone can cry and come together in a time of (inter)national crisis and shared sorrow blah blah… telling them “the other guy has illegal code” might well convince them that YOU will be the caped developer who can stop their company’s downward spiral into bankruptcy and shame requiring face-saving seppuku and manage to convince the world that YES, they DO need Yet Another Social Twitter Picture Sharing Service (for only 5.99 plus tax)!
You’re right tho, it’s kind of an underhanded tactic, and it can very easily bite you in the butt when the client, a few months later, runs those validator tests themselves and discover either a) all the Big Names Who Are Successful Competitors But With More Drop Shadows And Useless Gradients are riddled with errors and still manage to make money (even if they are kicking the blind and mouseless in the face and going “nya nya why dontcha try a lawsuit blinko!” or b) their own site has “errors” (or were you going to spend more time edumacatin’ the client about the difference between real errors like li’s outside a ul and fake errors caused by -moz and -webkit CSS3 crap?). Or both.
I assumed it was safe because of how HTML5 was designed(where possible) to be backwards-compatible.
I hadn’t actually used links around block-level elements myself, or tested support in browsers, which showed in my response
I don’t know what they were thinking when they made this possible in html5 and obviously didn’t test how browsers handle it.
Being able to link any type of element makes sense to me, which is why this question comes up often. Not everything you want to be able to do will be able to be backward compatible.
I assumed it was safe because of how HTML5 was designed(where possible) to be backwards-compatible.
Well, like <meta charset=“blah”>, many people have been incorrectly wrapping anchors around block elements forever, and browsers have been using error rendering to parse that and Do Something with it all this time… which is probably why the WHATWG thought the anchors-wrapping could work. When they want to be backwards compatible, that generally means “browsers’ parsers have been dealing with this in some form already” and for a lot of things, that works. Just not this one, though I’m sure IE Team is working on it. Mozilla, I have no idea, I thought this was one of those decade-old bugs everyone’s been calling “features” which means it’ll never get fixed because after all, it’s not a problem whistles
There, fixed! This is another stellar example of loosening the structural rules to the point that validating HTML 5 is effectively MEANINGLESS – and just another of the reasons I can’t believe ANYONE is DUMB ENOUGH to embrace the user of HTML 5 for ANYTHING!!!
My question would be… what makes those LI… if they’re LI why do they need P inside them? What makes the text P? If it’s all one anchor, what makes it go inside a list?
But again without meaningful content to dictate the markup, it’s difficult to weigh in on the proper code for what’s being attempted - treads into the flawed site-building methodology of doing the layout before you have meaningful content with semantic markup.
If by layout you mean having a mockup of the page then I disagree. You normally wouldn’t start building a house without a set of architect’s plans and so I would never start building a web page without knowing what the desired result (layout) is. But I agree the markup should be semantic and pass the W3C Validator with a Strict doctype. Like you, I also don’t see the point of using HTML5 atm since it is a long way off being finished and so currently has numerous pitfalls.
.