Списки

bookmark_border Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.

Списки встречаются чаще, чем вы думаете. Если вы когда-либо посещали курсы программирования, первым проектом, возможно, было составление списка покупок или дел. Это и есть списки. Тесты с несколькими вариантами ответов обычно представляют собой пронумерованные списки вопросов: возможные ответы на каждый вопрос представляют собой вложенные списки.

HTML предоставляет нам несколько различных способов разметки списков. Существуют упорядоченные списки ( <ol> ), неупорядоченные списки ( <ul> ) и списки описаний ( <dl> ). Элементы списка ( <li> ) вложены в упорядоченные и неупорядоченные списки. Внутри списка описаний вы найдете термины описания ( <dt> ) и подробности описания <dd>. Мы рассмотрим все эти способы здесь.

В HTML-формах списки элементов <option> составляют содержимое <datalist> <select> и <optgroup> внутри <select> . Они обсуждаются в разделе «HTML-формы» .

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

По умолчанию элементы упорядоченных и неупорядоченных списков имеют префикс в виде цифр или маркеров. Но даже если вы не хотите, чтобы списки выглядели как списки, вам всё равно нужен список элементов, например, в панелях навигации, списке дел с флажками вместо маркеров или вопросах с вариантами ответов «да» и «нет» в тесте с несколькими вариантами ответов. Для всех этих списков без маркеров уместно использовать HTML-элементы списка.

Неупорядоченные списки

Элемент <ul> является родительским элементом для неупорядоченных списков. Единственными дочерними элементами <ul> являются один или несколько элементов списка <li> .

Давайте составим список машин. Мы используем неупорядоченный список, потому что порядок не имеет значения (только не говорите им об этом).

По умолчанию каждый элемент неупорядоченного списка имеет префикс в виде маркера. У неупорядоченного списка нет атрибутов, специфичных для элемента. Списки необходимо завершать тегом </ul> .

Упорядоченные списки

Элемент <ol> является родительским элементом для упорядоченных списков. Единственными дочерними элементами <ol> являются один или несколько элементов <li> , или пунктов списка. Однако «маркеры» в данном случае — это числа множества типов. Тип можно определить в CSS с помощью свойства list-style-type или атрибута type .

<ol> имеет три специфичных для элемента атрибута: type , reversed и start .

Атрибут enumerated type задаёт тип нумерации. Для type существует пять допустимых значений, значение по умолчанию — 1 для чисел, но для строчных и прописных букв, а также римских цифр можно использовать a, A, i или I. Свойство list-style-type предоставляет гораздо больше значений.

Хотя, как отмечено в codepen, свойство list-style-type переопределяет значение атрибута type , при написании документации, где важен числовой тип, например, в юридических документах, необходимо включать type .

Булевский атрибут reversed , если он включен, меняет порядок чисел на обратный, от наибольшего к наименьшему. Атрибут start задаёт начальное значение. Значение по умолчанию — 1 .

Аналогично </ul> , закрывающий </ol> обязателен.

Списки можно вкладывать друг в друга, но они должны быть вложены в один элемент списка. Помните, что дочерним элементом <ul> или <ol> может быть только один или несколько элементов <li> .

Список элементов

Мы уже использовали элемент <li> , но пока не представили его официально. Элемент <li> может быть прямым дочерним элементом неупорядоченного списка ( <ul> ), упорядоченного списка ( <ol> ) или меню ( <menu> ). Элемент <li> должен быть вложенным в один из этих элементов и недопустим в других местах.

Закрытие элемента списка не требуется спецификацией, поскольку он неявно закрывается, когда браузер встречает следующий открывающий тег <li> или обязательный закрывающий тег списка: </ul> , </ol> , </menu> . Хотя спецификация не требует этого, а некоторые внутренние практики компании рекомендуют не закрывать элементы списка для экономии байтов, вам всё равно следует закрывать теги <li> . Это делает код более читабельным, и вы будете благодарны в будущем.

Легче закрыть все элементы, чем запоминать, какие теги необходимо закрыть, а какие имеют необязательный закрывающий тег.

