Семантические теги помогают браузеру и поисковым системам понять структуру и смысл вашего контента. Они делают код более понятным, улучшают SEO и доступность для экранных читалок.

[spoiler]

1. Структурные теги

Тег	Назначение	Пример
<header>	Заголовок страницы или раздела	<header><h1>Мой сайт</h1></header>
<footer>	Нижний колонтитул, информация об авторе или копирайт	<footer>© 2026 Nikovit</footer>
<main>	Основной контент страницы	<main><article>...</article></main>
<section>	Логический раздел страницы	<section><h2>Новости</h2></section>
<article>	Независимый блок контента (статья, пост)	<article><h2>Статья</h2><p>...</p></article>
<nav>	Навигационное меню	<nav><ul><li><a href="/">Главная</a></li></ul></nav>
<aside>	Боковая панель, дополнительная информация	<aside>Реклама, ссылки, виджеты</aside>
<figure>	Блок с изображением и подписью	<figure><img src="img.jpg"><figcaption>Описание</figcaption></figure>
<address>	Контактная информация	<address>г. Омск, ул. Ленина</address>

2. Текстовые семантические теги

Тег	Назначение	Пример
<h1> – <h6>	Заголовки разных уровней	<h1>Главная</h1>
<p>	Абзац текста	<p>Привет, мир!</p>
<blockquote>	Цитата	<blockquote>Цитата великого человека</blockquote>
<cite>	Источник цитаты	<cite>Ницше</cite>
<mark>	Выделение текста	<p>Обратите внимание на <mark>важное</mark></p>
<strong>	Важный текст (жирный)	<strong>Срочно!</strong>
<em>	Акцент на слове (курсив)	<em>Не пропустите</em>
<code>	Фрагмент кода	<code>console.log('Hello');</code>
<time>	Время или дата	<time datetime="2026-03-09">9 марта 2026</time>

3. Таблицы и списки

Тег	Назначение	Пример
<ul>	Ненумерованный список	<ul><li>Пункт 1</li></ul>
<ol>	Нумерованный список	<ol><li>Первый</li></ol>
<li>	Элемент списка	<li>Пункт</li>
<table>	Таблица	<table><tr><td>Ячейка</td></tr></table>
<caption>	Подпись таблицы	<caption>Таблица цен</caption>
<thead>	Заголовок таблицы	<thead><tr><th>Имя</th></tr></thead>
<tbody>	Основная часть таблицы	<tbody><tr><td>Ник</td></tr></tbody>
<tfoot>	Нижний колонтитул таблицы	<tfoot><tr><td>Итого</td></tr></tfoot>

4. Мультимедиа

Тег	Назначение	Пример
<img>	Изображение	<img src="logo.png" alt="Логотип">
<audio>	Аудио	<audio controls src="audio.mp3"></audio>
<video>	Видео	<video controls><source src="video.mp4" type="video/mp4"></video>
<source>	Источник мультимедиа	Внутри <audio> или <video>
<iframe>	Встраиваемый контент (карта, видео)	<iframe src="https://www.youtube.com/..."></iframe>;

5. Формы

Тег	Назначение	Пример
<form>	Форма	<form action="/send.php" method="post"></form>
<label>	Подпись к полю	<label for="name">Имя</label>
<input>	Поле ввода	<input type="text" id="name">
<textarea>	Текстовое поле	<textarea></textarea>
<button>	Кнопка	<button type="submit">Отправить</button>
<select>	Выпадающий список	<select><option>1</option></select>
<option>	Элемент списка	<option>Выбор</option>

6. Семантические атрибуты

• alt – описание изображения

• title – подсказка при наведении

• lang – язык содержимого

• datetime – дата и время для <time>

Совет: всегда использовать семантические теги

1. Улучшается SEO – поисковики понимают структуру.

2. Доступность – экранные читалки лучше ориентируются.

3. Код чище и понятнее для разработчиков.