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?