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