HTML списки

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

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

Списки помогают систематизировать информацию и делают её более доступной для понимания. Программа экранного доступа сообщает, что начался список и сколько в нём пунктов, а читатель с первого взгляда видит, где начинается и заканчивается перечисление. HTML позволяет составлять следующие списки:

• нумерованный (упорядоченный) список;
• маркированный (неупорядоченный) список;
• список описаний.

Нумерованный список

Нумерованный (упорядоченный) список предназначен для элементов, которые следуют в определённом порядке, например шаги инструкции или места в рейтинге. Нумерованный список начинается с тега <ol> (от англ. ordered list — упорядоченный список). Каждый элемент списка начинается с тега <li> (от англ. list item — элемент списка).

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Нумерованный список</title>
  </head>
  <body>
    <h1>Как я встречаю утро</h1>
    <ol>
      <li>Просыпаюсь и потягиваюсь.</li>
      <li>Бужу хозяина.</li>
      <li>Приношу поводок.</li>
    </ol>
  </body>
</html>

Атрибуты нумерации

Если вы хотите, чтобы список начинался с определённого номера (не с 1), укажите атрибут start у тега <ol>. Значения должны быть целыми числами, допускаются и отрицательные значения.

Атрибут type позволяет задать буквенную нумерацию ("A" — прописные буквы, "a" — строчные), нумерацию римскими цифрами ("I" — в верхнем регистре, "i" — в нижнем) или обычную нумерацию арабскими цифрами ("1", значение по умолчанию). Буквы берутся из латинского алфавита.

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Атрибут type</title>
  </head>
  <body>
    <ol type="A">
      <li>Первый пункт</li>
      <li>Второй пункт</li>
      <li>Третий пункт</li>
    </ol>
    <ol type="a">
      <li>Первый пункт</li>
      <li>Второй пункт</li>
      <li>Третий пункт</li>
    </ol>
    <ol type="I">
      <li>Первый пункт</li>
      <li>Второй пункт</li>
      <li>Третий пункт</li>
    </ol>
    <ol type="i">
      <li>Первый пункт</li>
      <li>Второй пункт</li>
      <li>Третий пункт</li>
    </ol>
  </body>
</html>

При использовании атрибута start с буквами (type="A" и type="a") число в значении атрибута — это порядковый номер буквы в алфавите. Например, start="4" соответствует букве «D», и список начнётся именно с неё. После буквы «Z» нумерация становится двухбуквенной: 27 — «AA», 28 — «AB», 29 — «AC» и так далее.

Логический атрибут reversed задаёт нумерацию по убыванию, а атрибут value у элемента <li> меняет номер отдельного пункта — следующие пункты продолжат счёт от него.

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Атрибуты start, reversed и value</title>
  </head>
  <body>
    <ol start="101">
      <li>Первый пункт</li>
      <li>Второй пункт</li>
    </ol>
    <ol type="A" start="4">
      <li>Первый пункт</li>
      <li>Второй пункт</li>
    </ol>
    <ol reversed>
      <li>Первый пункт</li>
      <li>Второй пункт</li>
      <li>Третий пункт</li>
    </ol>
    <ol>
      <li>Первый пункт</li>
      <li value="10">Второй пункт</li>
      <li>Третий пункт</li>
    </ol>
  </body>
</html>

Выбирайте нумерованный список по смыслу, а не ради цифр: если от перестановки пунктов смысл не меняется, нужен маркированный список.

Маркированный список

Маркированный (неупорядоченный) список предназначен для перечислений, в которых порядок не важен. Он определяется тегом <ul> (от англ. unordered list — неупорядоченный список). Каждый элемент списка, как и в нумерованном списке, размечается тегом <li>. По умолчанию браузер начинает каждый пункт маркированного списка с маленького закрашенного круга.

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Маркированный список</title>
  </head>
  <body>
    <h1>Мои игрушки</h1>
    <ul>
      <li>Канат с мячиком</li>
      <li>Резиновая косточка</li>
      <li>Пищащий ёжик</li>
    </ul>
  </body>
</html>

Вид маркера

