Когда верстаешь характеристики товара, руки тянутся накидать просто div за div'ом. Оно ведь работает.
Но есть нюанс:
👉 <div> — это пустой контейнер. Для браузера и скринридера он ничего не значит.
👉 <ul><li> — это список. Скринридер скажет: «Список из 5 элементов», и озвучит каждый пункт.
Для пользователя с экранным диктором это огромная разница.
💡 А теперь внимание: поисковики считывают семантику.
Если это список, то они трактуют его как список. Иногда такие штуки попадают даже в сниппеты — прямо в поисковой выдаче показывается аккуратный перечень.
💡 Также, Lighthouse обращает внимание на доступность.
Важно делать разметку правильно, т.к. это напрямую влияет на показатели специальных возможностей.
📈 Поэтому:
Если хочется, чтобы сайт был дружелюбнее к людям и чуть лучше понятен для поисковиков — лучше не ленимся и берём списки.
--------------------------------
Есть знакомый, который верстает дивами? Перешли ему этот пост, пусть тоже узнает про правильный подход : )
#полезности #html #frontend