Элементы уровня блока в теге <a>, проверка и удобство использования

Question

Я часто оборачиваю элементы уровня блока тегами <a>, чтобы сделать всю группу кликабельной. Например, скажем, у меня есть список событий:

<ul>
    <li>
        <a href="#" style="display: block;">
            <div style="float: left; display: inline;">12/12/2010</div>
            <div style="float: left; display: inline;">Some event information</div>
        </a>
    </li>
    <!-- etc... -->
</ul>

ПРИМЕЧАНИЕ : встроенные стили применяются только для примера.

Таким образом, все это кликабельно, а не только текст внутри элементов.

Конечно, валидатор (x) html на validator.w3.org не нравится это, потому что я поместил элемент уровня блока (<div>) внутри встроенного элемента уровня (* 1014) *). Несмотря на то, что я использую CSS для определения тегов <a> как уровня блока, а тегов <div> как встроенных.

Я всегда руководствовался эмпирическим правилом, что вы всегда должны стремиться к созданию правильного кода; однако , если ваш код не проверяется, и вы понимаете, почему он не проверяет , и у вас есть веская причина, по которой он не проверяет , тогда не беспокойся об этом.

Итак, мой вопрос тройной:

1. Является ли это действительной причиной, по которой это не нужно подтверждать?
2. Стоит ли выигрыш в удобстве использования (благодаря наличию большей интерактивной области) не проверять?
3. Есть ли лучший способ?

Answer 1

Использование span, как показано ниже, совершенно правильно, и вы можете добиться того же эффекта.

<a href="#" style="display: block;">
    <span style="float: left;">12/12/2010</span>
    <span style="float: left;">Some event information</span>
</a>

Answer 2

Я бы использовал <span> вместо <div>, а затем применил бы тот же стиль. Таким образом, вы получите лучшее из всех миров. У вас все еще могут быть большие цели, но они также будут подтверждены.

Answer 3

Я решил эту проблему, добавив событие onclick в div, то есть onclick = "window.location = 'redirectpage.html'">, а затем курсор стиля: указатель. Работает как шарм, а также проверяет.

Answer 4

1. На мой взгляд, да. Тем не менее, вы в значительной степени одиноки, если решите не принимать во внимание валидацию.

2. Преимущества для пользователя, безусловно, превосходят преимущества для автора.

3. Используйте HTML5, где <a> элементам разрешено переносить элементы уровня блока.

Answer 5

Относительно ваших трех вопросов:

1. Не стоит энергии, чтобы спорить.
2. Нет, если вы можете найти лучший путь.
3. Используйте <span> теги вместо div (на самом деле, что можно получить, сделав div display:inline?);или используйте Javascript и добавьте событие onclick к содержащему <li>.