: the unordered list element

Usage notes

  • The element is for grouping a collection of items that do not have a numerical ordering, and their order in the list is meaningless. Typically, unordered-list items are displayed with a bullet, which can be of several forms, like a dot, a circle, or a square. The bullet style is not defined in the HTML description of the page, but in its associated CSS, using the property.
  • The and elements may be nested as deeply as desired. Moreover, the nested lists may alternate between and without restriction.
  • The and elements both represent a list of items. They differ in that, with the element, the order is meaningful. As a rule of thumb to determine which one to use, try changing the order of the list items; if the meaning is changed, the element should be used, otherwise you can use .

Sumário

Não há limitação para a profundidade e a imbricação das listas definidas com os elementose.


Nota de uso: Ambos os elementose, representam uma lista de itens. Diferem porque, com o elemento,a ordem é significativa. Como regra de ouro para determinar qual deles usar, tente mudar a ordem dos itens da lista; se a significação for alterada, o elementodeve ser utilizado, senão o elementoé adequado.

  • Categorias de conteúdo e no caso dos elementos filhos deincluirem pelo menos um elemento de conteúdo evidente.
  • Conteúdo permitido Zero ou mais elementos
  • Omissão de etiqueta (Tag) None, both the starting and ending tag are mandatory.
  • Elementos pai permitidos Qualquer elemento que aceite .

Поддержка браузерами

Таблица «поддержка браузерами» сгенерирована с помощью структурированных данных. Если хотите внести вклад в данные, ознакомьтесь с https://github.com/mdn/browser-compat-data и отправьте нам pull request.

Update compatibility data on GitHub

Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome для Android Firefox для Android Opera для Android Safari on iOS Samsung Internet
Chrome Полная поддержка Да Edge Полная поддержка 12 Firefox Полная поддержка 1 IE Полная поддержка Да Opera Полная поддержка Да Safari Полная поддержка Да WebView Android Полная поддержка Да Chrome Android Полная поддержка Да Firefox Android Полная поддержка 4 Opera Android Полная поддержка Да Safari iOS Полная поддержка Да Samsung Internet Android Полная поддержка Да

УстаревшаяНестандартная

Chrome Полная поддержка Да Edge Полная поддержка 12 Firefox Полная поддержка 1 IE Полная поддержка Да Opera Полная поддержка Да Safari Полная поддержка Да WebView Android Полная поддержка Да Chrome Android Полная поддержка Да Firefox Android Полная поддержка 4 Opera Android Полная поддержка Да Safari iOS Полная поддержка Да Samsung Internet Android Полная поддержка Да
Chrome Полная поддержка 18 Edge Полная поддержка ≤79 Firefox Полная поддержка 18 IE Нет поддержки Нет Opera Полная поддержка Да Safari Полная поддержка 6 WebView Android Полная поддержка Да Chrome Android Полная поддержка Да Firefox Android Полная поддержка 18 Opera Android Полная поддержка Да Safari iOS Полная поддержка Да Samsung Internet Android Полная поддержка Да
Chrome Полная поддержка Да Edge Полная поддержка 12 Firefox Полная поддержка 1 IE Полная поддержка Да Opera Полная поддержка Да Safari Полная поддержка Да WebView Android Полная поддержка Да Chrome Android Полная поддержка Да Firefox Android Полная поддержка 4 Opera Android Полная поддержка Да Safari iOS Полная поддержка Да Samsung Internet Android Полная поддержка Да
Chrome Полная поддержка Да Edge Полная поддержка 12 Firefox Полная поддержка 1 IE Полная поддержка Да Opera Полная поддержка Да Safari Полная поддержка Да WebView Android Полная поддержка Да Chrome Android Полная поддержка Да Firefox Android Полная поддержка 4 Opera Android Полная поддержка Да Safari iOS Полная поддержка Да Samsung Internet Android Полная поддержка Да

Предисловие

По умолчанию, в большинстве шаблонов данные списки имеют оформление простых цифр (нумерованный список ol li) и обыкновенных квадратиков и кружков черного цвета (ненумерованный, маркерованный список ul li).

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

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

На моем блоге также списки оформлены. Ненумерованные имеют вид чек-боксов в рамке с чередованием цветов через один пункт.

И сегодня я еще оформил нумерованный список, который имеет теперь не просто вид цифр, а они оформленные фоном, что значительно проще воспринимается и сразу замечается посетителем.

Конечно, можно сделать нумерацию более привлекательной, но я остановился на таком варианте. Также можно делать не просто цифры на фоне, а для каждого номера списка назначит свою индивидуальную иконку. Это мы также рассмотрим. Теперь перейдем к практике.

示例

<ol>
  <li>Fee</li>
  <li>Fi</li>
  <li>Fo</li>
  <li>Fum</li>
</ol>

以上 HTML 输出如下:

<ol type="i">
  <li>Introduction</li>
  <li>List of Greivances</li>
  <li>Conclusion</li>
</ol> 

以上 HTML 输出如下:

使用 属性

<p>Finishing places of contestants not in the winners’ circle:</p>

