Теги разметки страницы. Часть 2: разделы и содержимое

Чтение — около 13 минут· без учёта практики

В предыдущем уроке мы собрали каркас страницы. Теперь разметим содержимое внутри него. Исходные файлы задания уже содержат готовый каркас.

Смысловые элементы содержимого

Элемент article

Элемент <article> (статья) обозначает завершённую, независимую часть страницы — такую, которую можно было бы перенести на другой сайт без потери смысла: запись блога, товар в интернет-магазине, сообщение на форуме, газетную статью, отзыв.

Как правило, <article> содержит заголовок. Внутри него могут находиться другие элементы <article> с близким по смыслу содержимым — например, комментарии к записи или статьи одной темы:

HTML
<article> <!-- начало основной статьи -->
  <h1>Статьи о птицах</h1>
  <p>Вводная информация о птицах...</p>
  <article> <!-- начало первой вложенной статьи -->
    <h2>Статья о воробье</h2>
    <p>Информация про воробьёв...</p>
  </article> <!-- конец первой вложенной статьи -->
  <article> <!-- начало второй вложенной статьи -->
    <h2>Статья о синице</h2>
    <p>Информация про синиц...</p>
  </article> <!-- конец второй вложенной статьи -->
</article> <!-- конец основной статьи -->
<header></header>
<nav></nav>
<article>
<h2> Первая статья </h2>
Содержимое…</article>
<article>
<h2> Вторая статья </h2>
Содержимое…</article>
<aside></aside>
<footer></footer>

Элемент section

Элемент <section> (раздел) группирует взаимосвязанное содержимое — тематический раздел документа, у которого, как правило, есть свой заголовок. Например, главную страницу можно разбить на три раздела: вводную информацию о сайте, контактную информацию и последние новости. Элемент часто используют при вёрстке целевых страниц (англ. landing page, «посадочная страница»).

Не используйте <section> как универсальный контейнер: если блок нужен только для оформления, для этого подходит <div>. Простая проверка: если у фрагмента нет и не может быть осмысленного заголовка, это, скорее всего, не раздел.

HTML
<section> <!-- начало первого раздела -->
  <h2>Первый раздел</h2>
  <p>Информация внутри раздела</p>
</section> <!-- конец первого раздела -->
<section> <!-- начало второго раздела -->
  <h2>Второй раздел</h2>
  <p>Информация внутри раздела</p>
</section> <!-- конец второго раздела -->
<header></header>
<nav></nav>
<section>
<h2> Первый раздел </h2>
Содержимое…</section>
<section>
<h2> Второй раздел </h2>
Содержимое…</section>
<aside></aside>
<footer></footer>

Элемент aside

Элемент <aside> (отступление) обозначает содержимое, которое связано с окружающим текстом, но может рассматриваться отдельно от него. В таких блоках размещают боковые колонки, рекламу, биографические справки, сведения о профиле пользователя — то, что в печатном журнале вынесли бы на поля.

HTML
<article>
  <p>Сегодня мы с семьёй пересматривали фильм «Один дома 2»...</p>
  <aside> <!-- отступление: информация «на полях» -->
    <p>В одной из сцен фильма снялся будущий президент Соединённых Штатов Америки — <i>Дональд Трамп</i>.</p>
  </aside>
</article>
<header></header>
<nav></nav>
<section></section>
<section></section>
<aside></aside>
<footer></footer>

Как выбрать между section, article и div

Сначала определите назначение фрагмента, а затем выбирайте элемент. Рамка, цвет фона и положение на странице не подсказывают, какой тег нужен: одинаково оформить можно любой из этих контейнеров.

  • <section> — тематический раздел. Например, на главной странице Тони заголовок «Любимые игрушки» и список под ним образуют один раздел.
  • <article> — самостоятельный материал. Заметку «Как Тони гулял в парке» с заголовком и законченным рассказом можно прочитать отдельно от главной страницы.
  • <div> — нейтральная обёртка. Если раздел с игрушками и заметку объединяют только ради общей рамки или ширины, этой обёртке не нужно приписывать смысл ещё одного раздела.