Забегая вперёд, скажу, что у каждого HTML-элемента есть стиль по умолчанию. Изменить его можно, например, с помощью глобального атрибута style. Подробнее этот атрибут будет рассмотрен в статье «HTML стили». Чтобы изменить вид маркера, используют свойство CSS list-style-type. Основные значения свойства:

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Свойство list-style-type</title>
  </head>
  <body>
    <ul style="list-style-type: none">
      <li>Первый пункт</li>
      <li>Второй пункт</li>
    </ul>
    <ul style="list-style-type: disc">
      <li>Первый пункт</li>
      <li>Второй пункт</li>
    </ul>
    <ul style="list-style-type: circle">
      <li>Первый пункт</li>
      <li>Второй пункт</li>
    </ul>
    <ul style="list-style-type: square">
      <li>Первый пункт</li>
      <li>Второй пункт</li>
    </ul>
  </body>
</html>

Свойство меняет вид маркера, а HTML-разметка списка сохраняется. Полный перечень значений приведён в справочнике CSS, а оформлять списки мы научимся в учебнике CSS.

Вложенные списки

Списки можно вкладывать друг в друга: нумерованный в нумерованный, маркированный в маркированный или в список другого вида. Вложенный список размещается внутри элемента <li> того пункта, к которому он относится, после его текста:

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Вложенные списки</title>
  </head>
  <body>
    <ul>
      <li>Игрушки
        <ul>
          <li>Для дома
            <ul>
              <li>Резиновая косточка</li>
              <li>Пищащий ёжик</li>
            </ul>
          </li>
          <li>Для прогулки
            <ul>
              <li>Канат с мячиком</li>
            </ul>
          </li>
        </ul>
      </li>
      <li>Лакомства</li>
    </ul>
    <ol>
      <li>Позвать Тони
        <ol>
          <li>Показать канат</li>
          <li>Сказать «Ко мне!»</li>
        </ol>
      </li>
      <li>Бросить канат</li>
    </ol>
  </body>
</html>

По умолчанию элементы маркированного списка второго уровня получают пустой круг, а третьего и последующих — квадрат. Нумерованный вложенный список начинает собственную нумерацию с единицы.

Список описаний

Списки описаний используются для пар вида «имя — значение», «термин — определение», «вопрос — ответ». Тег <dl> (от англ. description list — список описаний) определяет список, тег <dt> (description term) — имя или термин, а тег <dd> (description details) — его описание или значение.

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Список описаний</title>
  </head>
  <body>
    <dl>
      <dt>Порода</dt>
      <dd>карликовый пинчер</dd>
      <dt>Возраст</dt>
      <dd>три года</dd>
      <dt>Вес</dt>
      <dd>8&nbsp;кг</dd>
    </dl>
  </body>
</html>

Значение списка описаний (элемент <dd>) по умолчанию имеет внешний отступ слева, равный 40 пикселям. У одного термина может быть несколько описаний, а у нескольких терминов — одно общее. Внутрь <dd> допускается вкладывать другие списки, в том числе списки описаний.

Списки ссылок и меню

Маркированные, нумерованные списки и списки описаний могут содержать внутри пунктов другие элементы HTML: ссылки, изображения, абзацы. Особенно часто список ссылок служит меню сайта: каждый пункт — ссылка на страницу.

<ul>
  <li><a href="index.html">Главная</a></li>
  <li><a href="pages/toys.html">Мои игрушки</a></li>
</ul>

Список подсказывает программе экранного доступа, сколько пунктов в меню. Расположить пункты горизонтально и убрать маркеры можно с помощью CSS, а обозначить блок навигации — элементом <nav>, который мы рассмотрим в статье «Теги разметки страницы».

Элемент menu

Тег <menu> по современному стандарту — разновидность маркированного списка для набора команд, например кнопок панели инструментов. Браузер отображает его так же, как <ul>. Для меню из ссылок на страницы сайта используйте <ul>.

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

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

1. 1
2. 2
3. 3
4. 4
5. 5
6. 6

1. Какой список выбрать для шагов рецепта, где важен порядок действий?

<ol>

<ul>

<dl>

Показать ответ

<ol> — Нумерованный список предназначен для пунктов, порядок которых важен.

2. С какого обозначения начнётся список <ol type="A" start="3">?

3

C

A

Показать ответ

C — При буквенной нумерации start задаёт порядковый номер буквы: третья буква — C.

3. Где правильно разместить вложенный список?

Между элементами <li>, прямо внутри <ul>

Внутри элемента <li> того пункта, к которому он относится

После закрывающего тега </ul>

Показать ответ

Внутри элемента <li> того пункта, к которому он относится — Вложенный список — часть пункта, поэтому он находится внутри <li>, перед его закрывающим тегом.

