Списки в HTML: синтаксис и примеры использования

От /

Перевод статьи «HTML List – How to Use Bullet Points, Ordered, and Unordered Lists».

Photo by Suzy Hazelwood from Pexels

Создание различных элементов списков на веб-странице — рядовая задача для любого разработчика. У вас могут быть списки товаров в корзине, списки студентов с их оценками и даже списки собак, упорядоченные по громкости лая.

В общем, знать, как создаются списки, просто необходимо. Возможно, вы думаете, что это очень обыденная и заурядная тема, но она важна. Список — один из наиболее часто используемых компонентов в веб-разработке.

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

Как сделать список в HTML

Списки в HTML бывают упорядоченные и неупорядоченные.

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

Примером упорядоченного списка может служить нумерованный список. Он может начинаться с номера 1, затем будут идти номера 2, 3, 4 и так далее.

Но для упорядочивания элементов не обязательно используются числа. Могут быть и буквы: список начнется с буквы A, затем будут идти B, C, D и так далее.

Вот пример упорядоченного списка с именами студентов и их оценками:

Кроме упорядоченных списков в HTML есть и неупорядоченные. Пример — список задач. В представленном ниже TODO-списке мы видим, что я настолько увлечен программированием, что пожертвовал ради него завтраком.

Есть еще один вид списков — список определений (description list). Его мы рассмотрим чуть позже, а сейчас давайте разберем, как создавать каждый вид списков.

Как создать упорядоченный список

В HTML упорядоченный список создается при помощи тега <ol> (от ordered list — упорядоченный список).

Между открывающим тегом <ol> и закрывающим <ol /> нам нужно определить элементы списка. Это делается при помощи тега <li>.

Вот полная HTML-структура упорядоченного списка:

<ol>
  <li>Eat</li>
  <li>Code</li>
  <li>Sleep</li>
</ol>

Вывод будет следующий:

Итак, у нас есть список пронумерованных элементов. Нумерация начинается с 1, а далее инкрементируется до 2 и 3. Откройте этот CodePen и попробуйте поиграть с использованием ol-li.

See the Pen Ordered List by Tapas Adhikary (@atapas) on CodePen.

Виды упорядоченных списков в HTML

Что, если мы не хотим упорядочивать список по номерам? Допустим, нам хотелось бы использовать для этого буквы — A, B, C или a,b,c. Это можно сделать, указав для тега <ol> атрибут type с нужным значением.

Чтобы упорядочить список при помощи заглавных букв, нужно задать type значение A.

<ol type="A">
  <li>Eat</li>
  <li>Code</li>
  <li>Sleep</li>
</ol>

Вывод будет таким:

Аналогично, можно указать в качестве значения для type строчную букву a: тогда для упорядочивания будут использоваться строчные буквы.

<ol type="a">
  <li>Eat</li>
  <li>Code</li>
  <li>Sleep</li>
</ol>

Вывод:

Можно использовать римские цифры. Для этого задайте значение I для атрибута type.

<ol type="I">
  <li>Eat</li>
  <li>Code</li>
  <li>Sleep</li>
</ol>

Вывод:

Попробуйте назначать свои значения для type в этом CodePen:

See the Pen Ordered List Types by Tapas Adhikary (@atapas) on CodePen.

Использование атрибута start в упорядоченных списках

Элемент <ol> имеет интересный атрибут — start. С его помощью можно указать значение, с которого должна начаться нумерация списка.

Допустим, мы хотим начать список не с 1, а с 30. Для этого нужно прописать значение 30 для атрибута start:

<ol start="30">
  <li>Thirty</li>
  <li>Thirty One</li>
  <li>Thirty Two</li>
</ol>

Вывод:

Поиграться можно здесь:

See the Pen Ordered List Start Attribute by Tapas Adhikary (@atapas) on CodePen.

Как создать неупорядоченный список

Переходим к неупорядоченным спискам. Для их создания используется тег <ul> (от unordered list — неупорядоченный список).

Элементы определяются так же, как в упорядоченных списках: при помощи тегов <li> между <ul> и <ul/>.

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

Вот список моих любимых онлайн-ресурсов для изучения веб-программирования:

My Favorite Web Development Learning Sites
<div>
  <ul>
    <li>freeCodeCamp</li>
    <li>CSS-Tricks</li>
    <li>Traversy Media</li>
  </ul>
</div>

Вывод выглядит так:

Как видите, возле каждого элемента стоит черная точка. В принципе, вид маркировки можно настроить, это мы тоже рассмотрим. Но сперва попробуйте изменить что-то в этом CodePen и запустить код.

