I am trying to validate my code as follows:
<ul class="work">
<li>
<a href="work1.html"> <img src="images/work_1.png" alt="Work 1 Logo" /> <h4>Lorem ipsum doler sit amet consectetur adipiscing elit.</h4> Work 1 </a>
</li>
<li>
<a href="work2.html"> <img src="images/work_2.png" alt="Work 2 Logo" /> <h4>Lorem ipsum doler sit amet consectetur adipiscing elit.</h4> Work 2 </a>
</li>
<li>
<a href="work3.html"> <img src="images/work_3.png" alt="Work 3 Logo" /> <h4>Lorem ipsum doler sit amet consectetur adipiscing elit.</h4> Work 3 </a>
</li>
</ul>
The problem I am facing, of course, is that block-level elements (h4) should not be inside inline elements (a). Is there any XHTML 1.0 Strict valid way which will allow me to see the same effect that I see right now with this code? The unique aesthetic benefit I get by having the (h4) within the (a) is the fact that there are two different text styles both being affected by the same anchor. It actually looks quite good on my page!
Change your h4
to span
and give them the same styles.
<ul class="work">
<li>
<a href="work1.html"> <img src="images/work_1.png" alt="Work 1 Logo" />
<span>Lorem ipsum doler sit amet consectetur adipiscing elit.</span>
Work 1</a>
</li>
etc.