4. Какой маркер по умолчанию получат пункты маркированного списка второго уровня?

Закрашенный круг

Пустой круг

Квадрат

Показать ответ

Пустой круг — Браузер меняет маркеры по уровням: закрашенный круг, пустой круг, затем квадрат.

5. Как разметить сведения «Порода — карликовый пинчер», «Вес — 8 кг»?

<dl> с парами <dt> и <dd>

<ol> из двух пунктов

Двумя заголовками <h2>

Показать ответ

<dl> с парами <dt> и <dd> — Пары «имя — значение» размечают списком описаний: <dt> — имя, <dd> — значение.

6. Что изменит style="list-style-type: none" у списка?

Превратит список в обычные абзацы

Уберёт маркеры, но элемент останется списком

Скроет список со страницы

Показать ответ

Уберёт маркеры, но элемент останется списком — list-style-type управляет только видом маркера.

← Назад Далее →

Задание

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

В файле index.html:

• сразу после открывающего тега <body> добавьте меню — маркированный список из ссылок «Главная» (index.html) и «Мои игрушки» (pages/toys.html);
• замените абзац с немецкими командами списком описаний: термины — немецкие команды Sitz!, Platz!, Fuß! с атрибутом lang="de", описания — «сидеть», «лежать», «рядом».

В файле pages/toys.html:

• добавьте такое же меню; подумайте, какими должны быть пути из папки pages;
• три строки об игрушках оформите маркированным списком;
• четыре шага под заголовком «Как играть со мной в канат» оформите нумерованным списком.

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Сайт Тони</title>
  </head>
  <body>
    <h1>Привет! Меня зовут Тони</h1>
    <p>Я карликовый пинчер. Мне три года, я вешу 8&nbsp;кг и люблю гулять в любую погоду.</p>
    <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>
    <p lang="de" title="Сидеть! Лежать! Рядом!">Sitz! Platz! Fuß!</p>
  </body>
</html>

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Игрушки Тони</title>
  </head>
  <body>
    <h1>Мои игрушки</h1>
    Канат с мячиком «Удав» — моя любимая игрушка
    Резиновая косточка — для вечеров, когда гулять уже поздно
    Пищащий ёжик — его я прячу под диваном
    <img src="../assets/tony.png" alt="Тони сидит и смотрит в камеру" width="300" height="400">
    <h2>Как играть со мной в канат</h2>
    Покажите мне канат.
    Бросьте его подальше.
    Подождите, пока я принесу его обратно.
    Похвалите меня — и всё сначала!
    <p><a href="../index.html">Вернуться на главную</a></p>
  </body>
</html>

Ожидаемый результат: на обеих страницах вверху меню из двух ссылок с маркерами, и по нему можно перейти с главной страницы на страницу игрушек и обратно. На главной команды идут столбиком, а перевод каждой сдвинут вправо. На странице игрушек — три игрушки с маркерами и четыре шага игры, пронумерованные от 1 до 4.

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

1. Нажмите «Скачать ZIP» в редакторе выше и распакуйте архив в папку my-site: он содержит все страницы и ресурсы примера с вашими текущими правками. Сохраните структуру папок; перед заменой существующих файлов сохраните копию своей версии сайта.
2. Откройте index.html в браузере и пройдите по меню на обеих страницах.

Ожидаемый результат: страницы в браузере выглядят так же, как в редакторе, а пункты меню открывают нужные страницы. Если какая-то ссылка меню на странице игрушек не работает, проверьте путь: из папки pages на главную ведёт ../index.html.

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

Дополнительное задание: списки по образцу

Чтобы закрепить атрибуты нумерации и вложенность, повторите четыре списка по образцам ниже. Пишите их в редакторе под образцами друг за другом.

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Списки по образцу</title>
  </head>
  <body>
    <!-- Образец 1 -->

    <!-- Образец 2 -->

    <!-- Образец 3 -->

    <!-- Образец 4 -->
  </body>
</html>

Ожидаемый результат: четыре списка в редакторе выглядят как на образцах. В образцах 3 и 4 вид маркеров задаётся атрибутом style со свойством list-style-type.

<div contextmenu="testmenu">
  Кликни по мне правой кнопкой мыши.
  <menu type="context" id="testmenu">
    <menuitem label="like"></menuitem>
    <menuitem label="dislike"></menuitem>
  </menu>
</div>