Как составить маркированный список в html

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

Помимо маркированного списка в HTML можно создать нумерованный список. Для этого следует использовать тег .

Тип маркера, его положение можно изменить при помощи CSS свойств. Подробнее на странице: Создание списков. Все о HTML списках.

Синтаксис

Отображение в браузере

Меркурий
Венера
Земля
Марс
Юпитер
Сатурн
Уран
Нептун

в HTML коде

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

Тег
	Да	Да	Да	Да	Да

Атрибуты тега

Устаревшие атрибуты

compact
пусто

Списки — Основы верстки контента

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

Маркированные;
Нумерованные;
Списки определений.

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

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

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

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

Маркированный список — популярный инструмент для группировки фрагментов. Его преимущество состоит в отсутствии порядка, в котором размещаются элементы. Таким образом не вводится шкала «важнее — неважно» или «шаг 1 — шаг 2». Вы просто перечисляете контент, который пользователь должен увидеть.

Как и другие списки, создание маркированного списка начинается с указания контейнера. В роли контейнера выступает тег — сокращение от Unordered List. Каждый элемент вкладывается внутрь этого контейнера и вкладывается в тег — сокращение от List Item. Так браузер отделяет списки друг от друга.

Представим список из начала урока в виде HTML разметки. Для этого указывается контейнер и три тега . Внутри каждого из этих тегов помещается один пункт списка.

  Маркированные; Нумерованные; Списки определений.

Списки в HTML возможно вкладывать друг в друга. Это позволяет глубже структурировать информацию. Для создания вложенного списка новый контейнер вкладывается внутрь тега . Как вы увидите, списки можно комбинировать. Маркированные вкладывать внутрь нумерованных. Нумерованные внутрь маркированных. В общем виде вложенность может быть описана так:

 Теги в HTML  Параграфы Списки  Маркированные; Нумерованные; Списки определений.

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

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

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

 Список дел на вторник  Позавтракать Оплатить билет на метро Съездить к бабушке Лечь спать

Нумерованные списки возможно вкладывать друг в друга. Внутри нумерованных списков могут лежать маркированные.

 Список дел на вторник  Позавтракать Оплатить билет на метро Съездить к бабушке  Купить цветы Купить конфеты   Лечь спать

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

С точки зрения HTML списки определений являются самыми сложными для верстки. Они включают в себя больше тегов для разметки и позволяют создавать семантическую структуру вида «термин — определение». Такие списки удобны при составлении словарей или глоссариев.

В качестве контейнера для списков определений используется тег от английского Definition List, внутри которого не привычная схема , а система из двух тегов:

— термин. От английского Definition Term;
— определение От английского Definition Description.

Каждая новая пара повторяет схему из двух тегов. Список из нескольких терминов размечается следующим образом:

  HTML Язык гипертекстовой разметки CSS Каскадные таблицы стилей

Стилизация списков

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

Свойство list-style-type позволяет скрыть маркер списка. Это частая практика при создании меню через списки, где нет необходимости в выделении пунктов маркерами. Для скрытия маркера используется значение none .

Изменять маркер можно одним из двух способов:

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

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

Картинка в качестве маркера списка

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

Чтобы установить маркер в виде своего изображения, используется свойство list-style-image , значением которого является ссылка на изображение. Оно указывается внутри url() , например:

.list-image  list-style-image: url("./good.png"); >

Открыть доступ

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

130 курсов, 2000+ часов теории
1000 практических заданий в браузере
360 000 студентов

Наши выпускники работают в компаниях:

Урок 4. HTML списки (нумерованный и маркированный)

В HTML есть три вида списков — нумерованный, маркированный и список определений. На практике больше всего используется маркированный список, а список определений крайне редко по-этому его я не буду рассматривать в этом уроке, чтобы не забивать вам голову на начальном уровне ��

Маркированный и нумерованный списки почти идентичны между собой разница всего в один тег, подробнее далее по тексту.

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