Наличие заголовка само по себе не делает блок статьёй: у раздела тоже может быть заголовок. Спросите себя, что перед вами — самостоятельный материал, тематическая часть страницы или группа для оформления. <div> остаётся подходящим элементом для последнего случая; заменять все контейнеры на <section> не нужно.

Совместное использование section и article

Внутрь <article> можно поместить элементы <section>, разбивая статью по смыслу на разделы:

<header></header>
<nav></nav>
<article>
<h2> Название статьи </h2>
<section>
<h3> Первый раздел </h3>
Содержимое…</section>
<section>
<h3> Второй раздел </h3>
Содержимое…</section>
</article>
<aside></aside>
<footer></footer>

И наоборот, элементы <article> можно поместить внутрь <section>, формируя раздел с тематическими материалами — например, раздел «Новости» из нескольких новостей:

<header></header>
<nav></nav>
<section>
<h2> Первый раздел </h2>
<article>
<h3> Первая статья </h3>
Содержимое…</article>
</section>
<section>
<h2> Второй раздел </h2>
<article>
<h3> Вторая статья </h3>
Содержимое…</article>
</section>
<aside></aside>
<footer></footer>

На схемах заголовки обозначены как h2–h6: конкретный уровень выбирайте по вложенности, как в примере ниже. Разделы <section> можно вкладывать друг в друга. Уровни заголовков при этом должны отражать вложенность: смысловой элемент не начинает нумерацию заголовков заново.

HTML
<body>
  <h1>Заголовок первого уровня</h1>
  <section>
    <h2>Заголовок второго уровня</h2>
    <section>
      <h3>Заголовок третьего уровня</h3>
    </section>
  </section>
</body>

Разметка страницы сайта

Закрепим полученные знания и сделаем простую разметку страницы из смысловых элементов. Чтобы области были видны, каждой мы задали цвет фона и высоту атрибутом style. Встроенные стили удобны для демонстрации, но для оформления сайта это не лучший способ: грамотно применять стили вы научитесь в учебнике CSS.

В примере используется CSS-свойство float: оно сдвигает элемент к левому или правому краю контейнера, позволяя следующему содержимому обтекать его. Не переживайте, если пока не всё понятно: сейчас нас интересуют HTML-разметка и назначение элементов. Подробнее об этом свойстве вы узнаете в разделе «Плавающие элементы» учебника CSS.

Каркас страницы из смысловых элементов

Шапка, навигация, боковой блок, основное содержимое с двумя разделами и подвал. Расширьте область результата, перетаскивая разделитель: боковой блок aside остаётся справа, а основное содержимое обтекает его.

index.html
HTML
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Разметка страницы</title>
  </head>
  <body>
    <header style="background-color: khaki; height: 100px">
      <p>Шапка страницы (элемент header)</p>
    </header>
    <nav style="background-color: coral; height: 75px">
      <a href="#">Ссылка 1</a> | <a href="#">Ссылка 2</a> | <a href="#">Ссылка 3</a>
      <p>Панель навигации (элемент nav)</p>
    </nav>
    <aside style="float: right; width: 200px; height: 250px; background-color: tan">
      <p>Справа мы разместили элемент aside</p>
    </aside>
    <main style="height: 250px">
      <h1>Главный заголовок страницы</h1>
      <p>Основное содержимое (элемент main)</p>
      <section style="background-color: silver; height: 75px">
        <h2>Заголовок второго уровня</h2>
        <p>Раздел 1 (элемент section)</p>
      </section>
      <section style="background-color: silver; height: 75px">
        <h2>Заголовок второго уровня</h2>
        <p>Раздел 2 (элемент section)</p>
      </section>
    </main>
    <footer style="background-color: khaki; height: 80px">
      <p>Подвал страницы (элемент footer)</p>
      <address>Автор страницы: <a href="mailto:tony@example.com">хозяин Тони</a></address>
    </footer>
  </body>
</html>

