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