Маркированный список строится из двух тегов: ul и li, оба теги парные. Тег li (list item) — отвечает за вывод элемента списка, а тег ul (unordered list) — является контейнером вмещающим в себе элементы списка и указывает браузеру, что их необходимо вывести как маркированный список.

HTML код маркированного списка:

Элемент маркированного списка
Элемент маркированного списка
Элемент маркированного списка
Элемент маркированного списка
Элемент маркированного списка

HTML UL - маркированный список

HTML UL — маркированный список

Демо-пример «HTML код — Маркированный список»:

Атрибут type маркированного списка

У маркированного списка есть атрибут type, который задает вид маркера.
Атрибут type может принимать одно из трех значений:

где disc — маркер в виде диска (значение по-умолчанию);
circle — маркер в виде круга;
square — маркер в виде квадрата;

Пример всех трех типов маркера

Пример всех трех типов маркера, смотри по ссылке:

Многоуровневые (вложенные) маркированные списки

Для создания вложенного списка, нужно добавить внутрь тега li еще один блок ul.

HTML код многоуровневого вложенного списка:

Элемент маркированного списка
Элемент маркированного списка
Этот элемент содержит вложенный список
- Элемент маркированного списка
- Элемент маркированного списка
- Элемент маркированного списка
- Этот элемент содержит вложенный список
  - Элемент маркированного списка
  - Элемент маркированного списка
  Многоуровневый маркированный список
  
  Пример многоуровневого вложенного списка, смотри по ссылке:
  
  HTML Нумерованный список
  
  Суть построения нумерованного списка такая же, как и у маркированного с разницей в один тег, вместо ul (unordered list) используем ol (ordered list).
  
  HTML код нумерованного списка:
  1. Элемент нумерованного списка
  2. Элемент нумерованного списка
  3. Элемент нумерованного списка
  4. Элемент нумерованного списка
  5. Элемент нумерованного списка
  Демо-пример «HTML код — Нумерованный список»:
  
  Атрибут type нумерованного списка
  
  Атрибут type в нумерованном списке указывает на вид нумерации.
  
  где
  A — заглавные латинские буквы;
  a — строчные латинские буквы;
  I — заглавные римские цифры;
  i — строчные римские цифры;
  1 — арабские цифры.
  
  Пример типов маркера для нумерованного списка, смотри по ссылке:
  
  Атрибут start нумерованного списка
  
  У нумерованного списка есть атрибут start, который задает начальный номер нумерованного списка, с которого начнется нумерация.
  
  Пример Нумерованного список (start = 3), смотри по ссылке:
  
  Многоуровневые (вложенные) нумерованные списки
  
  Для создания вложенного списка, нужно добавить внутрь тега li еще один блок ol, так же как и с маркированным списком.
  
  Пример многоуровневого вложенного списка, смотри по ссылке:
  
  Списки html.
  
  Этот урок сложнее предыдущего, по этому советую не отвлекаться и максимально сконцентрироваться на материале. Списки бывают четырех видов. Это нумерованные списки, маркированные, многоуровневые и списки определений. Теперь давайте разберемся с каждым в порядке очереди. Наш урок будет состоять из 4-ех частей. Поехали!
  
  Нумерованный список html.
  
  Нумерованные списки html используются для перечисления позиций (элементов) списка которые располагаются строго по порядку и каждый имеет свой уникальный номер.
  
  Нумерованный список открывается с помощью тега &ltol&gt и закрывается соответственно тегом &lt/ol&gt. Каждая отдельная позиция (элемент) списка находится внутри тега &ltli&gt. Теперь давайте сами создадим нумерованный список, код будет выглядеть так:
  
  Сохраняем внесенные изменения в Notepad и открываем файл в браузере:
  
  По умолчанию нумерация списка всегда начинается с 1. Если Вам необходимо, чтобы нумерация начиналась, например, с 5, то для тега &ltol&gt нужно задать атрибут start и дать ему значение 5.
  
  * С этого момента, когда мне будет нужно продемонстрировать Вам запись html кода — на рисунке будет изображен не весь код со структурой страницы, а только рассматриваемая нами часть кода. Я считаю, что сейчас Вы уже должны понимать, что теги входящие в структуру html страницы — это обязательная составляющая. Если Вы забыли — смотрите урок 4.
  
  По умолчанию элементы списка нумеруются при помощи цифр, однако стиль нумерации можно изменить используя для тега &ltol&gt атрибут type, которому можно задавать значения 1, A, a, I, i.
  1 — 1, 2, 3, 4. (задается по умолчанию)
  A — A, B, C, D.
  a — a, b, c, d.
  I — I, II, III, IV.
  i — i, ii, iii, iv.
  
  К примеру, если мы хотим, чтобы наш список нумеровался при помощи маленьких латинских букв, то для тега &ltol&gt нужно задать атрибут type со значением a. На практике это будет выглядеть так:
  
  Маркированный список html.
  
  Маркированные списки html используются для перечисления позиций (элементов) списка которые не требуют строгой нумерации и могут располагаться в произвольном порядке.
  
  Маркированный список открывается с помощью тега &ltul&gt и закрывается соответственно тегом &lt/ul&gt. Каждая отдельная позиция (элемент) списка находится внутри тега &ltli&gt, так же как и в случае с нумерованным списком.
  
  По умолчанию элементы списка всегда маркируются черным кружком, стиль маркировки можно изменить используя для тега &ltul&gt атрибут type, которому можно задавать значения disc, circle, square.
  disc — (задается по умолчанию)
  circle —
  square —
  
  Теперь давайте создадим список используя для маркировки черные квадратики (square).
  
  Многоуровневый список html.
  
  Многоуровневый список html — это список, который содержит в себе еще один или несколько списков. Многоуровневый список может состоять как из нумерованных, так и из маркированных списков. Чтобы его создать нужно один обычный список «вложить» в другой обычный.
  
  Каждый отдельный элемент списка находиться между тегами &ltli&gt и &lt/li&gt. Для создания многоуровневого списка нужно между этими тегами, помимо текста вставить еще один список. Без наглядного примера в этом сложно разобраться, так что все внимание на рисунок:
  
  Мы сделали многоуровневый список из сочетания нумерованного и маркированного списка. Как видите в основе лежит нумерованный список открывающийся тегом &ltol&gt и закрывающийся тегом &lt/ol&gt. Первый элемент нашего нумерованного списка открывается тегом &ltli&gt, затем, как обычно, идет текст, а далее вместо того чтобы закрыть элемент списка тегом &lt/li&gt, мы вставляем еще один полноценный маркированный список. И только после этого мы закрываем элемент списка тегом &lt/li&gt. Затем уже идут следующие элементы нашего основного нумерованного списка.
  
  Список определений.
  
  Список определений очень удобен при создании различных словарей или статей содержащих в себе много терминов.
  
  Список определений открывается тегом &ltdl&gt и закрывается тегом &lt/dl&gt. Каждый отдельный термин заключается между &ltdt&gt и &lt/dt&gt. Далее пишется определение к термину, оно находится между тегами &ltdd&gt и &lt/dd&gt.
  
  Сейчас мы сделаем список определений состоящий из двух терминов. Код будет следующим:
  
  Сохраняем изменения и смотрим результат в браузере:
  
  * Вот мы и рассмотрели все варианты списков html. Из своего опыта могу сказать, что многоуровневые списки используются не часто, списки определений еще реже. Самое главное, что Вы должны из этого урока усвоить — это принцип составления списков. Настоятельно советую попрактиковаться с многоуровневыми списками.
  
  Вы что-то не поняли из этого урока? Спрашивайте!
  — vadimgreb@yandex.ru
  Похожие публикации: