HTML-списки используются для представления списка информации в правильной и семантической форме. В HTML есть три разных типа списка, и у каждого есть свое назначение.

  • Неупорядоченные списки (ul, сокращенно от unordered lists) — список элементов, где каждый элемент списка помечен маркером;
  • Упорядоченные списки (ol, сокращенно от ordered lists) — список элементов, где каждый элемент списка помечен номером;
  • Список определений (dl, сокращенно от definition list) — список элементов с описанием каждого элемента.

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

Теперь рассмотрим списки по очереди.

Использование HTML-тега <ul>

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

Элементы списка в неупорядоченных списках отмечены маркерами. Вот пример:

<ul>
    <li>Chocolate Cake</li>
    <li>Black Forest Cake</li>
    <li>Pineapple Cake</li>
</ul>

Результат вышеприведенного примера будет выглядеть примерно так:

  • Chocolate Cake
  • Black Forest Cake
  • Pineapple Cake

Вы также можете изменить тип маркера в неупорядоченном списке, используя CSS-свойство list-style-type. Следующее правило изменяет тип маркера с диска по умолчанию на квадрат:

ul {
    list-style-type: square;
}

См. Руководство по спискам в CSS, чтобы узнать подробнее о стилизации списков HTML.

Использование HTML-тега <ol>

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

Элементы списка в упорядоченном списке отмечены номерами. Вот пример:

<ol>
    <li>Fasten your seatbelt</li>
    <li>Starts the car's engine</li>
    <li>Look around and go</li>
</ol>

Результат вышеприведенного примера будет выглядеть примерно так:

  1. Fasten your seatbelt
  2. Starts the car’s engine
  3. Look around и go

Нумерация элементов в упорядоченном списке обычно начинается с 1. Однако, если вы хотите изменить это, вы можете использовать атрибут start, как показано в следующем примере:

<ol start="10">
    <li>Mix ingredients</li>
    <li>Bake in oven for an hour</li>
    <li>Allow to stand for ten minutes</li>
</ol>

Результат вышеприведенного примера будет выглядеть примерно так:

  1. Mix ingredients
  2. Bake in oven for an hour
  3. Allow to stи for ten minutes

Как и неупорядоченный список, вы можете использовать CSS-свойство list-style-type для изменения типа нумерации в упорядоченном списке. Следующее правило меняет тип маркера на римские цифры.

ol {
    list-style-type: upper-roman;
}

Вы также можете использовать атрибут type для изменения типа нумерации, например, type="I". Однако вам следует избегать этого атрибута, вместо этого используйте CSS-свойство list-style-type.

Использование HTML-тега <dl>

Список описаний — это список элементов с описанием или определением каждого элемента.

Список описаний создается с использованием элемента <dl>. Элемент <dl> используется вместе с элементом <dt>, который задает термин, и элементом <dd>, который определяет определение термина.

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

<dl>
    <dt>Bread</dt>
    <dd>A baked food made of flour.</dd>
    <dt>Coffee</dt>
    <dd>A drink made from roasted coffee beans.</dd>
</dl>

Результат вышеприведенного примера будет выглядеть примерно так:

Bread
A baked food made of flour.
Coffee
A drink made from roasted coffee beans.

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.