Семантическая вёрстка — подход к разметке, который опирается не на содержание сайта, а на смысловое предназначение каждого блока и логическую структуру документа. Даже в этой статье есть заголовки разных уровней — это помогает читателю выстроить в голове структуру документа. Так и на странице сайта — только читатели будут немного другими.
Это делает сайт более доступным. Для незрячих или частично незрячих основной инструмент для просмотра сайтов не браузер, который отрисовывает страницу, а скринридер, который читает текст со страницы вслух. Этот инструмент «зачитывает» содержимое страницы, и семантическая структура помогает ему лучше определять, какой сейчас блок, а пользователю понимать, о чём идёт речь. Таким образом семантическая разметка помогает большему количеству пользователей работать с вашим сайтом.
Выше в поисковиках. Поисковики не разглашают правила ранжирования, но известно, что наличие семантической разметки страниц помогает поисковым ботам лучше понимать, что находится на странице, и в зависимости от этого ранжировать сайты в поисковой выдаче.
Семантика прописана в стандартах. Многие разработчики по старинке пользуются конструкциями типа <div id=»nav»> для обозначения навигации или других структурных элементов страницы. Тем временем в стандарте HTML есть несколько семантических тегов, которые рекомендуется использовать для разметки страниц вместо <div> и span.
Семантические теги. <header>, <main>, <footer> для крупных смысловых блоков на каждой странице. <nav>, <section>, <article>, <aside> для крупных смысловых разделов в блоках. <h1>-<h6> заголовки для всего документа и заголовки смысловых разделов
По заданию главная страница должна была быть выполненна в точности по образцу. Остальные на своё усмотрение. А в этом проекте, кроме семантических элементов требовалось сделать упор на стили.