Разметка текста — одна из базовых задач при создании веб‑страницы. Чтобы браузер понимал, где заголовок, а где обычный абзац, используют специальные теги. Правильная разметка не только делает страницу понятной для пользователя, но и помогает поисковым системам корректно интерпретировать содержимое.
Заголовки: иерархия от H1 до H6
В HTML есть шесть уровней заголовков: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>. Чем меньше номер, тем выше уровень заголовка и тем важнее он в структуре страницы.
Как это работает
<h1>— главный заголовок страницы. На одной странице обычно используют только один<h1>. Это название всей страницы или основной темы.<h2>— подзаголовки разделов.<h3>–<h6>— вложенные подзаголовки, если структура требует детализации.
Браузеры по умолчанию отображают заголовки разным размером шрифта и жирностью, но смысл тегов — не в оформлении, а в семантике (смысловой структуре).
Пример базовой разметки
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Пример разметки заголовков и абзацев</title> </head> <body> <h1>Как приготовить овощной салат</h1> <h2>Ингредиенты</h2> <p>Для приготовления вам понадобятся:</p> <ul> <li>огурцы — 2 шт.</li> <li>помидоры — 2 шт.</li> <li>лук — 1 шт.</li> <li>масло оливковое — 3 ст. л.</li> </ul> <h2>Пошаговый рецепт</h2> <h3>Шаг 1: подготовка овощей</h3> <p>Огурцы и помидоры помойте и нарежьте кубиками. Лук очистите и нарежьте тонкими полукольцами.</p> <h3>Шаг 2: смешивание и заправка</h3> <p>Поместите нарезанные овощи в салатник, добавьте лук, посолите по вкусу и заправьте оливковым маслом. Аккуратно перемешайте.</p> <h2>Советы</h2> <p>Чтобы салат был более ароматным, можно добавить свежую зелень: укроп, петрушку или базилик. Также хорошо сочетается с щепоткой чёрного перца.</p> </body> </html>
Как приготовить овощной салат
Ингредиенты
Для приготовления вам понадобятся:
- огурцы — 2 шт.
- помидоры — 2 шт.
- лук — 1 шт.
- масло оливковое — 3 ст. л.
Пошаговый рецепт
Шаг 1: подготовка овощей
Огурцы и помидоры помойте и нарежьте кубиками. Лук очистите и нарежьте тонкими полукольцами.
Шаг 2: смешивание и заправка
Поместите нарезанные овощи в салатник, добавьте лук, посолите по вкусу и заправьте оливковым маслом. Аккуратно перемешайте.
Советы
Чтобы салат был более ароматным, можно добавить свежую зелень: укроп, петрушку или базилик. Также хорошо сочетается с щепоткой чёрного перца.
Важные нюансы
- Не используйте заголовки только ради размера шрифта. Если нужен крупный текст без смысловой нагрузки заголовка, лучше задать размер через CSS.
- Соблюдайте иерархию. Не пропускайте уровни: после
<h1>должен идти<h2>, а не сразу<h4>. - Избегайте нескольких
<h1>на одной странице. Это может запутать поисковые системы и ухудшить доступность.
Абзацы: тег <p>
Абзац в HTML обозначается тегом <p>. Он используется для обычного текстового контента: описаний, пояснений, инструкций.
Особенности работы
- Браузер автоматически добавляет отступы сверху и снизу абзаца.
- Внутри
<p>нельзя размещать блочные элементы (например,<div>, другие<p>, списки и т. п.). Допустимы только строчные элементы:<strong>,<em>, ссылки<a>и т. д. - Пустые абзацы (например,
<p></p>) отображаются как пустое место и обычно не нужны.
Пример с разными строчными элементами внутри абзаца
<p>Этот салат — отличный вариант для лёгкого ужина. Он <strong>полезный</strong> и <em>быстрый</em> в приготовлении. Попробуйте добавить <a href="/recipes/salad-with-cheese">сыр фета</a> для нового вкуса.</p>
Этот салат — отличный вариант для лёгкого ужина. Он полезный и быстрый в приготовлении. Попробуйте добавить сыр фета для нового вкуса.
Частые ошибки и как их избежать
- Использование
<br>вместо<p>для разделения абзацев.
<br>— это перенос строки, а не абзац. Неправильно:html<p>Первый абзац.<br> Второй абзац.</p>
Правильно:
html<p>Первый абзац.</p> <p>Второй абзац.</p>
- Вкладывание
<p>внутрь другого<p>.
Это недопустимо по спецификации HTML. Браузер сам закроет первый<p>при встрече второго. - Применение заголовков к коротким фразам ради «красивости».
Если фраза не является заголовком по смыслу, используйте обычный текст и стилизуйте его через CSS.
Практический пример: страница с описанием товара
Допустим, нужно разметить описание товара «Кофе в зёрнах». Вот как это может выглядеть:
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Кофе в зёрнах: описание</title> </head> <body> <h1>Кофе в зёрнах «Эфиопия»</h1> <h2>О продукте</h2> <p>Это натуральный кофе премиум‑класса из Эфиопии. Зёрна собраны вручную и обжарены небольшими партиями для сохранения тонкого аромата.</p> <h2>Вкусовые характеристики</h2> <p>Во вкусе преобладают ноты цитруса, жасмина и сладких фруктов. Послевкусие долгое, с лёгкой кислинкой.</p> <h2>Рекомендации по приготовлению</h2> <p>Лучше всего раскрывается в пуровере или френч‑прессе. Помол должен быть средним. Оптимальная температура воды — 92–95 °C.</p> <h2>Состав и упаковка</h2> <p>100 % арабика. Упаковка — вакуумный пакет с клапаном дегазации, вес — 250 г.</p> </body> </html>
Кофе в зёрнах «Эфиопия»
О продукте
Это натуральный кофе премиум‑класса из Эфиопии. Зёрна собраны вручную и обжарены небольшими партиями для сохранения тонкого аромата.
Вкусовые характеристики
Во вкусе преобладают ноты цитруса, жасмина и сладких фруктов. Послевкусие долгое, с лёгкой кислинкой.
Рекомендации по приготовлению
Лучше всего раскрывается в пуровере или френч‑прессе. Помол должен быть средним. Оптимальная температура воды — 92–95 °C.
Состав и упаковка
100 % арабика. Упаковка — вакуумный пакет с клапаном дегазации, вес — 250 г.
Такая разметка понятна и человеку, и машине: поисковики увидят структуру, а браузер отобразит текст с логичными отступами.
Как стилизовать заголовки и абзацы через CSS
Хотя оформление — отдельная тема, полезно знать, что внешний вид можно менять без изменения HTML. Например:
h1 { font-size: 2rem; color: #222; margin-bottom: 1rem; } h2 { font-size: 1.5rem; color: #333; border-bottom: 1px solid #ccc; padding-bottom: 0.25rem; } p { line-height: 1.6; color: #444; margin-bottom: 1rem; }
Эти стили можно поместить в отдельный CSS‑файл или в блок <style> внутри <head>.
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Кофе в зёрнах: описание</title> <style> h1 { font-size: 2rem; color: #222; margin-bottom: 1rem; } h2 { font-size: 1.5rem; color: #333; border-bottom: 1px solid #ccc; padding-bottom: 0.25rem; } p { line-height: 1.6; color: #444; margin-bottom: 1rem; } </style> </head> <body> <h1>Кофе в зёрнах «Эфиопия»</h1> <h2>О продукте</h2> <p>Это натуральный кофе премиум‑класса из Эфиопии. Зёрна собраны вручную и обжарены небольшими партиями для сохранения тонкого аромата.</p> <h2>Вкусовые характеристики</h2> <p>Во вкусе преобладают ноты цитруса, жасмина и сладких фруктов. Послевкусие долгое, с лёгкой кислинкой.</p> <h2>Рекомендации по приготовлению</h2> <p>Лучше всего раскрывается в пуровере или френч‑прессе. Помол должен быть средним. Оптимальная температура воды — 92–95 °C.</p> <h2>Состав и упаковка</h2> <p>100 % арабика. Упаковка — вакуумный пакет с клапаном дегазации, вес — 250 г.</p> </body> </html>
Загрузка...