See the Pen Unordered Bullet List by Tapas Adhikary (@atapas) on CodePen.

Как сделать элементы списка ссылками

Чтобы сделать элемент списка ссылкой на внешнюю или внутреннюю веб-страницу, нужно добавить якорный тег <a> внутри тега <li>.

Этот пример показывает, как добавить в наш предыдущий список ссылки на соответствующие сайты:

My Favorite Web Development Learning Sites
<div>
  <ul>
    <li>
      <a href="https://www.freecodecamp.org/" target="_blank">freeCodeCamp</a>
    </li>
    <li>
      <a href="https://css-tricks.com/" target="_blank">CSS-Tricks</a>
    </li>
    <li>
      <a href="https://www.traversymedia.com/" target="_blank">Traversy Media</a>
    </li>
  </ul>
</div>

Вывод:

Попробуйте сделать это самостоятельно:

See the Pen Unordered Bullet List with Links by Tapas Adhikary (@atapas) on CodePen.

Виды неупорядоченных списков

Как уже упоминалось, маркировку списков можно настраивать. Это делается при помощи CSS-свойства list-style.

Для свойства list-style есть четыре основных значения:

  • none — перед элементами не будет вообще никаких значков
  • circle — значки будут в виде незаполненных кружков
  • disc — дефолтное значение, значки в виде черных точек
  • square — значки-квадратики

Попробуйте поменять виды маркировки:

See the Pen Unordered List Styles by Tapas Adhikary (@atapas) on CodePen.

А вы знали, что существуют еще и списки определений?

В HTML есть еще один вид списков, но он используется не так уж часто. Это список определений. Определение — это небольшой текст о чем-либо (поясняющий что-либо).

В списке определений у нас будут определяемые термины и их определения.

Сам список создается при помощи тега <dl>.

Внутри списка указываются термины (при помощи тегов <dt>) и определения (при помощи тегов <dd>). Каждое определение идет сразу за термином, который оно поясняет.

Давайте рассмотрим это на примере.

Допустим, мы хотим дать некоторую информацию о кодинге, сплетнях (англ. gossip — сплетни, сплетничать) и сне.

Для начала мы ставим тег <dl>. Затем прописываем попарно теги <dt> и <dd> для кодинга, сплетен и сна соответственно.

<dl>
  <dt>Coding</dt>
  <dd>An activity to keep you happy, even in sleep.</dd>
  <dt>Gossiping</dt>
  <dd>Can't live without it.</dd>
  <dt>Sleeping</dt>
  <dd>My all time favorite.</dd>
</dl>

Вывод будет таким:

Попробуйте поэкспериментировать:

See the Pen Description List by Tapas Adhikary (@atapas) on CodePen.

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

Но если вы учитываете семантику HTML, не стоит забывать о списках определений.

Как создать хедер страницы при помощи элементов списка

Давайте теперь рассмотрим практический пример использования списков на веб-странице. Мой любимый — применение элементов списка в хедере.

Давайте создадим очень простой хедер с лого и тремя ссылками: Home, Products и About Us. наша HTML-структура будет выглядеть так:

<header>
  <span class="logo">Logo</span>
  
  <ul>
    <li><a href="#/home">Home</a></li>
    <li><a href="#/products">Products</a></li>
    <li><a href="#/about">About Us</a></li>
  </ul>  
</header>

Здесь мы взяли неупорядоченный список с тремя элементами для ссылок на страницы Home, Products и About Us. Вы также видите span-элемент с текстом Logo, который обозначает лого. Здесь позже можно будет использовать подходящую картинку.

На данный момент наш хедер выглядит так:

Но это не то, что нам нужно. Поэтому мы добавим несколько CSS-правил и свойств, чтобы наш список начал больше походить на хедер страницы.

header{
  background-color: #273032;
  color: #FFF;
  padding: 10px;
  display: flex;
}

.logo {
  background-color: blue
}

ul {
  margin: 0px;
}

li {
  list-style: none;
  display: inline;
  margin-right: 0.2rem;
}

a {
  color: pink;
}

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

Опять же, вы можете попробовать что-то поменять в этом коде и посмотреть, что будет.

See the Pen Header Navigation Using Lists by Tapas Adhikary (@atapas) on CodePen.

Надеюсь, статья будет полезной для вас и поможет лучше разобраться в HTML-списках.

[customscript]techrocks_custom_after_post_html[/customscript]

[customscript]techrocks_custom_script[/customscript]

Похожие записи

Прокрутить вверх
slot gacor slot gacor