Как написать ссылку со сложным контентом внутри, чтобы она была действительной и правильной

Question

w3 html validator скажет мне, что это неправильно:

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

для того, чтобы получить проверенный как строгий HTML 4 (или просто для правильной записи)

Что такоелучший способ написать это:

1. без div и ul - просто span с классами, которые мне нужно спроектировать:

   <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. без <a>

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

<div>something</div>

<ul>

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

</ul>

</div>

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

извините, что код выглядит не лучшим образом - у меня возникли проблемы при работе с "образцом кода" на этом сайте.

Answer 1

Я голосую за вариант 1: Якорь + описательные имена классов:

• Ссылка будет работать, даже если JavaScript или всплывающие окна отключены.(для меня это самая важная особенность.)
• Атрибуты класса описывают свою роль как замену <ul>, <li> элементов.Эти элементы могут быть стилизованы с использованием CSS.

Хотя ваша структура выглядит немного странно: Почему вы хотите вложить список в привязку?

Answer 2

На самом деле у вас должно быть <a> тегов внутри каждого из тегов div, ul и li:

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

Это допустимая разметка, но очевидно, что недостатком является то, что у вас есть три ссылки вместо одной. Я не уверен, почему вы хотите иметь список внутри ссылки, хотя список ссылок чаще встречается.