CODEWITHSUNDEEP
htmlvalidationw3c-validationxhtml-1.0-strict
Alon
Alon

Reputation: 7758

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

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.

Upvotes: 3

Views: 537

Answers (2)

whostolemyhat
whostolemyhat

Reputation: 3123

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.

Upvotes: 1

Rob W
Rob W

Reputation: 348972

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?

Upvotes: 2

Related Questions