Текст: заголовки, абзацы и списки
Как разложить текст по полочкам: иерархия заголовков, смысловые выделения, нумерованные и маркированные списки, спецсимволы.
Что ты научишься делать
- Выстроишь заголовки по уровням так, чтобы страницу можно было читать «по оглавлению»
- Отличишь смысловое выделение от простого «сделать жирным»
- Свёрстаешь список ингредиентов и пошаговый рецепт
#Заголовки — это оглавление, а не размер шрифта
В HTML шесть уровней заголовков: от h1 до h6. Новички выбирают их по размеру: «этот покрупнее, возьму h2». Так делать нельзя.
Заголовки задают иерархию — вложенность разделов. По ним строится оглавление документа: программы чтения с экрана позволяют прыгать по заголовкам, поисковики понимают, о чём страница, а человек с одного взгляда видит структуру.
<h1>Сырники</h1> <!-- название всей страницы, он один --> <h2>Ингредиенты</h2> <!-- крупный раздел --> <h2>Приготовление</h2> <h3>Тесто</h3> <!-- подраздел внутри «Приготовления» --> <h3>Обжарка</h3>Так не надо
<h1>Сырники</h1>
<h4>Ингредиенты</h4>Прыжок с первого уровня сразу на четвёртый. Выбран он только потому, что «шрифт помельче». Оглавление документа ломается.
Так надо
<h1>Сырники</h1>
<h2>Ингредиенты</h2>Уровни идут подряд. А если h2 кажется слишком крупным — это чинится одной строкой CSS, не ломая структуру.
#Абзацы и переносы строк
Обычный текст живёт в абзацах — тег p. Каждая законченная мысль — свой абзац.
Важная деталь: браузер не видит твои переносы строк. Сколько бы раз ты ни нажал Enter в редакторе, для браузера это один пробел. Абзацы разделяет только тег p.
Если перенос строки действительно нужен внутри абзаца — например, в адресе или в стихах — есть <br>. У него нет закрывающей пары: он ничего не оборачивает, а просто ломает строку.
<hr> — тематический разделитель: смена темы внутри текста. Тоже одиночный тег.
<p> улица Гоголя, 12<br> второй этаж, вход со двора</p><hr><p>А теперь о другом.</p>#strong и em: смысл, а не начертание
strong — «это важно». Браузер по умолчанию рисует такой текст жирным, но суть не в жирности: программа чтения с экрана произнесёт этот кусок с нажимом.
em (от emphasis) — смысловое ударение. Отображается курсивом. Сравни: «Я сегодня зайду» и «Я сегодня зайду» — смысл разный, и голосом это слышно.
Есть ещё b и i. Это чисто визуальные теги: «сделай жирным» и «сделай наклонным», без всякого смысла. Их используют редко — например, для названий кораблей или терминов, которые принято выделять курсивом.
| Тег | Что означает | Когда брать |
|---|---|---|
strong | Важно, обрати внимание | Предупреждение, ключевое условие, цена |
em | Смысловое ударение | Слово, на котором держится фраза |
b | Просто жирный, без смысла | Ключевое слово в поиске, лид абзаца |
i | Просто курсив, без смысла | Иностранное слово, название, термин |
#Списки
Списки бывают двух видов, и выбор между ними — про смысл, а не про внешний вид.
ul (unordered list) — маркированный: порядок не важен. Ингредиенты, преимущества, теги.
ol (ordered list) — нумерованный: порядок важен. Шаги рецепта, инструкция, рейтинг.
Каждый пункт в обоих случаях — тег li (list item). Никакого другого содержимого между ul и li быть не должно.
<h2>Ингредиенты</h2><ul> <li>Творог, 400 г</li> <li>Яйцо, 1 шт.</li> <li>Мука, 3 ст. ложки</li></ul><h2>Как готовить</h2><ol> <li>Разомни творог вилкой.</li> <li>Добавь яйцо и муку, перемешай.</li> <li>Жарь по три минуты с каждой стороны.</li></ol>Списки можно вкладывать друг в друга — вложенный список пишется внутри пункта li, а не между пунктами.
#Спецсимволы
Некоторые символы нельзя написать напрямую: браузер решит, что это код. Угловая скобка < начнёт тег, амперсанд & начнёт спецсимвол. Для них есть замены — HTML-сущности.
| Символ | Пишем | Когда нужно |
|---|---|---|
| < | < | Показать угловую скобку в тексте |
| > | > | То же для закрывающей |
| & | & | Амперсанд в названии: «Кофе & книги» |
| неразрывный пробел | | Склеить «10 кг», чтобы не разорвались по строкам |
| — | — | Длинное тире в предложении |
| © | © | Копирайт в подвале |
#Собираем рецепт целиком
Где спотыкаются почти все
Заголовок выбран по размеру шрифта
Почему Ты берёшь h4, потому что «h2 слишком большой». Структура документа рушится: оглавление получается дырявым, а поисковик не понимает вложенность разделов.
Как надо Уровень выбирай по смыслу, а размер меняй в CSS. Одна строка h2 { font-size: 1.4rem; } — и всё на месте.
Абзацы разделены переносами строки, а не тегами p
Почему Браузер сжимает любые переносы и пробелы в один пробел. Текст слипается в простыню.
Как надо Каждый абзац оборачивай в <p>…</p>.
Текст лежит прямо внутри ul, между пунктами
Почему В ul и ol допустимы только li. Всё остальное браузер выбросит из списка, и вёрстка поедет.
Как надо Любое содержимое клади внутрь li — там можно и абзацы, и вложенные списки, и картинки.
Отступы делаются пустыми абзацами и br
Почему Это визуальный костыль: скринридер прочитает пустые абзацы, а при правках расстояния придётся подгонять руками в каждом месте.
Как надо Расстояния — задача CSS. Потерпи до одиннадцатого урока, а пока пусть будет как есть.
- Иерархия заголовков heading hierarchy
- Порядок уровней h1–h6, задающий вложенность разделов документа.
- Маркированный список unordered list, ul
- Список, где порядок пунктов не имеет значения.
- Нумерованный список ordered list, ol
- Список, где порядок важен: шаги, инструкции, рейтинги.
- Одиночный тег void element
- Тег без содержимого и без закрывающей пары:
br,hr,img. - HTML-сущность HTML entity
- Запись вида
для символов, которые нельзя набрать напрямую.
Проверь себя
Уровень — это про вложенность разделов. Размер меняется в CSS в одну строку, а сломанную структуру никакой CSS не починит.
Любые подряд идущие пробелы и переносы браузер превращает в один пробел. Разделяют текст только теги.
Порядок принципиален: сначала размять творог, потом жарить. Значит, <code>ol</code>.
Выглядят одинаково, но <code>strong</code> добавляет смысл: голосовые читалки произнесут его с нажимом. <code>b</code> — чисто оформление.
Это HTML-сущность: <code>&lt;</code> — «less than». Аналогично <code>&gt;</code> для закрывающей скобки.
Задание
Свой рецепт
Свёрстай страницу любого блюда: h1 с названием, заголовок h2 «Ингредиенты» и под ним маркированный список ровно из четырёх пунктов, затем h2 «Приготовление» и нумерованный список из трёх шагов. Где-нибудь в тексте выдели важное тегом strong.
Подсказка 1
Пункт списка — это <li>Текст</li>. Все пункты лежат между <ul> и </ul>.
Подсказка 2
Второй заголовок пиши после закрывающего </ul>, а нумерованный список — уже после него.
Показать решение
<h1>Омлет с помидорами</h1><h2>Ингредиенты</h2><ul> <li>Яйца — 3 шт.</li> <li>Молоко — 50 мл</li> <li>Помидор — 1 шт.</li> <li>Соль по вкусу</li></ul><h2>Приготовление</h2><ol> <li>Взбей яйца с молоком и солью.</li> <li>Обжарь помидоры на сковороде одну минуту.</li> <li>Залей яйцами и держи <strong>на маленьком огне</strong> под крышкой.</li></ol>