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

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

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

Зачем она нужна

Есть две основные задачи:

1. Улучшение индексации роботами.
   Когда поисковый робот видит семантические html-теги, он точно понимает за что отвечает содержимое тега. Поэтому выбирая между двумя сайтами одной тематики, предпочтение в выдаче будет отдано сайту с семантической разметкой
2. Повышение доступности сайта.
   Удобство сайта - один из ключевых параметров, которые также учитываются поисковыми системами. Удобным сайт должен быть и для людей с нарушением/потерей зрения. Пользователи с такими особенностями используют специальные программы — скринридеры. Эти программы которые “читают” и озвучивают содержимое страницы при наведении мыши или при помощи пальца. Чем лучше семантическая 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> - Блок компьютерного кода.