Списки

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

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 .

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

Хотя, как отмечено в коде, свойство 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> и начнет обратный отсчет для следующих за ним значений. Если второй элемент списка имеет атрибут значения, счетчик будет сброшен для этого второго элемента списка, а последующее значение уменьшится на единицу.

Всем этим также можно управлять с помощью счетчиков 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. The Russians had nothing to do with it. This has
    <span style="font-family:Arial;vertical-align:baseline;">no̶̼͖ţ̘h̝̰̩͈̗i̙̪n͏̩̙͍̱̫̜̟g̢̣ͅ&nbsp;̗̰͓̲̞̀t͙̀o̟̖͖̹̕&nbsp;͓̼͎̝͖̭dó̪̠͕̜&nbsp;͍̱͎͚̯̟́w̮̲̹͕͈̟͞ìth̢&nbsp;̰̳̯̮͇i</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. Это особенность, а не ошибка . Как правило, не следует добавлять атрибут роли при использовании семантических элементов, поскольку в этом нет необходимости. И, как правило, вам также не нужно добавлять его в список, если только пользователю действительно не нужно знать, что это список, например, когда пользователю будет полезно знать, сколько элементов в списке.

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

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

Подобно упорядоченным и неупорядоченным спискам, они могут быть вложенными. В отличие от упорядоченных и неупорядоченных списков, они состоят из пар ключ/значение. Подобно <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> . Ни один из элементов списка описаний не имеет атрибутов, специфичных для элемента.

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

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

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