Добро пожаловать на тринадцатый урок. Сегодня поговорим про правильный выбор HTML-тегов: где и как их использовать. 

Семантические теги в HTML, такие как header, main, footer, помогают поисковым системам и пользователям понять, какая часть страницы содержит какую информацию. Например, header используется для обозначения верхней части страницы, где обычно находятся логотип, навигация и другие элементы. Main обозначает основное содержимое страницы, а footer — нижнюю часть страницы, где обычно размещаются контактная информация, ссылки на политику конфиденциальности и т. д.

Для чего же нужны теги? Чтобы поднимать сайт на странице поиска и выводить его при определённых запросах. Семантические теги помогают браузерам и поисковым системам лучше понимать структуру и содержание сайта. Это улучшает индексирование и ранжирование в результатах поиска. 

Хорошо структурированная семантическая разметка часто приводит к лучшим позициям поисковой выдачи, привлекая больше органического трафика. Поисковые системы, такие как Google, активно используют семантическую информацию для понимания контекста, иерархии в информации на странице. 

А ещё они обеспечивают доступность для людей с инвалидностью. Например, они нужны тем, кто использует скринридеры — программы, позволяющие озвучивать текст на экране компьютера, планшета или телефона.

Для начала давайте посмотрим на макет и его структуру. В верхней части находится шапка сайта, или, по-другому, header. Она содержит логотип, меню и другие элементы, как вы ещё, наверное, помните из прошлого урока. 

В нижней части находится подвал сайта, или, по-другому, footer, который содержит политику конфиденциальности, контактную информацию и другие элементы. 

Всё, что между ними (вот это), — основной контент, или main. В свою очередь, основной контент делится на большие блоки — секции. Вот это секция, вот секция, вот секция, вот это секция… Это всё секции. Причём секция должна в себе содержать обязательно заголовок: «О нас», «Наша продукция», «Акции», «Новинки», «Отзывы» и т. д. 

Вот этот блок с преимуществами, хотя и не содержит заголовок, — но это тоже секция. Для неё нужно сделать заголовок, например «Преимущества». Скрыть в Elementor во вкладке «Адаптивность» на всех устройствах. Он не будет отображаться на сайте, но это нужно для того, чтобы незрячие люди могли использовать скринридер и таким образом могли считать данные. Вы должны помнить из предыдущих уроков, как это делается. 

Например, заходим в «Расширенные», «Адаптивность» и скрываем на всех устройствах.

Вот эти небольшие блоки в секции — к ним применяется тег article. На самом деле тоже не ко всем, а где используется заголовок. Например, «Карточки товаров», «Статьи» или другие элементы. Например, вот этот.

Посмотрим на заголовки. На странице должен быть только один заголовок первого уровня — H1. Он самый главный. Он должен показывать, о чём эта страница. Здесь заголовком H1 будет «Гармония природы». Остальные заголовки, «О нас», «Наша продукция», «Акции» и т. д., будут заголовками второго уровня — H2. А уже в блоках будут заголовки третьего уровня — H3. 

На прошлом уроке мы создали шапку сайта и подвал. Пришло время правильно их назвать. Это нужно делать обязательно. Для этого можно нажать на эту зелёную область или перейти в «Конструктор тем». Нажимаем, выбираем header, «Редактировать» и в «Настройках» в поле «HTML-тег» из выпадающего списка выбираем header. Обновляем. И теперь наша шапка будет заключена в тег header. В этом можно убедиться, посмотрев в коде. Давайте посмотрим. 

Как вы видите, наша шапка заключена в правильный тег header. Основной контент автоматически уже заключён в тег main, а наш подвал до сих пор в теге div. Это надо обязательно исправить. Поэтому заходим в редактор. Можно в «Конструктор тем» или нажать на эту зелёную область. Также выбираем в настройках footer, обновляем и убеждаемся, что у нас подобрался правильный тег. Header и footer, а между ними основной контент — main.

Перейдём на нашу главную страницу. Здесь тоже важно сделать все теги правильными. Как я и сказал, Elementor весь основной контент уже оборачивает в тег main. Важно: этот тег на странице может быть только один. Поэтому не надо его использовать, хотя он и есть в настройках. Как я и сказал, он уже автоматически используется по умолчанию. 

Давайте зададим правильные теги секциям и блокам. Например, вот это будет секция. «Дополнительные опции». В HTML-тег выбираем section. Главный заголовок у нас должен быть под тегом H1. 

Текстовые редакторы уже автоматически подставляют тег <p>. 

Вот этой секции мы тоже зададим HTML-тег section, так как у нас есть заголовок. У него правильный HTML-тег — H2. Вот этой секции мы не будем ничего задавать. Поставим по умолчанию, так как у неё нет заголовка. А вот этой секции мы тоже зададим правильный — section. А вот этим блокам мы уже зададим HTML-тег article, так как у нас здесь есть заголовок. 

Давайте посмотрим. Тут уже HTML-тег — H3. К этим заголовкам, так как у нас просто здесь текст, можно использовать тег <p>. 

Итак, сегодня мы узнали, какая у HTML-страницы должна быть правильная вёрстка, а также что такое семантические теги, где они расположены и что дают страницы поисковым системам и людям с инвалидностью.

На сегодня у меня всё. Увидимся на следующем уроке. Пока.