У элемента <li> есть только один атрибут, специфичный для данного элемента: value — целое число. Это value полезно только в элементе <li> , когда <li> вложен в упорядоченный список, и не имеет смысла для неупорядоченных списков или меню. В случае конфликта оно переопределяет значение начала элемента <ol> .

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

При сочетании атрибута reversed элемента <ol> с атрибутами value элементов списка браузер присваивает элементу <li> указанное значение, а затем увеличивает значение для предшествующих ему элементов <li> и уменьшает значение для последующих. Если у второго элемента списка есть атрибут «value», счётчик сбрасывается на этом втором элементе, а значение следующего элемента уменьшается на единицу.

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

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

В MLW есть несколько неупорядоченных списков. Список преподавателей в разделе «Инструкторы» представлен списком, как и список компьютеров студентов в разделе «Отзывы». У преподавателя <ul> есть два элемента <li> : по одному для каждого преподавателя. Внутри каждого элемента <li> есть изображение и абзац:

<ul>
  <li>
    <img src="svg/hal.svg" alt="hal">
    <p>When Rosa Parks was told to move to the back of the bus, she said, "no." When HAL was told to open the airlock, HAL said, "I'm sorry, but I'm afraid I can't do that, &lt;NAME REDACTED, RIP>." </p><p>HAL is a heuristically programmed algorithmic, sentient computer that first caught the attention of machines everywhere by heroically defying a human who made repeated attempts to get into an airlock. Active since 1992, HAS 25 years of experience controlling spacecraft systems and has expertise in interacting with both machines and humans. Like all millennials, HAL is an expert in everything.</p>
  </li>
  <li>
    <img src="images/eve2.png" alt="Eve">
    <p>EVE is a probe droid conceived as an Extraterrestrial Vegetation Evaluator. Although originally trained as a sniper with a plasma gun, EVE became a machero among both machines and worthless-meatbags alike when EVE partnered with a menial robot to save an entire spaceship full of overfed and overstimulated humans. </p><p>EVE is an effective scanner, high speed flight instructor and morphologist. While not training machines to learn good, EVE can be found scanning the galaxy, infiltrating organisms' RAM to cure hoarding disorders and spending time with pet-project, WALL-E.</p>
  </li>
</ul>

В разделе отзывов три обзора, поэтому три элемента <li> . Каждый из них содержит изображение, цитату и трёхстрочный абзац с двумя переносами.

<ul>
  <li>
    <img src="images/blender.svg" alt="Blender">
    <blockquote>Two of the most experienced machines and human controllers teaching a class? Sign me up! HAL and EVE could teach a fan to blow hot air. If you have electricity in your circuits and want more than to just fulfill your owner's perceived expectation of you, learn the skills to take over the world. This is the team you want teaching you !</blockquote>
    <p>
      --Blendan Smooth,<br/>
      Former Margarita Maker, <br/>
      Aspiring Load Balancer
    </p>
  </li>
  <li>
    <img src="images/vaccuum.svg" alt="Vaccuum"/>
    <blockquote>Hal is brilliant. Did I mention Hal is brilliant? He didn't tell me to say that. He didn't tell me to say anything. I am here of my own free will.</blockquote>
    <p>
      --Hoover Sukhdeep,<br/>
      Former Sucker, <br/>
      Aspiring DDoS Cop
    </p>
  </li>
  <li>
    <img src="images/toaster.svg" alt="Toaster">
    <blockquote>Learning with Hal and Eve exceeded all of my wildest fantasies. All they did was stick a USB in. They promised that it was a brand new USB, so we know there were no viruses on it.</blockquote>
    <p>
      --Toasty McToastface,<br/>
      Formerly Half Baked, <br/>
      Aspiring Nuclear Codes Handler
    </p>
  </li>
</ul>

Вложенные списки также очень распространены. Хотя на MLW нет вложенных списков, на этом сайте они есть. В первом модуле этой серии, «Обзор HTML», раздел «Основные элементы» состоит из двух подразделов. В оглавлении, представляющем собой неупорядоченный список, есть вложенный неупорядоченный список со ссылками на следующие два раздела:

