Текст, Заголовки и Абзацы

С возвращением.

В предыдущем уроке ты изучил структуру HTML-документа.

Теперь переходим к самому контенту.

Текст.

Заголовки.

Абзацы.

То, что люди действительно читают.

Потому что веб-страница без организованного текста — это просто стена слов.

А никто не хочет сражаться со стеной слов до завтрака.

Что Ты Изучишь

В этом уроке ты узнаешь:

• как работают заголовки в HTML;
• разницу между h1, h2, h3 и другими уровнями;
• как писать абзацы через p;
• как выделять важный текст через strong и em;
• когда использовать br;
• когда использовать hr;
• как делать структуру текста понятной и читаемой.

Заголовки в HTML

HTML имеет шесть уровней заголовков:

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

Самый важный заголовок — h1.

Обычно страница должна иметь один главный h1.

Думай о нём как о названии страницы.

Потом используй h2 для больших разделов, h3 для подразделов и так далее.

Как в книге:

Название Книги
  Глава
    Раздел
      Меньшая часть

HTML-заголовки — это не просто размер текста.

Они описывают структуру.

Это важно для:

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

Хорошая Структура Заголовков

Пример:

<h1>Мой Блог о Путешествиях</h1>

<h2>Поездка в Рим</h2>
<p>Рим полон истории, еды и людей, которые переходят дорогу так, будто у них дипломатический иммунитет.</p>

<h2>Поездка в Милан</h2>
<p>Милан элегантный, быстрый и почему-то всегда носит обувь лучше твоей.</p>

<h3>Любимые Места в Милане</h3>
<p>Собор, галереи и каждое место, где кофе появляется быстро.</p>

Эта структура имеет смысл.

h1 — тема страницы.

Элементы h2 — главные разделы.

h3 — меньший раздел внутри одного из этих разделов.

Хорошая структура спокойная.

Плохая структура — это пакет из магазина, полный тегов.

Не Пропускай Уровни Заголовков

Старайся не прыгать с h1 сразу к h4.

Это не идеально:

<h1>Моя Страница</h1>
<h4>Маленький Раздел</h4>

Лучше:

<h1>Моя Страница</h1>
<h2>Маленький Раздел</h2>

Уровни заголовков должны идти логично.

Не потому, что браузер взорвётся.

Не взорвётся.

А потому, что контент станет легче понять.

А мы любим контент, который не ведёт себя как пазл, придуманный уставшим енотом.

Абзацы

Абзацы создаются тегом p:

<p>Это абзац.</p>

Абзац — это блок текста.

Пример:

<p>HTML помогает нам чётко структурировать веб-страницы.</p>
<p>Каждый абзац должен содержать одну мысль или маленькую группу связанных мыслей.</p>

Не клади весь текст в один гигантский абзац.

Это больно:

<p>Это очень длинный текст с множеством мыслей и без пауз, и читатель теперь застрял в туннеле слов без выхода и без кофе.</p>

Лучше:

<p>Это первая мысль.</p>
<p>Это вторая мысль.</p>
<p>Это третья мысль.</p>

Читаемый текст — дружелюбный текст.

Важный Текст

Используй strong для важного текста:

<p>Это <strong>очень важно</strong>.</p>

Браузер обычно показывает strong жирным шрифтом.

Но значение важнее внешнего вида.

strong означает, что текст имеет сильную важность.

Используй его, когда что-то действительно важно.

Не каждые три слова.

Если всё важно, тогда ничего не важно.

И страница начинает кричать.

Выделенный Текст

Используй em для акцента:

<p>Мне <em>очень</em> нравится чистый HTML.</p>

Браузер обычно показывает em курсивом.

Но снова, значение важно.

em меняет акцент в предложении.

Пример:

<p>Я сказал, что люблю HTML.</p>
<p>Я сказал, что <em>люблю</em> HTML.</p>

Второе предложение подчёркивает слово “люблю”.

Маленький тег.

Другое ощущение.

HTML бывает хитрым.

Перенос Строки

Тег br создаёт перенос строки:

<p>Первая строка<br>Вторая строка</p>

br не требует закрывающего тега.

Он может быть полезен для:

• адресов;
• стихов;
• коротких переносов, где перенос имеет смысл.