<ol start="4">
  <li>Speedwalk Stu</li>
  <li>Saunterin’ Sam</li>
  <li>Slowpoke Rodriguez</li>
</ol>

以上 HTML 输出如下:

嵌套列表

<ol>
  <li>first item</li>
  <li>second item  <!-- closing </li> tag not here! -->
    <ol>
      <li>second item first subitem</li>
      <li>second item second subitem</li>
      <li>second item third subitem</li>
    </ol>
  </li>            <!-- Here's the closing </li> tag -->
  <li>third item</li>
</ol>

以上 HTML 输出如下:

嵌套有序列表和无序列表

<ol>
  <li>first item</li>
  <li>second item  <!-- closing </li> tag not here! -->
    <ul>
      <li>second item first subitem</li>
      <li>second item second subitem</li>
      <li>second item third subitem</li>
    </ul>
  </li>            <!-- Here's the closing </li> tag -->
  <li>third item</li>
</ol>

以上 HTML 输出如下:

Примеры

<ol>
  <li>Fee</li>
  <li>Fi</li>
  <li>Fo</li>
  <li>Fum</li>
</ol>

Результат HTML кода выше:

Список с Римскими числами

<ol type="i">
  <li>Introduction</li>
  <li>List of Greivances</li>
  <li>Conclusion</li>
</ol> 

Результат HTML кода выше:

Используя свойство

<p>Finishing places of contestants not in the winners’ circle:</p>

<ol start="4">
  <li>Speedwalk Stu</li>
  <li>Saunterin’ Sam</li>
  <li>Slowpoke Rodriguez</li>
</ol>

Результат HTML кода выше:

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

<ol>
  <li>first item</li>
  <li>second item  <!-- closing </li> tag not here! -->
    <ol>
      <li>second item first subitem</li>
      <li>second item second subitem</li>
      <li>second item third subitem</li>
    </ol>
  </li>            <!-- Here's the closing </li> tag -->
  <li>third item</li>
</ol>

Результат HTML кода выше:

Неупорядоченный список внутри упорядоченного списка

<ol>
  <li>first item</li>
  <li>second item  <!-- closing </li> tag not here! -->
    <ul>
      <li>second item first subitem</li>
      <li>second item second subitem</li>
      <li>second item third subitem</li>
    </ul>
  </li>            <!-- Here's the closing </li> tag -->
  <li>third item</li>
</ol>

Результат HTML кода выше:

Attributes

This element includes the global attributes.

This Boolean attribute hints that the list should be rendered in a compact style. The interpretation of this attribute depends on the user agent, and it doesn’t work in all browsers.
Warning: Do not use this attribute, as it has been deprecated: use CSS instead. To give a similar effect as the attribute, the CSS property can be used with a value of .
This attribute sets the bullet style for the list. The values defined under HTML3.2 and the transitional version of HTML 4.0/4.01 are:

A fourth bullet type has been defined in the WebTV interface, but not all browsers support it: .


If not present and if no CSS property applies to the element, the user agent selects a bullet type depending on the nesting level of the list.

Warning: Do not use this attribute, as it has been deprecated; use the CSS property instead.

Attributes

This element includes the global attributes.

This integer attribute indicates the current ordinal value of the list item as defined by the element. The only allowed value for this attribute is a number, even if the list is displayed with Roman numerals or letters. List items that follow this one continue numbering from the value set. The value attribute has no meaning for unordered lists () or for menus (). Note: This attribute was deprecated in HTML4, but reintroduced in HTML5.
This character attribute indicates the numbering type:
  • : lowercase letters
  • : uppercase letters
  • : lowercase Roman numerals
  • : uppercase Roman numerals
  • : numbers

This type overrides the one used by its parent element, if any.

Note: This attribute has been deprecated; use the CSS property instead.

HTML Tags

<!—><!DOCTYPE><a><abbr><acronym><address><applet><area><article><aside><audio><b><base><basefont><bdi><bdo><big><blockquote><body><br><button><canvas><caption><center><cite><code><col><colgroup><data><datalist><dd><del><details><dfn><dialog><dir><div><dl><dt><em><embed><fieldset><figcaption><figure><font><footer><form><frame><frameset><h1> — <h6><head><header><hr><html><i><iframe><img><input><ins><kbd><label><legend><li><link><main><map><mark><meta><meter><nav><noframes><noscript><object><ol><optgroup><option><output><p><param><picture><pre><progress><q><rp><rt><ruby><s><samp><script><section><select><small><source><span><strike><strong><style><sub><summary><sup><svg><table><tbody><td><template><textarea><tfoot><th><thead><time><title><tr><track><tt><u><ul><var><video>

Browser compatibility

The compatibility table in this page is generated from structured data. If you’d like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
Chrome Full support Yes Edge Full support 12 Firefox Full support 1 IE Full support Yes Opera Full support Yes Safari Full support Yes WebView Android Full support Yes Chrome Android Full support Yes Firefox Android Full support 4 Opera Android Full support Yes Safari iOS Full support Yes Samsung Internet Android Full support Yes

DeprecatedNon-standard

