Почему визуально нет разницы поместить a в li либо li в a?

Question

[nevro]

Только начал изучать. Могу элемент списка обернуть ссылкой:
<a href = 'урл'><li>текст</li></a>
Могу текст внутри элемента списка обернуть в ссылку:
<li><a href = 'урл'>текст</a></li>
Вроде бы такой вариант логичней, но в браузере разницы не вижу. Или разница всё-таки есть?

Comments

[Andrew]

Если вам, например, нужно будет засунуть туда кроме ссылки еще что, тогда заметите разницу.
Или чтобы клик работал не на всём пункте с отступами и тд, а только по нужной инфе.
А так, да, не особо видно.
Более наглядно для ol>li>a , ol>a>li

Answer 1

[Сергей delphinpro]

Зачем заниматься ерундой?


Но я отвечу на ваш вопрос.
Кратко: по-умолчанию браузер умный, разработчик дурак.
Подробнее: браузеры написаны так, что они могут самостоятельно исправить некорректно размеченный документ. Можно увидеть это в визуализации DOM в инспекторе, она не всегда соответствует разметке (если последняя кривая). Конечно исправляют они ровно настолько, чтобы можно было отрисовать документ.

Answer 2

[YakovSpb]

просто делай, как во втором варианте.. так принято
если сайт на CMS ставить, то класс вешается на li, так что одна причина уже есть

Answer 3

[strelok011]

Просто нужно разбираться в семантике html - какие теги как себя ведут в отсутствии вообще любых стилей и для чего предназначены.
Гуглите блочные/строчные элементы, что во что можно вкладывать, а что нельзя и почему. Сразу подобные вопросы отпадут.
И для чего придумывали всевозможные теги. К примеру , , ...
Хорошая верстка не должна разваливаться в отсутствии всех стилей, списки должны быть списками, ссылки - ссылками.
А стилями можно и глаз на глобус натянуть. Браузер съест.