По порядку, что мы сделали в этом документе:

  • Для шапки <header> задали цвет фона khaki и высоту 100 пикселей.
  • Следом разместили навигацию <nav> с теми же свойствами, но с цветом фона coral и высотой 75 пикселей.
  • Затем разместили боковой блок <aside>, сделали его плавающим и сместили вправо (свойство float со значением right), задали ему цвет фона tan, ширину 200 и высоту 250 пикселей. Другие элементы обтекают его, несмотря на то что они блочные.
  • Добавили основное содержимое <main> с главным заголовком страницы (<h1>).
  • Внутри <main> разместили два раздела <section> с заголовками второго уровня (<h2>), задали им цвет фона silver и высоту 75 пикселей.
  • После основного содержимого разместили подвал <footer> с фоном khaki и высотой 80 пикселей. Внутри него — элемент <address> с контактными данными; браузер по умолчанию отображает его курсивом.

Изображение с подписью

Элемент <figure> обозначает иллюстрацию к тексту — содержимое, которое поддерживает определённую мысль и воспринимается как самостоятельная единица. Это может быть изображение, видеоролик, схема, фрагмент кода, диаграмма или таблица.

Элемент <figcaption> выводит подпись к содержимому <figure>. Он размещается первым или последним элементом внутри <figure>.

Фотография с подписью

Два элемента figure с фотографиями Тони. В первом подпись figcaption стоит после изображения, во втором — перед ним. Переставьте figcaption во втором элементе после img и сравните результат.

index.html
HTML
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Фотографии с подписями</title>
  </head>
  <body>
    <main>
      <figure>
        <img src="assets/tony-toy.png" alt="Тони сидит и держит в зубах канат с красным мячиком" width="150" height="200">
        <figcaption>Тони и его любимый канат</figcaption>
      </figure>
      <figure>
        <figcaption>Тони позирует фотографу</figcaption>
        <img src="assets/tony.png" alt="Тони сидит и смотрит в камеру" width="150" height="200">
      </figure>
    </main>
  </body>
</html>

В этом примере основное содержимое находится внутри <main>, в нём два элемента <figure>. Каждый содержит изображение (<img>) и текстовую подпись <figcaption>. Если подпись стоит первым вложенным элементом, она отображается над изображением, если последним — под ним. Браузер по умолчанию добавляет <figure> отступы слева и справа.

Раскрывающийся блок

Элемент <details> создаёт блок с дополнительными сведениями, который посетитель может раскрыть или скрыть. Внутри можно разместить любое содержимое. Так оформляют ответы на частые вопросы, подробности, которые нужны не всем, и длинные примечания. Всё это работает без скриптов, в том числе с клавиатуры: блок раскрывается клавишей Enter или Пробел.

Элемент <summary> задаёт видимый заголовок блока и должен быть первым элементом внутри <details>. Если его нет, браузер выводит собственный заголовок, например «Подробнее» или «Details» — в зависимости от языка браузера.

Содержимое <details> видно только в раскрытом состоянии. Чтобы блок был раскрыт сразу при загрузке страницы, добавьте логический атрибут open. Когда посетитель раскрывает блок, браузер сам добавляет этот атрибут, а когда скрывает — удаляет.

Раскрывающийся блок details

Первый блок details скрывает ответ и ещё один вложенный блок, второй раскрыт сразу благодаря атрибуту open. Кликните по заголовкам, затем удалите атрибут open и посмотрите, как изменится начальное состояние.

index.html
HTML
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Раскрывающийся блок</title>
  </head>
  <body>
    <h1>Вопросы о Тони</h1>
    <details>
      <summary>Почему Тони так часто лает?</summary>
      <p>Карликовые пинчеры — бдительные сторожа: так Тони сообщает, что у двери кто-то есть.</p>
      <details>
        <summary>А можно ли его отучить?</summary>
        <p>Можно: хозяин хвалит Тони, когда тот замолкает по команде.</p>
      </details>
    </details>
    <details open>
      <summary>Сколько Тони гуляет?</summary>
      <p>Три раза в день, по полчаса ранним утром, днём и вечером.</p>
    </details>
  </body>
</html>

В этом примере мы поместили один элемент <details> внутрь другого: вложенный блок появляется, только когда раскрыт внешний. У каждого блока свой заголовок <summary>.

