Проще говоря, семантика нужна для правильной разметки структуры страницы и использования логически правильных блоков.
Это упростить работу поисковым роботам и позволит лучше сканировать страницы вашего сайта, а значит выше поднимать в поисковой выдаче. А пользователи будут получать более качественный и структурированный контент, который легче воспринимается.
Пример не правильной и правильной разметки страницы
Зачем она нужна
Есть две основные задачи:
Улучшение индексации роботами. Когда поисковый робот видит семантические 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> - Используется для текста, который нужно особенно выделить.