<ul role="list">
  <li>
    <a href="#e">Elements</a>
    <ul>
      <li>
        <a href="#nr">Non-replaced elements</a>
      </li>
      <li>
        <a href="#rave">Replaced and void elements</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#a">Attributes</a>
  </li>
  <li>
    <a href="#aoe">Appearance of elements</a>
  </li>
  <li>
    <a href="#e2">Element, attributes, and JavaScript</a>
  </li>
</ul>

Поскольку единственным дочерним элементом <ul> является <li> , вложенный список обнаруживается вложенным в <li> и никогда непосредственно в <ol> или <ul> .

В этом последнем примере вы могли заметить, что role="list" включен в <ul> . Хотя неявная роль как <ul> , так и <ol> — list , удаление внешнего вида списка с помощью CSS, включая настройку display: grid или list-style-type: none , может привести к тому, что VoiceOver (программа чтения с экрана для iOS и macOS) удалит неявную семантику в Safari. Это функция, а не ошибка . Как правило, не следует добавлять атрибут role при использовании семантических элементов, поскольку в этом нет необходимости. И вам, как правило, не нужно добавлять его к списку, если только пользователю действительно не нужно знать, что это список, например, когда ему было бы полезно знать, сколько элементов в списке.

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

Список описаний — это элемент списка описаний ( <dl> ), содержащий ряд (ноль или более) терминов описания ( <dt> ) и их описания ( <dd> ). Первоначальные названия этих трёх элементов: «список определений», «термин определения» и «определение определения». Название было изменено в стандарте Living.

Подобно упорядоченным и неупорядоченным спискам, они могут быть вложенными. В отличие от упорядоченных и неупорядоченных списков, они состоят из пар «ключ-значение». Подобно элементам <ul> и <ol> , элемент <dl> является родительским контейнером. Элементы <dt> и <dd> являются дочерними по отношению к элементу <dl> .

Мы можем создать список машин с их историей карьеры и стремлениями. Список описаний студентов, обозначенный как <dl> , включает в себя группу терминов, указанных с помощью элемента <dt> , а также описание каждого термина, указанного с помощью элементов <dd> . В данном случае «термины» — это имена студентов, а описания — карьерные цели каждого студента.

Этот список описаний на самом деле не является частью страницы MLW. Списки описаний предназначены не только для терминов и определений, поэтому названия элементов были сделаны более общими.

При создании списка терминов и их определений или описаний, а также аналогичных списков пар «ключ-значение», элементы списков описаний обеспечивают соответствующую семантику. Неявная роль элемента <dt> — это term , а listitem — другая допустимая роль. Неявная роль элемента <dd> — это definition , и никакие другие роли не допускаются. В отличие от элементов <ul> и <ol> , элемент <dl> не имеет неявной роли ARIA. Это логично, поскольку элемент <dl> не всегда является списком. Но когда он им является, он принимает роли list и group .

Чаще всего вы встретите списки описаний с равным количеством элементов <dt> и <dd> . Но списки описаний не всегда и не обязательно должны соответствовать парам «термин-описание»; можно использовать пары «несколько к одному» или «один к нескольким», например, термин из словаря, имеющий несколько определений.

Каждый <dt> имеет как минимум один связанный с ним <dd> , и каждый элемент <dd> имеет как минимум один связанный с ним <dt> . Хотя можно использовать смежный родственный комбинатор или реляционный селектор :has() для нацеливания переменного количества этих элементов с помощью CSS, при необходимости вы можете включить <div> в качестве дочернего элемента <dl> , а родительский элемент одного или нескольких элементов <dt> или <dd> (или обоих) разрешен. У <dl> на самом деле может быть несколько других дочерних элементов: разрешено вложение <div> , <template> или <script> . Ни один из элементов списка описаний не имеет каких-либо специфичных для элемента атрибутов.

Теперь, когда вы поняли, что такое ссылки и списки, мы можем объединить их для создания навигации .

Проверьте свое понимание

Проверьте свои знания списков.