HTML :: Cписки
Нумерованные html-списки
В HTML 5 используется три вида списков: нумерованный, маркированный и список определения.
Нумерованный список формируется парным тегом <ol> (от англ. ordered list – упорядоченный список). Сам элемент «ol» используется, как контейнер для пунктов списка, которые формируются парными тегами <li> (от англ. list item – пункт списка) и располагаются друг за другом.
По умолчанию пункты списка нумеруются браузером по порядку, начиная с единицы. Если нумерацию нужно начать не с единицы, то используется атрибут start, который задает число, с которого будет начинаться нумерованный список. В качестве значения атрибут принимает целые числа. Можно также изменить порядок нумерации на обратный. Для этого служит атрибут reversed, который используется без значений. Атрибут введен в HTML 5 и работает во всех браузерах, кроме IE.
Имеется также возможность устанавливать вид маркера нумерованного списка. Для этого используется атрибут type, который может принимать значения "A | a | I | i | 1", которые, соответственно, означают:
- заглавные латинские буквы,
- строчные латинские буквы,
- заглавные римские цифры,
- строчные римские цифры,
- арабские цифры.
Поскольку все перечисленные значения, и не только, могут быть с легкостью установлены через стили CSS, использование атрибута type, по мнению автора, не целесообразно, хотя и допускается в HTML 5.
Использование нумерованного списка показано в примере №1.
htmlCodes
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Нумерованный список</title> </head> <body> <em style="color: green">Весенние месяцы по порядку:</em> <ol start="3" title="Весенние месяцы"> <li>март</li> <li>апрель</li> <li>май</li> </ol> <em style="color: red">Летние месяцы в обратном порядке:</em> <!-- Перечисляем в обратном порядке. В IE не работает! --> <ol start="8" reversed> <li>август</li> <li>июль</li> <li>июнь</li> </ol> </body> </html>
Пример №1. Использование элемента «ol»
Кстати, браузеры отображают все списки как блочные элементы, поэтому при отображении примера отчетливо видны вертикальные отступы. Попробуйте набрать код самостоятельно, задайте спискам желтый фон и посмотрите результат.
Маркированные html-списки
Маркированный список формируется парным тегом <ul> (от англ. unordered list – неупорядоченный список). Сам элемент «ul» используется, как контейнер для пунктов списка, которые формируются, как и в случае с нумерованными списками, парными тегами <li> и располагаются друг за другом.
Маркированный список вместо цифр и букв использует маркеры в виде кружков. Изменить внешний вид маркеров можно при помощи стилей CSS. Что касается атрибута type, то его в HTML 5 убрали. Так что, остались только универсальные атрибуты и атрибуты-события.
Код, содержащий элемент «ul», показан в примере №2.
htmlCodes
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Маркированный список</title> </head> <body> <em style="color: green">Весенние месяцы:</em> <!-- Задаем фон, чтобы визуально увидеть область, занимаемую списком, как блочным элементом --> <ul style="background-color: yellow"> <li>март</li> <li>апрель</li> <li>май</li> </ul> </body> </html>
Пример №2. Использование элемента «ul»
Списки определений в HTML
Список определений формируется парным тегом <dl> (от англ. definition list – ). Сам элемент «dl» используется, как контейнер для пунктов списка. Каждый такой пункт, в свою очередь, состоит из элементов «dt» (от англ. definition term – определяемый термин) и «dd» (от англ. definition description – подробное описание), сформированных, соответственно, парными тегами <dt> и <dd>. Первый из них содержит определяемый термин, а второй – определение термина.
Давайте для наглядности посмотрим пример №3.
htmlCodes
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Список определений</title> </head> <body> <dl title="Список из двух определений"> <dt>HTML</dt> <dd>Стандартный язык гипертекстовой разметки веб-документов, <br> который повсеместно используется во Всемирной паутине.</dd> <dt>CSS</dt> <dd>Формальный язык описания внешнего вида документа, <br> написанного с использованием языка разметки.</dd> </dl> </body> </html>
Пример №3. Использование элемента «dl»
Вложенные списки
Иногда возникает необходимость создания вложенных списков, которые представляют собою списки, расположенные в пунктах внешнего списка. Рассмотрим создание вложенных списков на примере №4.
htmlCodes
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Вложенные списки</title> </head> <body> <!-- Пусть будет нумерованный список --> <ol> <!-- В каждый пункт помещаем новый список --> <li>Три сорта яблок: <ul> <li>Антоновка,</li> <li>Штрефель,</li> <li>Кубань.</li> </ul> </li> <!-- А сюда поместим нумерованный список --> <li>Три сорта груш: <ol> <li>Чижовская,</li> <li>Вильямс,</li> <li>Дюшес.</li> </ol> </li> </ol> </body> </html>
Пример №4. Использование вложенных списков
Как видим, создавать вложенные списки совсем не трудно. Для этого нужно внимательно между открывающим тегом <li> и закрывающим тегом </li> для нумерованных и маркированных списков расположить вложенный список требуемого вида. Что касается списков определений, то вложенный список следует располагать между открывающим тегом <dd> и закрывающим тегом </dd>. Это может понадобиться, например, если нужно дать термину несколько определений.