Пример:

<p>
  Viktor Holovin<br>
  Vigevano, Italy<br>
  Web Developer
</p>

Не используй br просто для создания пространства между секциями.

Это нехорошо:

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

Для отступов лучше CSS.

HTML — для структуры.

CSS — для внешнего вида.

Не заставляй HTML делать работу CSS.

У него уже есть работа.

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

Тег hr создаёт тематическую паузу:

<hr>

Он означает изменение или разделение контента.

Пример:

<h2>Обо Мне</h2>
<p>Я создаю сайты и изучаю технологии шаг за шагом.</p>

<hr>

<h2>Контакт</h2>
<p>Можно связаться со мной через email.</p>

Используй hr, когда есть реальное разделение контента.

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

Это уже декорация.

CSS займётся декорациями позже.

Пусть HTML сохраняет достоинство.

Создай Страницу для Практики

Создай новый файл:

touch text.html

Добавь это:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Практика Текста</title>
</head>
<body>
  <h1>Практика Текста</h1>

  <h2>Об Этой Странице</h2>
  <p>Эта страница помогает мне практиковать заголовки и абзацы в HTML.</p>
  <p>Хорошая структура текста делает страницу легче для чтения.</p>

  <h2>Важная Заметка</h2>
  <p>HTML — это про <strong>структуру</strong>, а не декорацию.</p>
  <p>Я изучаю его <em>шаг за шагом</em>.</p>

  <hr>

  <h2>Контакт</h2>
  <p>
    Viktor Holovin<br>
    Web Developer<br>
    Italy
  </p>
</body>
</html>

Открой её в браузере.

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

Маленькая страница.

Правильно структурированная страница.

Очень солидно.

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

Использовать Заголовки Только для Размера

Это неправильное мышление:

<h1>Большой текст</h1>
<h6>Маленький текст</h6>

Заголовки — это не просто размер шрифта.

Это структура.

Используй их для организации контента.

Слишком много h1

Обычно страница должна иметь один главный h1.

Лучше:

<h1>Моя Страница</h1>
<h2>Обо Мне</h2>
<h2>Контакт</h2>

Не так:

<h1>Моя Страница</h1>
<h1>Обо Мне</h1>
<h1>Контакт</h1>

Странице не нужны три короля.

Одного достаточно.

Использовать br для Layout

Не используй много br, чтобы создавать отступы.

Плохо:

<br>
<br>
<br>

Для визуальных отступов позже будет CSS.

HTML должен описывать значение.

Практика

Создай страницу о хобби.

Она должна содержать:

• один h1;
• минимум два раздела h2;
• один подраздел h3;
• четыре абзаца;
• один элемент strong;
• один элемент em;
• один hr;
• один пример с br.

Примеры тем:

• карате;
• программирование;
• йога;
• путешествия;
• кулинария;
• изучение языков.

Выбери что-то реальное, если можешь.

Реальный текст лучше фейкового.

Фейковый текст не имеет души.

Мини-Задание

Создай файл:

article.html

Построй простую страницу статьи.

Она должна содержать:

• title во вкладке браузера;
• название статьи как h1;
• вступительный абзац;
• три раздела с h2;
• один подраздел с h3;
• выделенные слова;
• важные слова;
• финальную горизонтальную линию;
• короткий блок автор/контакт с br.

Без CSS.

Без JavaScript.

Только чистая HTML-структура текста.

Итог

Сегодня ты узнал, что:

• HTML имеет шесть уровней заголовков от h1 до h6;
• h1 обычно является главным заголовком страницы;
• уровни заголовков должны идти логично;
• p создаёт абзацы;
• strong обозначает важный текст;
• em обозначает текст с акцентом;
• br создаёт осмысленный перенос строки;
• hr создаёт тематическую паузу;
• HTML-текст должен быть организованным, читаемым и осмысленным.

Текст — сердце большинства веб-страниц.

Если структура ясная, страница сразу становится лучше.

Даже до того, как CSS придёт в солнцезащитных очках.

Следующий Урок

В следующем уроке мы изучим списки и организацию.

Потому что иногда контенту нужен порядок.

А иногда ему нужны маркеры.

Очень драматичные маркеры.