Язык HTML поддерживает три разных типа списка. По умолчанию они используют стандартные теги и визуализируют стандартными способами, хотя для более сложных стилей любого из этих элементов обычно требуется таблица стилей.
Три типа списков в HTML
HTML предлагает три варианта использования для отображения содержимого на странице.
- Упорядоченные списки : их иногда называют нумерованными списками, поскольку по умолчанию элементы списка, содержащиеся в этом списке, имеют определенный числовой порядок или ранжирование. Упорядоченные списки подходят там, где точный порядок элементов важен для смысла контента. Например, рецепт, скорее всего, будет использовать упорядоченный список, потому что шаги происходят в последовательности. Любой пошаговый процесс лучше всего представить в виде упорядоченного списка.
- Ненумерованные списки : их иногда называют маркированными списками, потому что по умолчанию визуальный неупорядоченный список по умолчанию должен иметь маленькие значки маркеров перед элементами списка. Этот тип списка лучше всего использовать, когда порядок элементов не является существенным. Элементы списка будут отображаться в любом порядке, в котором вы их кодируете для HTML , но вы определяете этот порядок и, в отличие от рецепта или пошагового процесса, порядок может быть изменен, и значение содержимого не пострадает.
- Списки определений : это списки элементов, которые состоят из двух частей: определяемого термина и определения. Они обычно используются для отображения пары определение / описание, как вы можете найти в словаре, но списки определений также могут использоваться для многих других видов контента.
Списки в целом
Со списками все элементы соединяются с открывающими и закрывающими тегами. Эти пары управляют как маркерами типа списка, так и отдельными элементами элемента списка.
Упорядоченные списки
Используйте тег <ol> (обязательный тег </ ol> ), чтобы создать нумерованный список с номерами, начинающимися с 1. Элементы создаются с парой тегов <li> .
HTML выглядит так:
<ol>
<li> Шаг первый </ li>
<li> Шаг второй </ li>
<li> Шаг третий </ li>
</ ol>
И результат выглядит так:
- Первый шаг
- Шаг второй
- Шаг третий
Неупорядоченные списки
Используйте тег <ul> (обязательный тег </ ol> ), чтобы создать список с маркерами вместо цифр. Как и в случае упорядоченного списка, элементы создаются с помощью пары тегов <li> .
HTML выглядит так:
<ul>
<li> Яблоки </ li>
<li> Апельсины </ li>
<li> Груши </ li>
</ ul>
И результат выглядит так:
- яблоки
- апельсины
- груши
Списки определений
Списки определений создают список с двумя частями для каждой записи: имя или термин, который должен быть определен, и определение. Используйте <dl>, чтобы создать список, и используйте <dt>, чтобы указать термин, и <dd>, чтобы предложить определение.
HTML выглядит так:
<dl>
<dt> Кошка </ dt>
<dd> Симпатичное четвероногое животное. </ dd>
<dt> Интернет </ dt>
<dd> Интернет-сообщество, оптимизированное для фотографий кошек. </ dd>
</ dl>
И результат выглядит так:
