Теги и атрибуты

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

Атрибуты

Атрибуты — это дополнительные настройки тега. Пишутся в открывающем теге в виде имя="значение":

<img src="photo.jpg" alt="Моя фотография">
<a href="https://example.com" target="_blank">Сайт</a>

Заголовки: древовидная структура

Заголовки создают иерархию смысла. Не пропускайте уровни: сначала <h1>, потом <h2> и так далее. Так странице проще понимать поисковые системы и скринридеры.

Списки

Три вида списков: маркированный, нумерованный и список определений.

<ul>
  <li>Кофе</li>
  <li>Чай</li>
</ul>

<ol>
  <li>Открыть редактор</li>
  <li>Написать код</li>
  <li>Сохранить файл</li>
</ol>

Форматирование текста

Семантика: <div> и <span> vs осмысленные теги

<div> и <span> — «пустые» обёртки без значения. Но у HTML есть набор семантических тегов, которые несут смысл для людей и машин:

• <header> — шапка страницы или блока;
• <nav> — навигация;
• <main> — главный контент;
• <section>, <article> — смысловые разделы;
• <footer> — подвал;
• <aside> — боковая панель.

<header>
  <nav><a href="#">Главная</a></nav>
</header>
<main>
  <section>
    <h2>Статья</h2>
    <p>Текст статьи...</p>
  </section>
</main>
<footer>© 2026</footer>

Атрибуты data-*

Любые атрибуты с префиксом data- — ваши личные «кармашки» для информации. Их не видно на странице, зато легко читать из JavaScript (урок 9) или CSS:

<button data-action="delete" data-id="42">Удалить</button>
<div data-theme="dark">...</div>

Глобальные атрибуты

Существуют атрибуты, которые работают у любого тега. Самые полезные:

<abbr title="HyperText Markup Language">HTML</abbr>
<p hidden>Этого никто не увидит.</p>

Код в тексте: <pre> и <code>

<code> показывает фрагмент кода в тексте, а <pre> сохраняет форматирование (пробелы и переносы строк). Вместе они идеально показывают примеры:

<pre><code>
  const x = 5;
  console.log(x);
</code></pre>

Правильная вложенность

HTML-теги должны вкладываться по принципу «матрёшки»: открывающий и закрывающий тег не должны пересекаться.

<ul>
  <li>
    <strong>Важно!</strong>
  </li>
</ul>

Неправильно:

<strong><em>пересечение тегов</strong></em>   <!-- так нельзя -->

HTML-сущности

Спецсимволы, которые трудно или нельзя набрать напрямую, записываются как сущности — амперсанд, имя и точка с запятой:

<p>4 &lt; 5 — верно. Пиши &nbsp;&mdash; это знак тире.</p>

<b>/<i> или <strong>/<em>?

Разница между ними — в смысле, а не в виде. <strong> и <em> несут смысловой акцент, а <b>/<i> — только визуальное выделение:

<p><strong>Важно!</strong> Сохранение прошло.</p>
<p>Цена — <b>999 ₽</b></p>   <!-- просто жирный текст -->

Контактный блок: <address>

Тег <address> семантически выделяет контакты автора контента — его удобно находить скриптам и скринридерам:

<address>
  Автор: Иван Иванов,

  <a href="mailto:ivan@mail.ru">ivan@mail.ru</a>

  <a href="tel:+79990000000">+7 999 000-00-00</a>
</address>

Время: <time> и скрыто-раскрывающееся <details>

<time> хранит читаемую машиной дату, а <details>/<summary> создают раскрывающийся аккордеон без JavaScript:

<time datetime="2026-02-14">14 февраля 2026</time>

<details>
  <summary>Показать ответ</summary>
  <p>Текст, скрытый по умолчанию.</p>
</details>

Изображение с подписью: <figure>

Связка «картинка + подпись» оформляется тегами <figure> и <figcaption>:

<figure>
  <img src="team.jpg" alt="Команда проекта">
  <figcaption>Команда WebDev Уроки, 2026</figcaption>
</figure>

Ширина и высота: где указывать

Размеры изображений раньше писали прямо в HTML. Сегодня это делают в CSS, а атрибуты Оставляют для резервирования места — чтобы страница не «прыгала» при загрузке:

<img src="photo.jpg" alt="Пейзаж" width="640" height="480">

Список описаний: dl, dt, dd

Тип списка для терминов и их определений — пара «ключ → значение»:

<dl>
  <dt>HTML</dt>
  <dd>Язык разметки гипертекста</dd>
  <dt>CSS</dt>
  <dd>Каскадные таблицы стилей</dd>
</dl>

Цитаты: blockquote и cite

Длинная цитата — <blockquote>, встроенная в текст — <q>. Источник отмечают <cite>:

<blockquote>
  Хорошо структурированный код читают, как прозу.
  <cite>— Анонимный разработчик</cite>
</blockquote>

<p>Он сказал: <q>Код — это текст</q>.</p>

Линии и разделы: hr

Горизонтальная линия <hr> отделяет смысловые части документа, чтобы между ними не путались читатели:

<h2>Часть первая</h2>
<p>...</p>
<hr>
<h2>Часть вторая</h2>

id в деталях

id — уникальный паспорт элемента: для якорей, JavaScript и CSS-селекторов:

<section id="pricing">Тарифы</section>

<a href="#pricing">К тарифам</a>

<!-- в JS: -->
<script>document.getElementById("pricing")</script>

Классы: группа меток

Класс можно вешать на много элементов и сочетать несколько классов на одном:

<div class="card featured">...</div>
<div class="card">...</div>
<div class="card sale">...</div>

article против section

<article> — самостоятельная единица (пост, новость, комментарий), <section> — тематический раздел:

<section>
  <h2>Новости</h2>
  <article>Новость 1</article>
  <article>Новость 2</article>
</section>

Выделение: mark, small, sub, sup

Мелочи форматирования, которые придают тексту характера:

<mark>Выделено маркером</mark>
<small>мелкий примечательный текст</small>
H<sub>2</sub>O  —  индексы
x<sup>2</sup>  —  степени

Пробелы в HTML: слипание

Браузер съедает лишние пробелы и переводы строк — не пишите «перенос» как несколько Spaces подряд:

<p>Один        пробел</p>   <!-- станет «Один пробел» -->

Переключение языка: lang на фрагменте

Можно сменить язык для отдельных слов — полезна цитатам на иностранном:

<p lang="en">Keep calm and code on.</p>

Datalist: подсказки для поля

<datalist> даёт встроенный список подсказок без JavaScript:

<input list="browsers">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Edge">
</datalist>

Готовый каркас страницы

Прогрессивный «шаблон на каждый день» — открывайте в срок и не изобретайте заново:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Название</title>
</head>
<body>
  <header>Шапка</header>
  <main>Контент</main>
  <footer>Подвал</footer>
</body>
</html>

Как смотреть HTML глазами

«Сырую» разметку любой живой страницы видно без всяких инструментов:

• Ctrl+U — исходник текущей страницы;
• DevTools → Elements — живой HTML с уже применёнными правками браузера;
• Скопировать элемент и вставить в свой файл — быстрый черновик.

Тренировка

Соберите блок «О себе» на странице:

1. Заголовок <h1> с вашим именем.
2. Нумерованный список «Мои навыки» из 3 пунктов.
3. Вложенный маркированный список внутри одного из навыков.
4. Добавьте в <head> тег <meta name="description" content="...">.

Подсказка: картинки и ссылки — наш следующий урок.