Если дать нескольким блокам <details> одинаковый атрибут name, получится «аккордеон»: при раскрытии одного блока остальные блоки группы закрываются. Эта возможность появилась в браузерах недавно; в старых версиях блоки просто раскрываются независимо.

Проверьте себя

Выберите ответ — объяснение появится сразу. Ответ можно менять.

1. Когда выбрать <section>, а когда <div>?
Показать ответ

<section> — для тематического раздела с заголовком, <div> — для группы, нужной только для оформления — Если у фрагмента нет и не может быть осмысленного заголовка, это, скорее всего, не раздел.

2. На главной странице размещена законченная заметка «Как Тони гулял в парке». Её можно прочитать отдельно. Какой контейнер лучше передаёт назначение заметки?
Показать ответ

<article>: это самостоятельный материал — Заметка с заголовком и законченным рассказом сохраняет смысл вне главной страницы. Это подходящий случай для article.

3. Где может находиться <figcaption>?
Показать ответ

Первым или последним элементом внутри <figure> — Первым — подпись над содержимым, последним — под ним.

4. Что покажет браузер для <details><summary>Ответ</summary><p>42</p></details> при загрузке страницы?
Показать ответ

Только заголовок «Ответ»; число 42 появится после клика — Без атрибута open блок закрыт: видно только содержимое <summary>.

Задание

Тони хочет, чтобы его сайт был понятен всем гостям, в том числе тем, кто слушает страницу с помощью программы экранного доступа. В редакторе ниже — обе страницы сайта с каркасом из предыдущей части. Переключаться между файлами можно в режиме «Учебный код».

В файле index.html:

  • каждый из трёх разделов — об игрушке, стишке и командах — поместите в <section>;
  • оберните фотографию в <figure> и добавьте под ней подпись «Я и мой канат „Удав“»;
  • в конце раздела команд добавьте раскрывающийся блок с заголовком «Почему команды на немецком?» и ответом «Карликовый пинчер — немецкая порода, и хозяину понравилась эта традиция.»;

На обеих страницах сохраните готовые header, nav, main, footer и контакты. Меню и оглавление должны продолжать работать.

Ожидаемый результат: страницы выглядят почти так же, как раньше, — смысловые элементы не меняют оформления. Изменились фотография, которая получила подпись и небольшой отступ слева, блок «Почему команды на немецком?», который раскрывается по клику, и подвал со знаком © и контактами хозяина Тони внизу обеих страниц. Контакты отображаются курсивом. Меню, оглавление и ссылки по-прежнему работают.

Выполните задание

index.html
HTML
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Сайт Тони</title>
  </head>
  <body>
    <header>
      <!-- Меню сайта -->
      <nav>
        <ul>
          <li><a href="index.html">Главная</a></li>
          <li><a href="pages/toys.html">Мои игрушки</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <h1 id="top">Привет! Меня зовут Тони</h1>
      <p>Я карликовый пинчер. Мне три года, я вешу 8&nbsp;кг и люблю гулять в любую погоду.</p>
      <ul>
        <li><a href="#toy">Моя любимая игрушка</a></li>
        <li><a href="#commands">Команды, которые я знаю</a></li>
      </ul>
        <h2 id="toy" class="section-title">Моя любимая игрушка</h2>
        <p data-toy-id="17">Это канат с мячиком. Хозяин бросает его, а я приношу обратно — почти всегда. <a href="pages/toys.html">Посмотреть все игрушки Тони</a>.</p>
          <img src="assets/tony-toy.png" alt="Тони сидит и держит в зубах канат с красным мячиком" width="300" height="400" title="Мой канат &quot;Удав&quot;">
        <p><a href="assets/tony-toy.png" download>Скачать фотографию</a></p>
        <p>Подробнее о моей породе — в статье <a href="https://ru.wikipedia.org/wiki/Карликовый_пинчер" target="_blank">«Карликовый пинчер» в Википедии</a>.</p>
        <hr>
        <p>Вечером игра закончилась. Канат остался на полу, а я свернулся калачиком в кресле.</p>
        <h2>Мой стишок</h2>
        <p>
          Я маленький, но смелый,<br>
          Гуляю целый день,<br>
          А вечером на кресле<br>
          Сплю — и мне не лень.
        </p>
        <h2 id="commands" class="section-title">Команды, которые я знаю</h2>
        <p>Хозяин научил меня командам на немецком:</p>
        <dl>
          <dt lang="de">Sitz!</dt>
          <dd>сидеть</dd>
          <dt lang="de">Platz!</dt>
          <dd>лежать</dd>
          <dt lang="de">Fuß!</dt>
          <dd>рядом</dd>
        </dl>
      <p><a href="#top">Наверх</a></p>
    </main>
    <footer>
      <p>&copy; 2026 Тони и его хозяин</p>
      <address>Написать хозяину Тони: <a href="mailto:tony@example.com">tony@example.com</a></address>
    </footer>
  </body>
