Урок 2.2 — Текст и заголовки: p, h1–h6
В этом уроке мы изучим абзацы, перенос строк, все заголовки от h1 до h6, комментарии и научимся создавать страницы с текстом.
Что мы узнаем в этом уроке
В прошлом уроке мы научились создавать заголовок h1. Теперь пришло время расширить наши возможности. В этом уроке мы познакомимся с четырьмя новыми вещами:
Никаких других тегов! Только p, br, h1–h6 и комментарии. Мы учимся маленькими шагами.
Тег p — абзац текста
Буква p означает paragraph — в переводе с английского «абзац». Тег p — это самый главный тег для текста на веб-странице. Почти любой текст, который вы видите на сайтах, находится внутри тегов p.
Вот как он выглядит:
<h1>Мой первый сайт</h1>
<p>Это мой первый абзац текста. Я только учусь создавать веб-страницы.</p>Разберём по частям:
<p> — говорит браузеру: «Сейчас начнётся абзац».</p> — говорит браузеру: «Абзац закончился».Как браузер показывает абзац? Он начинает его с новой строки и добавляет небольшой отступ сверху и снизу. Если у вас два абзаца, между ними будет пустое пространство — это нормально, так и должно быть.
<p>Это первый абзац. Он рассказывает о чём-то важном.</p>
<p>А это второй абзац. Он продолжает мысль или начинает новую.</p>Попробуйте создать файл с двумя абзацами. Сохраните, откройте в браузере. Вы увидите два блока текста, отделённых друг от друга пустым пространством.
💡 Абзац — это блочный элемент
«Блочный» значит, что он занимает всю ширину страницы и начинается с новой строки. Представьте кирпичики в стене: каждый кирпич — это один блочный элемент. Они кладутся друг за другом, каждый с новой строки. Запомните: p, h1–h6 — это блочные элементы. Они всегда с новой строки.
Тег br — перенос строки
Буквы br означают line break — в переводе «разрыв строки». Этот тег переносит текст на следующую строку. Он одиночный (самозакрывающийся) — у него нет закрывающего тега.
Вот как он выглядит:
<p>
Россия, г. Москва, ул. Тверская, д. 10<br>
Телефон: +7 (495) 123-45-67<br>
Email: info@example.com
</p>В этом примере адрес написан в одном абзаце p, но с помощью br мы разбили его на три строки. Без br весь текст был бы одной длинной строкой.
Важно! Тег br — одиночный. Он не требует закрывающего тега. Просто пишите <br> там, где нужно перенести строку. Иногда в старых учебниках пишут <br /> — с пробелом и слешем. Это тоже правильно, но в HTML5 можно писать просто <br>.
⚠️ Не используйте br для отступов между абзацами!
Иногда новички пишут: <p>Текст</p><br><br><p>Ещё текст</p> — так делать НЕЛЬЗЯ. Для отступов между абзацами браузер и так добавляет расстояние автоматически. А br нужен только для переноса строки внутри одного абзаца. Если вам нужно больше отступов — этим занимается CSS, но до него мы дойдём позже.
Где использовать br?
💡 Одиночные vs парные теги
Большинство тегов в HTML — парные (есть открывающий и закрывающий). Но есть и одиночные: br (перенос строки), hr (горизонтальная линия), img (изображение), input (поле ввода). Одиночным тегам не нужен закрывающий тег, потому что у них нет содержимого. Они сами по себе что-то делают или показывают.
Заголовки h1, h2, h3, h4, h5, h6
В прошлом уроке мы изучили h1 — самый главный заголовок. Но в HTML есть целых шесть уровней заголовков: от h1 (самый важный) до h6 (самый мелкий). Вот они все:
<h1>Главный заголовок страницы</h1>
<h2>Заголовок раздела</h2>
<h3>Заголовок подраздела</h3>
<h4>Заголовок пункта</h4>
<h5>Заголовок подпункта</h5>
<h6>Самый маленький заголовок</h6>В браузере они выглядят по-разному: h1 — самый крупный и жирный, h6 — самый мелкий. Но запомните: размер不重要! Внешний вид заголовков можно изменить с помощью CSS. Важна именно иерархия — то есть смысловая вложенность.
Вот как выглядит правильная иерархия на примере статьи:
<h1>Как испечь пирог</h1>
<h2>Ингредиенты</h2>
<h3>Для теста</h3>
<h3>Для начинки</h3>
<h2>Приготовление</h2>
<h3>Замешиваем тесто</h3>
<h3>Готовим начинку</h3>
<h3>Выпекаем</h3>
<h4>Температура и время</h4>
<h2>Подача</h2>Видите иерархию? h1 — название всего рецепта. h2 — крупные разделы (ингредиенты, приготовление, подача). h3 — подразделы внутри (для теста, для начинки и т.д.). h4 — ещё более мелкий подраздел. Это похоже на книгу: название книги (h1) → названия глав (h2) → названия параграфов (h3) → подпараграфы (h4).
💡 Правила иерархии заголовков
1. Один h1 на страницу. Только один. Как у книги одно название.
2. Не перескакивайте уровни. После h1 идёт h2, потом h3 и так далее. Не делайте h1 → h4 → h2. Это сбивает с толку и поисковики, и читателей.
3. Можно опускать уровни, если это оправданно. Например, если после h1 сразу идёт h3, это странно. Но если у вас h1 → h2 → h4 — это уже неправильно. Пропускать можно только если вы уверены, что так нужно.
4. Не используйте заголовки для изменения размера текста. Если вам нужен просто крупный текст — это не повод брать h3. Для изменения размера есть CSS. Заголовки нужны для СМЫСЛА, а не для внешнего вида.
⚠️ Почему важна иерархия заголовков
Поисковые системы (Google, Яндекс) анализируют заголовки на странице, чтобы понять её структуру и содержание. Если иерархия правильная \u2014 сайт лучше ранжируется в поиске. Также скринридеры (программы для незрячих) используют заголовки для навигации по странице. Правильная иерархия \u2014 это не просто «хороший тон», а забота о пользователях и SEO.
Создаём страницу с заголовками и абзацами
А теперь давайте создадим полноценную страницу, используя всё, что мы изучили: заголовки, абзацы и переносы строк.
Пошаговая инструкция:
<h1>Мой первый полноценный сайт</h1>
<p>Привет! Меня зовут Александр, и это моя первая веб-страница с текстом. Я учусь создавать сайты.</p>
<h2>Чему я учусь</h2>
<p>На курсе HTML/CSS я изучаю, как устроены веб-страницы. Пока я знаю заголовки и абзацы.</p>
<h3>Заголовки</h3>
<p>В HTML есть заголовки от h1 до h6. h1 \u2014 самый главный, h6 \u2014 самый маленький.</p>
<h3>Абзацы</h3>
<p>Абзацы создаются тегом p. Они нужны для обычного текста. Между абзацами браузер сам добавляет отступы.</p>
<h2>Мои контакты</h2>
<p>
Email: alex@example.com<br>
Телефон: +7 (999) 123-45-67<br>
Город: Москва
</p>my-site.html (File \u2192 Save As...).
💡 Проверьте иерархию
Посмотрите на страницу в браузере. Заголовки выглядят крупнее и жирнее, чем абзацы. h1 больше, чем h2, а h2 больше, чем h3. Это правильная иерархия. Если бы мы написали h2 сразу после h1, а потом снова h1 \u2014 это было бы неправильно.
Комментарии в HTML
Комментарии \u2014 это текст, который видите только вы (разработчик), но не видят пользователи на странице. Они нужны для пояснения кода, временного отключения частей страницы или заметок для себя и других разработчиков.
Комментарий начинается с <!-- и заканчивается -->. Всё, что между ними, браузер игнорирует.
<h1>Заголовок</h1>
<p>Абзац текста</p>
<!-- <p>Этот абзац временно отключен</p> -->Комментарии очень полезны:
<!-- Раздел "О компании" \u2014 начало -->
⚠️ Не оставляйте пароли в комментариях
Комментарии видны в исходном коде страницы! Любой может открыть ваш HTML-файл и прочитать комментарии. Нажмите Ctrl+U на любой странице \u2014 вы увидите весь HTML-код, включая комментарии. Никогда не пишите в комментариях пароли, ключи API, личные данные.
Добавляем комментарии в нашу страницу
Давайте добавим комментарии в наш файл my-site.html, чтобы он стал понятнее. Отредактируйте его так:
<h1>Мой первый полноценный сайт</h1>
<p>Привет! Меня зовут Александр, и это моя первая веб-страница с текстом. Я учусь создавать сайты.</p>
<h2>Чему я учусь</h2>
<p>На курсе HTML/CSS я изучаю, как устроены веб-страницы. Пока я знаю заголовки и абзацы.</p>
<h3>Заголовки</h3>
<p>В HTML есть заголовки от h1 до h6. h1 \u2014 самый главный, h6 \u2014 самый маленький.</p>
<h3>Абзацы</h3>
<p>Абзацы создаются тегом p. Они нужны для обычного текста. Между абзацами браузер сам добавляет отступы.</p>
<h2>Мои контакты</h2>
<p>
Email: alex@example.com<br>
Телефон: +7 (999) 123-45-67<br>
Город: Москва
</p>Сохраните и обновите страницу в браузере. Внешне ничего не изменилось \u2014 комментарии не видны. Но теперь код стал понятнее. Если вы откроете этот файл через полгода, вы сразу сориентируетесь по комментариям.
Практическое задание
📝 Задание 1. Страница о себе
Создайте файл about-me.html. Напишите страницу о себе со следующей структурой:
h1 \u2014 «Обо мне»
p \u2014 абзац: кто вы, сколько вам лет, чем занимаетесь
h2 \u2014 «Мои увлечения»
p \u2014 абзац о ваших хобби
h2 \u2014 «Почему я учусь веб-разработке»
p \u2014 абзац о вашей мотивации
h3 \u2014 «Мои цели»
p \u2014 абзац о том, чего хотите достичь
Добавьте комментарии, поясняющие каждый раздел.
🔍 Задание 2. Исследуйте страницу через DevTools
Откройте свою страницу в браузере, нажмите F12, найдите вкладку «Elements». Вы увидите ваш HTML-код. Видите комментарии? Они отображаются серым цветом. Попробуйте изменить какой-нибудь заголовок или абзац прямо в DevTools \u2014 двойной клик по тексту.
🧠 Задание 3. Найдите ошибки в иерархии
Представьте, что кто-то написал такой код:
<h1>Книга</h1>
<h3>Глава 1</h3>
<h5>Параграф 1</h5>
<h2>Глава 2</h2>
Что здесь неправильно? Запишите ответ в комментарий в вашем HTML-файле.
Что важно запомнить
<!-- \u2014\u2014>. Не видны на странице. Для пояснений и заметок.Отличная работа!
Теперь вы умеете создавать страницы с заголовками, абзацами, переносом строк и комментариями. Вы знаете иерархию заголовков и понимаете, почему это важно. В следующем уроке мы изучим списки и ссылки \u2014 ещё два важных элемента любой веб-страницы.
До встречи!
Урок 2.2: Текст и заголовки: p, h1–h6
9 вопросов