Семантика

Почему семантика важна

Чтобы сделать сайт доступным.
По разным данным от 8% до 15% имеют физические отклонения и используют скрин ридер. Так же есть часть пользователь, что используют клавиатуру для навигации по сайту. Ещё вариант apple watch, там явно нет верстки и все делается через семантику.
Чтобы сайт был выше в поисковиках.
Предположительно влияет ранжирование сайта в поисковой выдаче. Классический пример — расписание поезда «Сапсан» в выдаче Google. Разработчики tutu.ru сверстали таблицу тегом table вместо div и их сниппет оказался в выдаче Google по важному коммерческому запросу.
Семантика прописана в стандартах.
Легче разобрать код.

Это запарно, надо прочитать спек.
Лучше не использовать теги, если не уверен в их использовании. Т.к. это может привести к путанице пользователя.

Главный принцип - удобство UX\UI стоит выше семантики.

Теги заголовков h1-h6 нужны для выстраивания структуры страницы, с их помощью можно сформировать иерархическое дерево документа с разделами и подразделами.
h1 один на странице и должен быть на каждой странице.
Важно, чтобы заголовки шли последовательно, т.е. не должно быть ситуации когда идет h2 > h4 > h3. Нужно h2 > h3 > h4
У всех img на странице должен быть указан атрибут alt: его могут прочитать скринридеры, его увидят пользователи с отключенными или не загрузившимися картинками. Иначе скринридеры читают его название.
Альтернативный вариант это делать картинки через background.
http://prgssr.ru/development/alternativnyj-tekst-dlya-izobrazhenij.html
nav должен быть один на странице, т.к. это удобнее
main может быть несколько на странице