</html>
pages/toys.html
HTML
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Игрушки Тони</title>
  </head>
  <body>
    <header>
      <nav>
        <ul>
          <li><a href="../index.html">Главная</a></li>
          <li><a href="toys.html">Мои игрушки</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <h1>Мои игрушки</h1>
      <ul>
        <li>Канат с мячиком «Удав» — моя любимая игрушка</li>
        <li>Резиновая косточка — для вечеров, когда гулять уже поздно</li>
        <li>Пищащий ёжик — его я прячу под диваном</li>
      </ul>
      <img src="../assets/tony.png" alt="Тони сидит и смотрит в камеру" width="300" height="400">
      <h2>Как играть со мной в канат</h2>
      <ol>
        <li>Покажите мне канат.</li>
        <li>Бросьте его подальше.</li>
        <li>Подождите, пока я принесу его обратно.</li>
        <li>Похвалите меня — и всё сначала!</li>
      </ol>
      <p><a href="../index.html#commands">Какие команды я знаю</a></p>
      <p><a href="../index.html">Вернуться на главную</a></p>
    </main>
    <footer>
      <p>&copy; 2026 Тони и его хозяин</p>
      <address>Написать хозяину Тони: <a href="mailto:tony@example.com">tony@example.com</a></address>
    </footer>
  </body>
</html>

Продолжите в VS Code

  1. Нажмите «Скачать ZIP» в редакторе выше и распакуйте архив в папку my-site: он содержит все страницы и ресурсы примера с вашими текущими правками. Сохраните структуру папок; перед заменой существующих файлов сохраните копию своей версии сайта.
  2. Откройте index.html в Google Chrome и откройте инструменты разработчика.
  3. На панели «Elements» сверните элемент <body> до одного уровня вложенности и проверьте, что внутри него стоят рядом header, main и footer.

Ожидаемый результат: на панели «Elements» внутри <body> три соседних элемента, а меню и основное содержимое не вложены друг в друга. Если main оказался внутри header, проверьте, закрыт ли элемент </header>.

Если результат отличается и найти ошибку не получается, нажмите в редакторе выше «Показать решение» и сравните его со своим кодом. Затем снова скачайте ZIP — теперь уже с решением.

Фотоальбом Тони

Тони прислал фотографии для альбома, и черновик уже стоит в конце страницы игрушек: заголовок «Мой фотоальбом» и список, где подпись под каждой фотографией записана обычным абзацем. Превратите черновик в раздел:

  • поместите заголовок и список в <section> и дайте заголовку id="album";
  • в каждом пункте списка оберните фотографию в <figure>, а абзац с подписью замените на <figcaption> внутри этого <figure>.

Ожидаемый результат: фотографии альбома получили отступ слева, а подпись стоит под каждой фотографией. Альбом пока выглядит длинной лентой из шести фотографий: разложить их сеткой мы научимся в учебнике CSS. Скачайте ZIP и замените папку my-site, чтобы альбом был и на вашем сайте.

Соберите альбом

