Page 1 of 1

What is valid markup inside an <A> tag

Posted: Wed Jul 04, 2007 9:50 pm
by Stryks
Hey all,

I'm working on a search results page, with each result item needing to show a fair chunk of data. Among other things, each item has an image, some text, and most likley a table as well.

My issue is that I want to have the whole result clickable as a link.

I'd prefer not to use javascript for this, as I always like to remove as much penalty as possible for js-disabled viewers.

Anyhow, I'm about to go start designing, but if nesting the content in the A tag is a no-no, it'd be good to know before I waste my time trying.

Cheers

Posted: Wed Jul 04, 2007 10:38 pm
by feyd
Anchors are inline elements, therefore cannot have block elements inside them.

Posted: Wed Jul 04, 2007 11:04 pm
by Stryks
Bugger.

I did the test and it appears to work, but I dont know .... I'm doing a pretty major redesign and I'm trying to stay as close to the standards as I know them. I mean I've even reworked my concept design so I dont need CSS hacks.

On the bright side though, there is the image, and it's pretty dominant. I can link that and then put a button opposing it. Hopefully users attention will magnet to the image or the button.

Is there any other legit solution to make the whole item clickable, or you think the above alternative reasonable?

Cheers

Posted: Wed Jul 04, 2007 11:13 pm
by feyd
There's layering an anchor over all the elements, but that's often iffy and typically requires Javascript at some point.

Proper design will typically alleviate the need to do such things, but it really depends on what you're displaying.

If this is a real problem, a redesign may be in order or at worst educating your users. ;)

Posted: Thu Jul 05, 2007 10:15 am
by superdezign
You can always give the anchor a display:block property.