Построение меню каталога на основании списка и ссылок

Question

Корректно ли применение тега <a> в следующей конструкции:

<ul>
<a><li>Пункт каталога 1</li></a>
<a><li>Пункт каталога 2</li></a>

При такой конструкции кликабельным становиться весь блок занимаемый пунктом каталога, а не только текст ссылки.

Возможны ли какие то проблемы? WebStorm ругается на такую конструкцию и пишет о неуместном применении тега <a>.

Answer 1

Это понятно, но тогда кликнуть можно только на текст. А в моем варианте если в CSS к примеру задать размер для <li> и рамку кликнуть можно по всей площади занимаемой элементом. Такое решение работает, проверил в разных браузерах. Вопрос могут ли быть какие то проблемы из-за такой конструкции?

Answer 2

Обьясните если кто знает почему так нельзя. если конечно нельзя.

Answer 3

Не обязательно на тексте. Размеры задаешь не для <li> а для <а>. Тогда кликать можно не только по надписи, но и по всей области занимаемой <а>. Используй line-height, padding-left, padding-right.

Answer 4

Я не большой специалист в html, но думаю, твой вариант нарушает саму конструкцию <ul>. Браузеры сейчас пошли умные и твой код они интерпретируют так как считают правильным. Но у разных браузеров и логика будет разная. Поэтому такое решение будет выглядеть по разному. Что не есть гуд. Как-то так, могу ошибаться)

Answer 5

Спасибо!

Answer 6

Правильным будет такое решение:
<ul>
<li><a href="#">Пункт 1</a></li>
<li><a href="#">Пункт 2</a></li>
</ul>

Answer 7

Рамку тоже задаешь для <а>.