index.html
HTML
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Сайт Тони</title>
  </head>
  <body>
    <header>
      <!-- Меню сайта -->
      <nav>
        <ul>
          <li><a href="index.html">Главная</a></li>
          <li><a href="pages/toys.html">Мои игрушки</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <h1 id="top">Привет! Меня зовут Тони</h1>
      <p>Я карликовый пинчер. Мне три года, я вешу 8&nbsp;кг и люблю гулять в любую погоду.</p>
      <ul>
        <li><a href="#toy">Моя любимая игрушка</a></li>
        <li><a href="#commands">Команды, которые я знаю</a></li>
      </ul>
      <section>
        <h2 id="toy" class="section-title">Моя любимая игрушка</h2>
        <p data-toy-id="17">Это канат с мячиком. Хозяин бросает его, а я приношу обратно — почти всегда. <a href="pages/toys.html">Посмотреть все игрушки Тони</a>.</p>
        <figure>
          <img src="assets/tony-toy.png" alt="Тони сидит и держит в зубах канат с красным мячиком" width="300" height="400" title="Мой канат &quot;Удав&quot;">
          <figcaption>Я и мой канат «Удав»</figcaption>
        </figure>
        <p><a href="assets/tony-toy.png" download>Скачать фотографию</a></p>
        <p>Подробнее о моей породе — в статье <a href="https://ru.wikipedia.org/wiki/Карликовый_пинчер" target="_blank">«Карликовый пинчер» в Википедии</a>.</p>
        <hr>
        <p>Вечером игра закончилась. Канат остался на полу, а я свернулся калачиком в кресле.</p>
      </section>
      <section>
        <h2>Мой стишок</h2>
        <p>
          Я маленький, но смелый,<br>
          Гуляю целый день,<br>
          А вечером на кресле<br>
          Сплю — и мне не лень.
        </p>
      </section>
      <section>
        <h2 id="commands" class="section-title">Команды, которые я знаю</h2>
        <p>Хозяин научил меня командам на немецком:</p>
        <dl>
          <dt lang="de">Sitz!</dt>
          <dd>сидеть</dd>
          <dt lang="de">Platz!</dt>
          <dd>лежать</dd>
          <dt lang="de">Fuß!</dt>
          <dd>рядом</dd>
        </dl>
        <details>
          <summary>Почему команды на немецком?</summary>
          <p>Карликовый пинчер — немецкая порода, и хозяину понравилась эта традиция.</p>
        </details>
      </section>
      <p><a href="#top">Наверх</a></p>
    </main>
    <footer>
      <p>&copy; 2026 Тони и его хозяин</p>
      <address>Написать хозяину Тони: <a href="mailto:tony@example.com">tony@example.com</a></address>
    </footer>
  </body>
</html>
pages/toys.html
HTML
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Игрушки Тони</title>
  </head>
  <body>
    <header>
      <nav>
        <ul>
          <li><a href="../index.html">Главная</a></li>
          <li><a href="toys.html">Мои игрушки</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <h1>Мои игрушки</h1>
      <ul>
        <li>Канат с мячиком «Удав» — моя любимая игрушка</li>
        <li>Резиновая косточка — для вечеров, когда гулять уже поздно</li>
        <li>Пищащий ёжик — его я прячу под диваном</li>
      </ul>
      <img src="../assets/tony.png" alt="Тони сидит и смотрит в камеру" width="300" height="400">
      <h2>Как играть со мной в канат</h2>
      <ol>
        <li>Покажите мне канат.</li>
        <li>Бросьте его подальше.</li>
        <li>Подождите, пока я принесу его обратно.</li>
        <li>Похвалите меня — и всё сначала!</li>
      </ol>
      <h2>Мой фотоальбом</h2>
      <ul>
        <li>
          <img src="../assets/album-puppy.png" alt="Тони-щенок сидит и смотрит в камеру" width="300" height="400">
          <p>Я в детстве</p>
        </li>
        <li>
          <img src="../assets/album-squirrel.png" alt="Тони лежит в обнимку с плюшевой белкой" width="300" height="400">
          <p>С плюшевой белкой</p>
        </li>
        <li>
          <img src="../assets/album-hoodie.png" alt="Тони стоит в бежевой толстовке с капюшоном" width="300" height="400">
          <p>В худи для холодной погоды</p>
        </li>
        <li>
          <img src="../assets/album-harness.png" alt="Тони в оранжевой шлейке ждёт прогулку" width="300" height="400">
          <p>Шлейка надета — идём гулять!</p>
        </li>
        <li>
          <img src="../assets/album-laugh.png" alt="Тони лежит, запрокинув голову, и широко открыл пасть, будто смеётся" width="300" height="400">
          <p>Смеюсь над шуткой хозяина</p>
        </li>
        <li>
          <img src="../assets/album-sleep.png" alt="Тони спит, положив голову на лапы" width="300" height="319">
          <p>После прогулки</p>
        </li>
      </ul>
      <p><a href="../index.html#commands">Какие команды я знаю</a></p>
      <p><a href="../index.html">Вернуться на главную</a></p>
    </main>
    <footer>
      <p>&copy; 2026 Тони и его хозяин</p>
      <address>Написать хозяину Тони: <a href="mailto:tony@example.com">tony@example.com</a></address>
    </footer>
  </body>
