How to write a link with complex content inside it so that it will be valid and correct

Question

w3 html validator will tell me that this is wrong:

<a href="http://www.bla.com>
   <div>something</div>
   <ul>
       <li>first</li>
       <li>second</li>
   </ul>
</a>

in order to get a validated as HTML 4 strict (or just for writing things correctly)

What is the better way to write it:

1. no div's and ul's - just span's with classes that I need to design:

   <a href="http://www.bla.com>

     <span class="div">something</span>
      <span class="ul">
          <span class="li">first</span>
          <span class="li">second</span>
      </span>
   </a>
   

2. without <a>

<div id="actAsLink" onclick="javascript:window.open('http://www.bla.com')>

<div>something</div>

<ul>

   <li>first</li>
   <li>second</li>

</ul>

</div>

=========================

sorry that the code doesn't look at its best - I had troubles handling the "code sampler" on this website.

Answer 1

I vote for option 1: Anchor + descriptive class names:

• The link will work, even when JavaScript or pop-ups are disabled. (this is the most important feature to me.)
• The class attributes describe their role, as a substitute for the <ul>, <li> elements. These elements can be styled using CSS.

Your structure looks a bit odd though: Why do you want to nest a list in an anchor?

Answer 2

Really you should have <a> tags inside each of the div, ul and li tags:

<div><a href="#"></a></div>
<ul>
    <li><a href="#">first</a></li>
    <li><a href="#">second</a></li>
</ul>

This is valid markup, but obviously with the downside that you have three links instead of one. I'm not sure why you want to have a list inside a link though - it's more common to see a list of links.