Семантическая разметка — это использование HTML-тегов, которые не только структурируют содержимое веб-страницы, но и придают ему смысл
Использование семантических тегов улучшает читаемость кода и помогает поисковым системам лучше понимать структуру страницы.
-
<header> и <footer>:
-
Обычно элементы <header> (верхний колонтитул) и <footer> (нижний колонтитул) располагаются за пределами элемента <main>.
-
Они содержат информацию, которая не является основной частью содержимого страницы (например, логотип, навигация, контактная информация).
-
<main>:
-
Элемент <main> используется для обертывания основного содержимого веб-страницы.
-
Внутри <main> могут находиться как семантические элементы (например, <section>, <article>), так и несемантические (например, <div>).
-
На странице должен быть только один элемент <main>.
-
<section>:
-
Элемент <section> обычно используется для группировки связанного контента, который имеет общий заголовок и абзацы.
-
Должен иметь заголовок (<h1>-<h6>).
-
Пример использования: раздел страницы, глава статьи или тематический блок.
-
<article>:
-
Элемент <article> предназначен для самостоятельного контента, который может быть изолирован от остальной части страницы.
-
Также должен иметь заголовок.
-
Пример использования: статья в блоге, комментарий, карточка товара или новостной блок.
