Getting a div with a link around to validate

[design-is]

Hi all,

Just so you know, I'm no expert with code or markup, but I get by.

I have recently created a link with content inside:

<a href="work.html" id="work1" class="workfront"><img alt="work1" src="images/work.jpg" class="workfrontthumb" /><h4>Title</h4><p>Description</p></a>

This is so that I can have a hover state and active link area in a rectangle with the image and text inside.

I understand that this isn't semantically correct, but it seems to do what I need in all the browsers I can get my hands on. This will not validate due to having block elements within inline elements.

I know you can do some javascript to have the same effect, but this works, so why bother?

Does anyone know a way to do this so that it will validate?

Or do you think that it will be understood as a valid way of doing it even though it doesn't validate?

I will be using this on my portfolio page and am sure someone will complain it doesn't validate.

 

[angelwatt]

That seems to be a lot of stuff to have as a link. People generally don't like having so much being a link because they become less confident of what they are clicking on. It reminds me of all the spam email where everything is clickable. That's just something to think about.

You could always place the link around each piece.

<a href="work.html" id="work1" class="workfront"><img alt="work1" src="images/work.jpg" class="workfrontthumb" /></a>
<h4><a href="work.html" id="work1" class="workfront">Title</a></h4>
<p><a href="work.html" id="work1" class="workfront">Description</a></p>

You could also use different tags then use CSS to change the look:

<p><a href="work.html" id="work1" class="workfront"><img alt="work1" src="images/work.jpg" class="workfrontthumb" />
<span class="title">Title</span>
<span class="dscrip">Description</span></a></p>

I'm not sure how your code fits into the rest of your page code, but the h4 may not really be necessary.

Alternate code structure 2:

<ul>
  <li><a href="work.html" id="work1" class="workfront"><img alt="work1" src="images/work.jpg" class="workfrontthumb" /></a></li>
  <li class="title"><a href="work.html" id="work1" class="workfront">Title</a></li>
  <li class="descrip"><a href="work.html" id="work1" class="workfront">Description</a></li>
</ul>

I know you can do some javascript to have the same effect, but this works, so why bother? ... Or do you think that it will be understood as a valid way of doing it even though it doesn't validate?

Using valid HTML is a way to increase the likeliness of browsers rendering the HTML correctly (at least when the browsers correctly understand standards). By ignoring validation you risk potential rendering issues in past/current/future browsers. That said, a professional who understands the standards and why they exist can make the determination of when it's OK to bend the rules. You've only supplied a snippet here so I won't make any personal judgments on the code. I wouldn't expect anyone to consider this code as a "valid way of doing it" though. I see it more as a shortcut and somewhat lazy approach.

Generally when you're looking for ways around validation, it's because you're addressing the problem incorrectly. Step back and think about the content you're coding up and see if you can see other ways that it can be done (like the suggested code structures above). I have not come across a situation where I needed to ignore validation to get good code.

 

[design-is]

<snip>I see it more as a shortcut and somewhat lazy approach.<snip>

Thought so. Thanks very much for suggestions & advice - I'll have a fiddle and may come back with more questions if necessary


EDIT - Fixed Thanks again angelwatt - Always appreciated!