Структура текста: заголовки, абзацы и списки

Научись упорядочивать текст с помощью иерархии заголовков, абзацев и списков.

7 мин · 3 вопросов

Открой кулинарную книгу: там есть название книги, названия глав, а затем названия рецептов. HTML предлагает такую же иерархию с шестью уровнями заголовков, от <h1> до <h6>. Буква h происходит от heading (заголовок). <h1> - это главный заголовок страницы, <h2> - заголовок раздела, <h3> - подзаголовок, и так далее до <h6>.

<h1>My recipe notebook</h1>
<h2>Starters</h2>
<h3>Carrot soup</h3>
<h2>Desserts</h2>
<h3>Apple pie</h3>

Для обычного текста используется тег <p> из предыдущего урока. Важная деталь: нажатие клавиши Enter в файле не создаёт новый абзац на экране. Браузер игнорирует переносы строк и повторяющиеся пробелы. Чтобы разделить две мысли, нужно написать два отдельных элемента <p>.

<h2>Apple pie</h2>
<p>A simple recipe, perfect for beginners.</p>
<p>Allow 30 minutes of preparation in total.</p>

Чтобы перечислять элементы, HTML предлагает два вида списков. Тег <ul> (unordered list, маркированный список) показывает маркеры: отлично подходит для списка покупок, где порядок не важен. Тег <ol> (ordered list, нумерованный список) показывает номера: идеально для шагов рецепта. В обоих случаях каждый пункт списка пишется с тегом <li> (list item, пункт списка).

<ul>
  <li>3 apples</li>
  <li>1 pie crust</li>
  <li>2 spoonfuls of sugar</li>
</ul>
<ol>
  <li>Preheat the oven to 180 degrees.</li>
  <li>Cut the apples into slices.</li>
  <li>Bake for 35 minutes.</li>
</ol>

Проверка знаний

Убедись, что запомнил ключевые моменты этого урока.

1. Какой тег используется для главного заголовка страницы?
   • <h6>
   • <h1>
   • <p>
   • <heading>
2. Какой тег создаёт нумерованный список?
   • <ul>
   • <ol>
   • <li>
3. Как показать на экране два отдельных абзаца?
   • Нажать Enter два раза в файле
   • Написать два отдельных элемента <p>
   • Добавить пробелы между предложениями