Списки в HTML
В языке HTML, существует 3 типа списков:
- Упорядоченный список (тег
ol) - Неупорядоченный список (тег
ul) - Список определений
В этом уроке, мы рассмотрим с вами два вида списков: упорядоченный и неупорядоченный.
Упорядоченный список (ol)
Упорядоченный список в HTML — это такой список где каждый элемент имеет свой порядковый номер (1, 2, 3, 4 и т.д.). Упорядоченный список в HTML, начинается и заканчивается тегами ol, каждый элемент списка обрамляется тегами li. Рассмотрим пример упорядоченного списка:
<ol> <li>Открыть программу</li> <li>Нажать кнопку</li> <li>Выбрать из списка</li> <li>Ввести данные</li> <li>Закрыть программу</li> </ol>
Результат:
- Открыть программу
- Нажать кнопку
- Выбрать из списка
- Ввести данные
- Закрыть программу
Тегами упорядоченного списка удобно обрамлять различные пошаговые инструкции: рецепты изготовления, задания (квесты). Такие списки, где между первым элементом списка и последним имеется взаимосвязь (начинаем с первого и заканчиваем последним, постепенно проходя друг за другом все этапы).
Для форматирования упорядоченного списка имеется CSS-свойство list-type-style, данное свойство позволяет использовать вместо обычных (арабских) чисел, римские, а также буквы и др.
Неупорядоченный список (ul)
Неупорядоченный список в HTML — это список, где перед каждым элементом ставится маркер (черный кружок). Неупорядоченный список в HTML, начинается и заканчивается тегами ul, каждый элемент списка обрамляется тегами li. Рассмотрим пример неупорядоченного списка:
<ul> <li>Лето</li> <li>Осень</li> <li>Зима</li> <li>Весна</li> </ul>
Результат:
- Лето
- Осень
- Зима
- Весна
Тегами неупорядоченного списка, удобно обрамлять различные списки наподобие: ингредиенты, список частей целого (времена года) и т.д. То есть те списки, где нет четкой взаимосвязи от начала и до конца. Например, если мы напишем зима, весна, лето, осень то целостность не нарушится, ибо это не инструкция. Однако если мы сначала введём данные не открыв программу, то произойдет ошибка, ибо прежде чем ввести данные нужно открыть программу.
Для форматирования неупорядоченного списка используется CSS-свойство list-type-style, данное свойство может изменять стандартный маркер (черный круг), на ромб, квадрат или обруч.