Семантическая верстка

Никита Калашников
Проще говоря, семантика нужна для правильной разметки структуры страницы и использования логически правильных блоков.
Это упростить работу поисковым роботам и позволит лучше сканировать страницы вашего сайта, а значит выше поднимать в поисковой выдаче. А пользователи будут получать более качественный и структурированный контент, который легче воспринимается.

Зачем она нужна
Есть две основные задачи:
- Улучшение индексации роботами.
Когда поисковый робот видит семантические html-теги, он точно понимает за что отвечает содержимое тега. Поэтому выбирая между двумя сайтами одной тематики, предпочтение в выдаче будет отдано сайту с семантической разметкой - Повышение доступности сайта.
Удобство сайта - один из ключевых параметров, которые также учитываются поисковыми системами. Удобным сайт должен быть и для людей с нарушением/потерей зрения. Пользователи с такими особенностями используют специальные программы — скринридеры. Эти программы которые “читают” и озвучивают содержимое страницы при наведении мыши или при помощи пальца. Чем лучше семантическая HTML разметка сайт, тем понятнее программа будет описывать блок и его содержимое для пользователя
Влияние на сео
Влияние семантической верстки на сео сайта:
- Облегчает верстку адаптивного дизайна
- Облегчает внедрение микроразметки Schema.org
- Чистый, оптимизированный код способствует быстрой загрузке страницы, что положительно влияет на лояльность поисковых систем
- Google использует семантические теги для определения релевантности содержимого, что влияет на ранжирование страниц в SERP
Основные семантические теги
<header> - определяет содержание, которое следует рассматривать как вводную информацию страницы или раздела.
<nav> - используется для ссылок навигации. Его можно расположить внутри тега <header>, но вторичные теги <nav> для навигации также часто используются в других частях страницы, например в сайдбаре.
<main> - содержит основное содержание (также называемое телом) страницы. На странице должен присутствовать только один тег.
<article> - независимая, отделяемая смысловая единица, например комментарий, твит, статья, пост и т.д.
<section> - это способ группировки близкого контента по схожей теме.
<aside> - определяет менее важное содержание. Его часто используют для сайдбаров
<footer> - используется в нижней части страницы (подвале). Обычно включает контактную информацию, авторские права и некоторую навигацию
по сайту.
<h1> - Тег H1 обозначает заголовок верхнего уровня. Обычно на странице есть только один заголовок H1.
<h2> до <h6> - Подзаголовки разных уровней важности. На одной странице может быть несколько заголовков одного уровня.
<p> - Отдельный параграф текста.
<a> - Используется для создания гиперссылок с одной страницы на другую.
<ol> - Список элементов, отображаемых в определенном порядке, начиная с маркеров. Тег <li> (элемент списка) содержит один элемент списка.
<ul> - Список элементов, которым необязательно следовать определенному порядку, начиная с маркеров. Тег <li> (элемент списка) содержит один
элемент списка.
<q> / <blockquote> - Цитата текста. Используйте <blockquote> для длинных многострочных цитат и <q> для коротких встроенных цитат.
<em> - Используется для текста, который нужно выделить.
<strong> - Используется для текста, который нужно особенно выделить.
<code> - Блок компьютерного кода.