</html>

Выберите разметку по смыслу

В отдельном упражнении ниже все три контейнера пока записаны как <div>. Прочитайте содержимое и решите, какие из них стоит заменить на <section> или <article>, а какой оставить:

  1. Фрагмент id="toys" — тематический раздел главной страницы: заголовок «Любимые игрушки» и список.
  2. Фрагмент id="walk" — самостоятельная заметка о прогулке Тони с законченным рассказом.
  3. Обёртка class="frame" нужна только для будущего общего оформления этих двух фрагментов.

Измените открывающие и закрывающие теги вместе. Перед каждым из трёх контейнеров добавьте HTML-комментарий: почему вы выбрали именно этот элемент. Сохраните текст, атрибуты и уровни заголовков.

Ожидаемый результат: у каждого фрагмента подходящий смысловой элемент и комментарий с обоснованием. Общая обёртка не объявлена отдельным тематическим разделом. Внешний вид может остаться прежним — проверьте теги на панели «Elements», а не только изображение страницы. Прочитайте заголовки и текст: порядок содержания должен быть понятен без CSS.

Разметьте раздел и самостоятельную заметку

index.html
HTML
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Игрушки и прогулка Тони</title>
  </head>
  <body>
    <main>
      <h1>На сайте Тони</h1>
      <!-- Объясните выбор элемента для общей обёртки. -->
      <div class="frame">
        <!-- Выберите элемент для тематического раздела и объясните почему. -->
        <div id="toys">
          <h2>Любимые игрушки</h2>
          <ul>
            <li>Мячик</li>
            <li>Канат</li>
          </ul>
        </div>
        <!-- Выберите элемент для самостоятельной заметки и объясните почему. -->
        <div id="walk">
          <h2>Как Тони гулял в парке</h2>
          <p>Сегодня Тони отправился в парк. Он пробежал по знакомой дорожке и нашёл большую шишку.</p>
          <p>После прогулки Тони вернулся домой и уснул рядом со своей игрушкой.</p>
        </div>
      </div>
    </main>
  </body>
</html>

Когда закончите, сравните свой выбор с вариантом «Показать решение». Здесь нет автоматической оценки: важно не только заменить теги, но и объяснить, почему они подходят к заданному содержимому.

Дополнительное задание: страница о тасманийском дьяволе

Тони очень похож на тасманийского дьявола: такой же небольшой, чёрный и шумный. Хозяин в шутку называет дьявола его близким сородичем, поэтому в этом отдельном упражнении мы соберём страницу о нём. В основной сайт Тони переносить её не нужно. В редакторе ниже — весь текст страницы без разметки и две фотографии — дьявола и Тони. Соберите из него страницу, похожую на настоящий сайт, и примените всё, что уже изучили:

  • шапка — название страницы главным заголовком и строка «Страница из серии…» абзацем под ним;
  • «Содержание» — навигация с якорными ссылками на статьи «Кто это» и «Под угрозой»;
  • «Кто это» и «Под угрозой» — две статьи с заголовками второго уровня; «Внешний вид» и «Образ жизни» — разделы первой статьи с заголовками третьего уровня;
  • фотография дьявола в разделе «Внешний вид» — иллюстрация с подписью «Тасманийский дьявол показывает зубы»;
  • вопрос «Почему его назвали дьяволом?» с ответом — раскрывающийся блок;
  • латинское название — элементом <span> с атрибутом lang="la", между числами и «см», «кг» — неразрывные пробелы;
  • «Близкий сородич Тони?» — шуточное отступление с фотографией Тони и подписью «Тони — немного дьявол»;
  • строка «© 2026 Тони и его хозяин» — подвал; знак © запишите мнемоникой &copy;.

