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.

Похожие посты

Руководство по тегам и элементам в HTML

HTML-элемент — это отдельный компонент документа HTML. Он представляет собой семантику или некоторое значение. Например, элемент <title> представляет заголовок документа. Большинство элементов HTML пишутся с начальным тегом (или открывающим) и конечным тегом (или закрывающим) с содержимым между ними. Элементы могут также содержать атрибуты, которые определяют его дополнительные свойства. Например, абзац, который представлен элементом <p>, будет…

Руководство по заголовкам в HTML

Заголовки помогают определить иерархию и структуру содержимого веб-страницы. В HTML есть шесть уровней заголовков, от <h1> до <h6>; чем выше уровень заголовка, тем больше его важность — поэтому тег <h1> определяет самый важный заголовок, а тег <h6> определяет наименее важный заголовок в документе. По умолчанию браузеры отображают заголовки более крупным и жирным шрифтом, чем обычный…

Руководство по мета-тегам в HTML

Теги <meta> обычно используются для предоставления структурированных метаданных, таких как ключевые слова (keywords), описание (description), имя автора (author name), кодировка символов (character encoding) и т.д. В теге <head> может быть размещено любое количество метатегов <meta>. Метаданные не будут отображаться на веб-странице, но будут обрабатываться поисковиками, браузерами и другими веб-сервисами. Теперь рассмотрим использование мета-тегов. Объявление кодировки…

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

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

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

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