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

HTML: Нумерованный и маркированный список

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

Стандартом пятой версии html поддерживается 3 вида списков: нумерованные списки, маркированные списки и списки определений. Также предоставляется возможность вкладывать списки друг в друга, создавая вложенные многоуровневые списки.

Нумерованный список

Нумерованный список — это набор элементов (пунктов списка), имеющих определённую последовательность. Каждый пункт нумерованного списка имеет уникальный маркер, указывающий на порядок следования данного пункта относительно других пунктов списка. По умолчанию маркерами пунктов нумерованного списка являются числа. Первый пункт идёт под числом 1, второй под числом 2 и так далее.

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

Примечание: тег

    в качестве дочерних элементов может содержать только теги

  1. , то есть всё содержимое нумерованного списка должно размещаться внутри элементов
  2. . Тег
  3. , в свою очередь, не имеет ограничений на содержимое, поэтому в нём можно размещать абзацы, картинки, ссылки, таблицы, другие списки и т.д.

Маркированный список

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

Виды маркеров

Виды маркеров нумерованного списка можно изменить с помощью атрибута type . Данный атрибут поддерживает пять видов маркеров:

Значение Описание
1 Десятичные числа (1, 2, 3..)
a Список в алфавитном порядке, строчные буквы (a, b, c..)
A Список в алфавитном порядке, заглавные буквы (A, B, C..)
i Римские цифры, строчные (i, ii, iii, iv..)
I Римские цифры, заглавные (I, II, III, IV..)

Маркированные списки не имеют атрибута type , поэтому средствами HTML изменить вид маркера у маркированного списка не получится. Для изменения вида маркера, в этом случае, можно воспользоваться CSS свойством list-style-type, с помощью которого, помимо значения по умолчанию, можно выбрать ещё два вида маркера: circle или square .

Изменение маркеров у списков:

CSS свойство list-style-type , помимо видов маркеров для маркированных списков, имеет множество различных видов маркеров и для нумерованных списков. Но не всегда изменения одного стандартного вида маркера на другой бывает достаточно для того, чтобы красиво оформить список. Для оформления списков лучше использовать CSS, который позволяет не только изменять вид маркера, но и заменять маркеры на картинки, контролировать их расположение и управлять отступом. Как всё это делать вы можете посмотреть тут.

Горизонтальный список

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

Чтобы создать горизонтальный список, надо для пунктов списка прописать CSS свойство display со значением inline или inline-block , в зависимости от того, какие ещё свойства вы собираетесь использовать.

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

Как горизонтальный список превратить в горизонтальное меню, вы можете посмотреть здесь.

Списки в HTML. Все о HTML списках

В HTML для создания списков используются теги группы lists. К ним относятся:

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

Далее будет показана практика создания HTML списков с примером исходного кода и описанием на русском языке.

В HTML есть три типа списков: маркированный, нумерованный и список определений (терминов).

Маркированный список

Пример простого маркированного списка HTML

  • Яблоки
  • Абрикосы
  • Бананы
  • Сливы
Исходный код простого маркированного списка:

Типы маркеров

Для маркированного списка доступны 3 типа маркеров по умолчанию: disc, square и circle. Задать тип маркера можно при помощи CSS свойства list-style-type . Тип маркера может быть задан, как для списка в целом (свойство применяется к ), так и для конкретного элемента (свойство применяется к ).

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

  • Disc — закрашенный круг, точка.
  • Circle — окружность, пустая внутри.
  • Square — квадрат.

Исходный код списка с разными типами маркеров:

Положение маркера в списке

HTML поддерживает 2 типа положений маркеров списка: внутри или снаружи. Положение маркера регулируется CSS свойством list-style-position . Положение может быть задано, как для списка в целом, так и для отдельного элемента.

Пример списка с разным положением маркеров:

  • Маркер внутри (inside)
  • Маркер снаружи (outside)

Исходный код списка с разным положением маркеров:

Свой маркер в HTML списке

Использовать в качестве маркера HTML списка можно и свою картинку. Для этого используйте CSS свойство list-style-image .

Пример списка со своей картинкой в роли маркера:

  1. Дизайн
  2. Верстка
  3. Интеграция

Исходный код списка со своим маркером — картинкой:

Нумерованный список

Пример нумерованного списка HTML

  1. Выучить HTML
  2. Добавить CSS
  3. Освоить JavaScript
Исходный код нумерованного списка

Типы нумерации в HTML списке

В HTML доступны 5 типов нумерации в списках. Чтобы изменить тип нумерации используйте атрибут type . Тип нумерации можно задавать как для списка в целом, так и для конкретных его элементов.

Разные типы нумерации в списках:

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

Многоуровневый список HTML (список в списке)

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

Ограничений по количеству уровней вложенности списков нет.

Пример многоуровневого списка

  • Tesla
    1. Model 3
    2. Model S
      1. 75
      2. 75D
      3. 100D
      4. P100D
      5. Model X
      6. BMW
      7. Nissan

      Исходный код многоуровневого списка

      Список определений

      Для создания списка определений используются теги , и . Тег dl — это контейнер списка определений, dt — термин, dd — описание термина.

      Многоуровневый список в HTML: как создать и настроить?

      Дата публикации: 2016-08-16

      От автора: всех приветствую. Наверняка большинству из вас нравятся красиво оформленные списки, так как это позволяет очень легко воспринимать информацию, которая в них записана. В этой статье мы создадим многоуровневый список в html, а также немного оформим его с помощью css. Приступим!

      Базовая теория

      Понятно, что для создания многоуровневого списка нужно хотя бы понимать, как создать простой список. Собственно, самих видов списков в html существует два: нумерованный и маркированный. Созданы они для разных целей. Нумерованный стоит применять тогда, когда, например, какоу-то перечисление действий нужно выполнять строго в указанном порядке. Соответственно, такой список подошел бы для планирования дня или записи рецепта.

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

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

      Практический курс по верстке адаптивного сайта с нуля!

      Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

      Собственно, тег ol создает нумерованный список, а тег ul – маркированный. Это понятно. Надеюсь, вы также имеете представление о том, как создавать простейший список, поэтому мы сразу перейдем к созданию многоуровневого.

      Многоуровневый список: как его делать?

      Собственно, тянуть резину долго не буду, вот разметка, можете вставить в свой html-файл.

      Итак, если вы внимательно просмотрели разметку, то наверное уже уловили суть? Сначала мы открываем ol, это будет наш родительский список, в котором будут содержаться вложенные списки и все пункты. Пункты, как вы понимаете, создаются парным тегом li, внутри которого пишется содержимое.

      Соответственно, вложенный список мы обязательно должны вложить в один из наших пунктов. То есть открыли тег li, написали в нем нужный контент, но после этого не закрываем тег. Закрывать будем только после того, как создадим внутри точно такой же список.

      В нашем случае получается такой себе план на день. Не забудьте правильно закрыть все теги. Вообще минус многоуровневых списков, как и таблиц, это громоздкая разметка. Представьте, что мы были дописали сюда еще списки для 19-го и 20-го чисел, а пункты разбили на подпункты, которые вынесли бы в отдельные перечни, которые, в свою очередь, располагались бы уже внутри вложенных. То есть была бы уже вложенность 2-го уровня. Итого все это заняло бы 30-60 строк кода.

      Кстати, вот так это выглядит:

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

      Чтобы изменить нумератор, необходимо уже использовать css. Обратимся к вложенным спискам так:

      Ссылка на основную публикацию