Чтобы страница выглядела как сайт, добавьте цвета атрибутом style, как в примере каркаса страницы: например, чёрные шапку и подвал с белым текстом (background-color: black; color: white) и отступление цвета peru, которое прижато вправо свойством float: right. Подробно стили и цвета мы разберём в уроках «Стили» и «Цвета».

Ожидаемый результат: вверху — чёрная шапка с названием страницы, внизу — чёрный подвал, справа — отступление с фотографией Тони. Заголовки идут по уровням без пропусков, пункты содержания переводят к статьям, ответ на вопрос о названии раскрывается по клику. Цвета можно выбрать свои: важна смысловая структура, её проверьте на панели «Elements» инструментов разработчика. Проверить страницу валидатором вы научитесь в уроке «Компьютерный код».

Соберите страницу о тасманийском дьяволе

index.html
HTML
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Тасманийский дьявол</title>
  </head>
  <body>
    Тасманийский дьявол
    Страница из серии «Родственники Тони»

    Содержание
    Кто это
    Под угрозой

    Кто это
    <p>Тасманийский дьявол (лат. Sarcophilus harrisii) — хищное сумчатое млекопитающее. Сейчас он живёт только на острове Тасмания у южного побережья Австралии.</p>
    Внешний вид
    <p>Дьявол размером с небольшую собаку: длина тела 50–80 см, хвоста — 23–30 см, масса — от 4 до 12 кг. Шерсть чёрная, на груди часто есть белая полоса или пятно.</p>
    <img src="assets/devil.webp" alt="Тасманийский дьявол стоит на траве, широко раскрыв пасть с острыми клыками" width="302" height="254">
    Тасманийский дьявол показывает зубы
    Образ жизни
    <p>Днём дьяволы прячутся в норах и зарослях, а охотятся ночью. Своё название они получили за громкие пугающие крики. Относительно размера тела у тасманийского дьявола один из самых сильных укусов среди хищных млекопитающих.</p>
    Почему его назвали дьяволом?
    <p>Первые европейские поселенцы слышали по ночам из леса жуткие крики и рычание и решили, что там водится нечисть.</p>

    Под угрозой
    <p>С 1990-х годов дьяволов поражает заразная лицевая опухоль. Из-за неё численность вида сильно сократилась, и с 2008 года тасманийский дьявол считается вымирающим видом.</p>
    <p>Учёные создают резервные популяции здоровых животных и выпускают их в природу.</p>

    Близкий сородич Тони?
    <p>Хозяин в шутку называет тасманийского дьявола близким сородичем Тони: оба небольшие, чёрные, шумные и обожают что-нибудь грызть. На самом деле родство очень далёкое: дьявол — сумчатое животное, а Тони — собака.</p>
    <img src="assets/tony.png" alt="Тони сидит и смотрит в камеру" width="150" height="200">
    Тони — немного дьявол

    © 2026 Тони и его хозяин
  </body>
</html>

Из истории: смысловые элементы HTML5 и алгоритм структуры документа

Элементы <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>, <figure> и <details> появились в HTML5. Одной из его целей было дать разработчикам смысловые элементы вместо однообразных <div> с классами header, menu и footer. Сейчас эти элементы поддерживаются всеми браузерами и являются обычной частью HTML.

В черновиках HTML5 описывался также алгоритм структуры документа (англ. outline algorithm): каждый <section> и <article> должен был начинать нумерацию заголовков заново, и в любом разделе можно было использовать <h1>. Поэтому в старых учебниках встречается совет размещать <h1> внутри каждого раздела. Браузеры и программы экранного доступа этот алгоритм так и не реализовали, и в 2022 году его убрали из стандарта. Уровни заголовков определяются только их тегами.