Chrome Full support Yes Edge Full support 12 Firefox Full support 1 IE Full support Yes Opera Full support Yes Safari Full support Yes WebView Android Full support Yes Chrome Android Full support Yes Firefox Android Full support 4 Opera Android Full support Yes Safari iOS Full support Yes Samsung Internet Android Full support Yes

DeprecatedNon-standard

Chrome Full support Yes Edge Full support 12 Firefox Full support 1 IE Full support Yes Opera Full support Yes Safari Full support Yes WebView Android Full support Yes Chrome Android Full support Yes Firefox Android Full support 4 Opera Android Full support Yes Safari iOS Full support Yes Samsung Internet Android Full support Yes

Свойства

Этот элемент включает глобальные атрибуты.

Атрибут логического значения (bool)  показывает, что предметы указаны по списку в обратном порядке. Пункты в списке будут пронумерованы от большего к меньшему.
Нумерация начнется с указанного числа. Арабскими цифрами (1, 2, 3, и т.д.), даже когда нумерация в буквах или Римском исчислении. Например, чтобы начать нумерацию с буквы «г» или Римской «iv», используйте .
Задаёт тип нумерации:
  • для строчных букв
  • для заглавных букв
  • для строчной Римской нумерации
  • для заглавной Римской нумерации
  • для цифр (по умолчанию)

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

More Examples

Example

Display all the different list types available with CSS:

<style>ol.a {list-style-type: armenian;}ol.b {list-style-type: cjk-ideographic;} ol.c {list-style-type: decimal;}ol.d {list-style-type: decimal-leading-zero;}ol.e {list-style-type: georgian;}ol.f {list-style-type: hebrew;}ol.g {list-style-type: hiragana;}ol.h {list-style-type: hiragana-iroha;}ol.i {list-style-type: katakana;} ol.j {list-style-type: katakana-iroha;}ol.k {list-style-type: lower-alpha;}ol.l {list-style-type: lower-greek;}ol.m {list-style-type: lower-latin;}ol.n {list-style-type: lower-roman;} ol.o {list-style-type: upper-alpha;}ol.p {list-style-type: upper-latin;} ol.q {list-style-type: upper-roman;}ol.r {list-style-type: none;} ol.s {list-style-type: inherit;}</style>

Несколько разно-оформленных списков на одной странице

Бывает, когда требуется не просто оформить списки, а разместить несколько разных по оформлению список на одной странице.

Если мы назначим общие стили, то одно оформление будет назначаться ко всем спискам. Ну, а допустим, что нам нужно разместить 2 списка, но, чтобы у одного были иконки чек-боксов, а у другого иконки в виде полноценных картинок. Как такое реализовать?

Все просто. Если вы посмотрите на мои материалы, то в начале каждого имеется содержание, оформленное с помощью фона и левой бордюры, но по сути, это тот же нумерованный список. Просто я ему назначил отдельный id, прописав его в html режиме.


Затем в файл стилей прописал отличные стили от общих для всех списков.

ol#sod{
padding: 0px 20px 10px 51px;
margin: 0.5em 0 0em 1em;
color: #2E2E2E;
list-style-type: none;
background: #f1f4f5;
border-left: #BDC3C7 4px solid;
display: inline-block;
}

ol#sod li{}

ol#sod li:before{
font-weight:normal !important
}

Как видим, то просто необходимо скопировать стили для общего оформления списков, затем в скопированном варианте дописать название того ID, который добавили к тегу ul или ol, и изменить стили, чтобы оформление различалось.

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

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

Итак, друзья! Данный материал можно заканчивать. Я не пытался вас научить премудростям CSS. Целью было лишь показать варианты индивидуального оформления списков, так как с этим имееются сложности и я сам когда-то помучился.

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

А на этом все. В следующей статье про дизайн мы поговорим об основных ошибках дизайна на сайте и о том, что вам сейчас пытаются «впарить» в мозг, некоторые блоггеры по поводу дизайна сайтов и блогов. Не пропустите.

Все. Пока.

Examples

<ul>
  <li>first item</li>
  <li>second item</li>
  <li>third item</li>
</ul>

The above HTML will output:

Nesting a list

<ul>
  <li>first item</li>
  <li>second item     
  <!-- Look, the closing </li> tag is not placed here! -->
    <ul>
      <li>second item first subitem</li>
      <li>second item second subitem
      <!-- Same for the second nested unordered list! -->
        <ul>
          <li>second item second subitem first sub-subitem</li>
          <li>second item second subitem second sub-subitem</li>
          <li>second item second subitem third sub-subitem</li>
        </ul>
      </li> <!-- Closing </li> tag for the li that
                  contains the third unordered list -->
      <li>second item third subitem</li>
    </ul>
  <!-- Here is the closing </li> tag -->
  </li>
  <li>third item</li>
</ul>

The above HTML will output:

Ordered list inside unordered list

<ul>
  <li>first item</li>
  <li>second item
  <!-- Look, the closing </li> tag is not placed here! -->
    <ol>
      <li>second item first subitem</li>
      <li>second item second subitem</li>
      <li>second item third subitem</li>
    </ol>
  <!-- Here is the closing </li> tag -->
  </li>
  <li>third item</li>
</ul>

The above HTML will output:


С этим читают