Всем Re.
Семантика — раздел лингвистики, изучающий смысловое значение единиц языка.
Семантика в HTML - придание смысла разметке.
По большей части все сайты придерживаются стандартных конструкций. Типичные области - Header(Заголовок), footer("подвал"), sidebar(боковая панель), navigation bar(навигационная панель).
Не будем рассматривать все элементы(пока что), а пройдемся по тем, которые я считаю более интересными для рутинной работы верстальщика:)
- Элемент main
предназначен для основного контента (содержимого) <body> документа (страницы). Основной контент состоит из контента, который непосредственно относится к главной теме документа или её развивает.
- Элемент section
Автономный раздел - который не может быть представлен более точным по семантике элементом - внутри HTML-документа. Как правило, но не всегда, разделы имеют заголовок.
- Элемент nav
Элемент nav призван содержать элементы навигации по сайту. Как правило, это ненумерованный список с набором ссылок.
- Элемент article
представляет самостоятельную часть документа, страницы, приложения или сайта, предназначенную для независимого распространения или повторного использования. Этот элемент может представлять статью на форуме, статью в журнале или газете, запись в блоге или какой-либо другой самостоятельный фрагмент содержимого.
- Элемент aside
представляет собой часть документа, чьё содержимое только косвенно связанно с основным содержимым документа. Чаще всего представлен в виде боковой панели, сносок или меток.
- Элемент header
представляет собой вводный контент, обычно группу вводных или навигационных средств. Он может содержать другие элементы-заголовки, а также логотип, форму поиска, имя автора и другие элементы.
- Элемент footer
представляет собой нижний колонтитул (футер, подвал) для своего ближайшего секционного контента или секционного корня. Футер обычно содержит информацию об авторе раздела, информацию об авторском праве или ссылки на связанные документы.
До прихода HTML5 разработчики давали div-элементам подходящие наименования, чтобы показать их принадлежность к определенным областям. Но браузер, экранный диктор или поисковые системы не могут сходу определить, какова цель каждого div-элемента. А HTML уже решил эту проблему:)