Урок 03

Текстовые теги и заголовки

Заголовки h1–h6

<h1>Главный заголовок страницы</h1>
<h2>Подзаголовок раздела</h2>
<h3>Подзаголовок подраздела</h3>
<h4>Ещё мельче</h4>
<h5>Совсем мелко</h5>
<h6>Минимальный</h6>

Что важно:

  • Смысловая иерархия, не размер.
  • Один <h1> на странице.
  • Не пропускать уровни: h1 → h2 → h3.
  • Стили задаются через CSS, не размером тега.

Правило: заголовки — структура документа, как в книге.

Абзацы

<p>Первый абзац текста.</p>
<p>Второй абзац.</p>

Не использовать <br> для отбивки абзацев. Это разные абзацы → разные <p>.

<br> — только для переноса строки внутри абзаца:

<p>
    ул. Ленина, д. 5<br>
    Москва, 101000
</p>

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

Смысловые теги (предпочтительно):

<strong>Важно</strong>
<em>Акцент</em>
<mark>Выделено</mark>
<small>Мелкий текст</small>
<del>Удалено</del>
<ins>Добавлено</ins>
<sub>Нижний индекс</sub>
<sup>Верхний индекс</sup>
<code>инлайн-код</code>
<kbd>Ctrl+C</kbd>
<samp>вывод программы</samp>
<var>переменная</var>

Визуальные (по смыслу — редко):

<b>Жирный визуально</b>
<i>Курсив визуально</i>
<u>Подчёркнутый</u>

Разница:

  • <strong> — важность (скринридер выделит).
  • <b> — просто жирный, без смысла.

Правило: использовать смысловые теги. Визуальные — только когда смысл не нужен (например, стилистическое оформление).

Цитаты

Блочная:

<blockquote cite="https://example.com/article">
    <p>Цитата длиной в абзац или больше.</p>
    <footer>— <cite>Автор</cite></footer>
</blockquote>

Инлайн:

<p>Он сказал <q>привет</q> и ушёл.</p>

Что даёт: браузер сам добавит кавычки для <q>.

Аббревиатуры

<p>
    <abbr title="HyperText Markup Language">HTML</abbr> —
    язык разметки.
</p>

Что даёт: подсказка при наведении, понимание для скринридеров.

Адрес

<address>
    Иван Иванов<br>
    <a href="mailto:ivan@example.com">ivan@example.com</a><br>
    ул. Ленина, 5, Москва
</address>

Что даёт: семантически — контактная информация.

Горизонтальная линия

<hr>

Что даёт: тематический разделитель. Не «декоративная линия» — для этого CSS.

Предформатированный текст

<pre>
    function hello() {
        console.log("Hello");
    }
</pre>

Что даёт: сохранение пробелов и переносов.

С кодом:

<pre><code>const x = 5;</code></pre>

Правило: <pre> для многострочного, <code> — внутри.

Вложенность заголовков

Правильно:

<h1>Курсы</h1>
    <h2>Laravel</h2>
        <h3>Основы</h3>
        <h3>Eloquent</h3>
    <h2>React</h2>
        <h3>Хуки</h3>

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

<h1>Курсы</h1>
    <h3>Laravel</h3>   <!-- пропущен h2 -->

Правило: не пропускать уровни. Это как дерево.

Семантика важнее размера

Плохо:

<p style="font-size: 32px; font-weight: bold;">Заголовок</p>

Хорошо:

<h2>Заголовок</h2>
<style>h2 { font-size: 32px; }</style>

Почему:

  • Скринридеры.
  • Поисковики.
  • Стили меняются централизованно.

Инлайн-элементы vs блочные

Блочные (на новой строке):

<p>, <h1>–<h6>, <div>, <section>, <article>, <ul>, <ol>, <li>, <blockquote>, <pre>, <hr>, <header>, <footer>, <main>, <nav>, <aside>

Инлайн (внутри строки):

<span>, <a>, <strong>, <em>, <b>, <i>, <code>, <abbr>, <q>, <mark>, <small>, <sub>, <sup>, <kbd>, <samp>, <var>, <del>, <ins>

Что важно: блочные не могут быть внутри инлайн.

<!-- Ошибка -->
<p>Текст <div>блок</div></p>

<!-- Правильно -->
<p>Текст <span>инлайн</span></p>

Пробелы в HTML

Несколько пробелов = один:

<p>а     б</p>
<!-- Отрендерится как «а б» -->

Сохранить пробелы:

  • <pre> — все пробелы.
  • &nbsp; — неразрывный пробел.

Правило: форматирование HTML в редакторе не влияет на рендер (кроме <pre>).

Спецсимволы

Мнемоники:

&lt;      <!-- < -->
&gt;      <!-- > -->
&amp;     <!-- & -->
&quot;    <!-- " -->
&nbsp;    <!-- неразрывный пробел -->
&copy;    <!-- © -->
&mdash;   <!-- — -->
&ndash;   <!-- – -->
&hellip;  <!-- … -->
&times;   <!-- × -->
&rarr;    <!-- → -->

Когда: для <, > и & в тексте — обязательно. Остальные — по необходимости.

Пример: статья

<article>
    <h1>Что нового в Laravel 12</h1>

    <p>
        В <time datetime="2026-10-15">октябре 2026</time> вышла
        новая версия <abbr title="PHP-фреймворк">Laravel</abbr>.
    </p>

    <h2>Главные изменения</h2>

    <p>
        <strong>Новый синтаксис</strong> роутинга и
        улучшенный <code>Eloquent</code>.
    </p>

    <blockquote>
        <p>Laravel делает разработку приятной.</p>
        <footer>— <cite>Тейлор Отвелл</cite></footer>
    </blockquote>

    <h2>Что дальше</h2>

    <p>Подробнее — в <a href="/docs">документации</a>.</p>

    <hr>

    <small>Обновлено: <time datetime="2026-10-16">16.10.2026</time></small>
</article>

Практика

1. Свёрстайте статью:

  • <h1> — заголовок.
  • 2-3 <h2> — разделы.
  • Абзацы <p>.
  • <strong>, <em> для акцентов.
  • <blockquote> для цитаты.
  • <abbr> для терминов.
  • Спецсимволы где нужно.

2. Проверьте:

  • Структура заголовков в DevTools.
  • Валидность.

Частые ошибки

1. Несколько <h1>:

Сбивает SEO

Решение: один h1.

2. Пропуск уровней:

<h1>...</h1>
<h3>...</h3>   <!-- пропущен h2 -->

Решение: последовательно.

3. <br> для абзацев:

<p>Абзац 1<br><br>Абзац 2</p>

Решение: два <p>.

4. <b> вместо <strong>:

Нет смысла для скринридеров

Решение: <strong>.

5. Блочный внутри инлайн:

<p><div>...</div></p>

Решение: убрать <div> или разбить <p>.

6. Текст без тега:

<div>
    Текст без <p>
</div>

Решение: оборачивать в <p>.

7. Заголовки для стиля:

<h3>Мелкий текст</h3>

Решение: <p> + CSS.

8. Отсутствие <time>:

<p>Опубликовано 15 октября</p>

Решение: <time datetime="2026-10-15">.

Итог

  • <h1> — один на странице.
  • Уровни не пропускать.
  • <p> для абзацев, не <br>.
  • <strong>, <em> — смысловые.
  • <blockquote>, <q> — цитаты.
  • <pre><code> — код.
  • <abbr> — аббревиатуры.
  • Спецсимволы: &lt;, &gt;, &amp;.
  • Блочный не внутри инлайн.
  • Семантика важнее вида.

Дальше — ссылки, изображения, медиа.