Все о создании сайтов, блогов, форумов, интернет-магазинов, их продвижении в поисковых системах и заработке на сайте

Теги UL, OL, LI, DL — Html списки

Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Сегодня в рамках рубрики «Html для чайников» я хочу поговорить о разнообразных Html списках, которые можно создать на основе специально предназначенных для этого тегов UL, OL, LI, DL. С помощью пары тегов UL и LI создаются маркированные списки в Html, с помощью тегов OL и LI — нумерованные, а с помощью элементов DL, DT и DD создаются так называемые списки определений. Так же мы рассмотрим вкратце принципы создания вложенных списков в Html.

Хочу напомнить вам, что мы уже успели рассмотреть в рамках раздела «Уроки Html и CSS», успели рассмотреть что такое язык Html и валидатор W3C, как задаются цвета в Html, а так же успели поговорить про основы Div верстки, а так же верстки табличной (Html теги таблицы Tr, Th, Td, Table). Кроме этого мы затронули основы формирования тега Doctype и Html комментариев, ну и узнали как вставить в Html картинку через тег Img. Да, еще успели поговорить про Html формы (form).

Теги UL и LI — маркированные Html списки

Для создания маркированных списков используется HTML тег UL, а для создания нумерованных – OL. Эти HTML теги OL и UL являются парными и блочными, точно так же, как и элемент LI (читайте об этом подробнее в конце статьи Doctype, Html комментарии).

Между открывающим и закрывающим тегом (OL или UL ) располагаются отдельные пункты списка, которые в свою очередь заключаются в открывающий и закрывающий тег LI. Сверху и снизу Html списков (OL, UL или DL) создаются отступы в одну строку, подобные отступам, создаваемым тегом абзаца.

Давайте посмотрим, например, маркированный список (UL), который может выглядеть так:

• Первая пара тэгов LI в маркированном Html списке (UL)
• Вторая пара открывающего и закрывающего элемента LI внутри списка UL
• Последний элемент LI внутри списка UL

Внутри открывающего и закрывающего тегов маркированного списка UL могут стоять только элементы LI, а уже внутри самих элементов LI (пунктов маркированного списка) можно вставлять любой контент (текст, картинки, заголовки, абзацы, ссылки и другие Html списки). Т.е. элемент UL служит только для организации маркированного (не упорядоченного) списка, а все, что вы будете видеть на web странице внутри списка реализуется с помощью содержимого элементов LI.

Для ненумерованного списка UL можно менять вид маркера, прописывая в теге UL разные значения для атрибута «Type». Если атрибут «Type» (управление внешним видом маркеров Html списка) для элемента UL не указан, то будет отображаться вид маркера, принятого по умолчанию (disc — закрашенный в цвет текста кружок):

1. <ul type="disc"> — закрашенный кружок (по умолчанию);
2. <ul type="circle"> — не закрашенный кружок;
3. <ul type="square"> – квадрат

В приведенных примерах атрибут «Type» мы прописывали в элементе UL, применяя данный тип маркеров для всех пунктов Html списка. Но атрибут «Type» можно прописать и для каждого отдельного тега LI, задав для этого пункта списка свой собственный тип маркера. Пример маркированного Html списка (UL) с различными типами маркера для каждого пункта (LI):

1. Маркер для элемента LI в виде закрашенного диска
2. Маркер для элемента списка UL в виде не закрашенного диска
3. Третий вид маркера для Html списка UL

Теги OL и LI — нумерованные Html списки

Для создания нумерованного Html списка используются теги OL, внутри которых опять же будут расположены элементы LI. Элементы OL и LI, как я уже упоминал, являются блочными (т.е. стремятся занять все доступное им место по ширине) и, по аналогии с тегом UL, внутри OL нельзя будет размещать ничего кроме элементов LI.

OL и UL — это служебные теги, которые нужны только для того, чтобы указать браузеру, какой именно вид Html списка мы формируем (маркированный или же нумерованный). В случае нумерованного Html списка (OL) слева от каждого пункта мы будем видеть не маркер, а цифру и стоящую за ней точку:

1. Первая пара тегов LI нумерованного Html списка OL
2. Второй пункт списка OL<
3. Третья пара LI в нумерованном списке

Как я уже упоминал чуть выше, у HTML тегов UL, OL и LI имеется возможность использовать атрибут TYPE. Он позволяет настроить тип маркера для ненумерованного списка UL, а для нумерованного (OL) — задать, какими цифрами или буквами будут нумероваться пункты Html списка. Для нумерованного Html списка OL параметры этого атрибута могут принимать следующие значения:

1. <ol type="1"> — нумерация будет выполняться обычными арабскими цифрами (этот же вариант будет использоваться по умолчанию, при отсутствии атрибута «Type» в тегах OL или LI);
2. <ol type="A"> — заглавные буквы в качестве нумерации списка OL;
3. <ol type="a"> — строчные буквы;
4. <ol type="I"> — заглавные римские цифры;
5. <ol type="i"> — строчные римские цифры;

Пример нумерованного списка (OL) с различными типами нумерации для каждого пункта (LI):

1. Пункт (LI) Html списка OL с нумерацией большими римскими цифрами
2. Нумерация данного пункта (LI) списка OL маленькими латинскими буквами
3. Нумерация малыми римскими цифрами

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

23. Первый элемент LI, номер которого задан в теге OL
24. Следующий элемент LI, с номером на единицу большим, чем задано в OL
25. Очередной элемент LI Html списка OL

Для нумерованного списка (OL) так же можно начать новую нумерацию с любого значения, начиная с любого пункта, прописав в открывающем HTML теге LI этого пункта атрибут VALUE с требуемым числом. Например:

1. Первый элемент LI Html списка OL с номером один
32. Этот элемент LI получит номер, указанный в атрибуте VALUE
33. Элемент LI Html списка OL с номером на 1 большим предыдущего номера

Оформление Html списков UL и OL в CSS

Но, как правило, сейчас внешний вид маркеров задается не через атрибут TYPE, а при помощи классов. В HTML теге UL или OL прописывается атрибут CLASS. В качестве параметра этого атрибута используется название класса. В правилах CSS, прописанных для этого класса, указывается, какая картинка будет использоваться в качестве маркера, на каком расстоянии маркер будет отстоять от текста и еще многое.

Но о тонкостях работы с CSS мы поговорим в последующих статьях. А здесь я просто приведу пример различных маркеров для ненумерованных списков, внешний вид которых задается через правила CSS в отдельном файле с таблицами каскадных стилей.

<ul classs="vash_class">
<li>Первый элемент LI маркированного списка UL, оформленного через CSS</li>
<li>Второй элемент LI</li>
<li>Последняя пара тегов LI Html списка UL</li>
</ul>

Но о тонкостях работы с CSS мы поговорим в последующих статьях. Именно таким способом задается внешний вид маркеров ненумерованного списка на этом блоге. В качестве маркеров используются картинки: для обычных пунктов не нумерованного списка — , для вложенных пунктов ненумерованного списка — .

DL, DT и DD — Html списки определений

Третий вид Html списков называется «списки определений» и задаются они с помощью трех тегов — DL, DT и DD. Тег DL сообщает браузеру, что далее последует список определений. Обычно такой вид Html списков используется (ну, или предполагалось, что он будет использоваться) для написания словарных статей, состоящих из терминов (заключенных в теги DT) и их описаний (заключенных в теги DD).

<dl>
<dt>Html список определений</dt>
      <dd>Теги DL, DT и DD</dd>
<dt>В элементе DT прописывается термин</dt>
<dd>В элементе DD прописывается его описание</dd>
</dl>

Если вы посмотрите на приведенный выше пример, то заметите, что в Html списке определений элемент DD (описание термина) сдвигается (на 40 пикселей) относительно элемента DT (самого термина). Вообще, DL, DT и DD являются блочными тегами, причем, внутри элемента DT можно вставлять только контент со строчными тегами (получается, что внутри DT нельзя будет использовать блочные теги заголовков и абзацев). А внутри тегов DD можно вставлять любые элементы и строчные и блочные.

UL, OL и DL — вложенные Html списки

Вложенный Html список (UL, OL и DL) создается по аналогии с простым, но внутри основного списка часть пунктов заключается еще раз в открывающий и закрывающий HTML тег UL (OL или DL).

Обратите внимание, что закрывающий HTML тег LI того пункта Html списка, в котором будет создан вложенный пункт, ставится лишь после кода вложенного списка (это очень важно для правильного отображения списка на web странице). Вложенный Html список (UL, OL) может выглядеть примерно, так:

1. Первый элемент LI нумерованного Html списка OL
2. Вторая пара тегов LI Html списка OL
   • Первый элемент LI маркированного Html списка UL
   • Вторая пара тегов LI Html списка UL
   • Третий элемент LI списка маркированного UL
3. Третий элемент LI списка нумерованного OL

Можете также посмотреть видео «Списки в HTML — теги UL, OL, LI, DL»:

У Евгения Попова имеется видекурс по PHP+MySQL, который стоит того, чтобы с ним ознакомиться.

Можете посмотреть бесплатные видеоуроки по Html и CSS, а так же можете ознакомиться с другими статьями:

• Верстка сайта
  • Html для чайников
  • Что такое язык Html, валидатор W3C и Html тэги
  • Зачем нужен Doctype и комментарии в html
  • Спецсимволы (мнемоники) в Html, символ неразрывного пробела
  • Как использовать цвета в Html коде
  • Как в Html код вставить картинку и html ссылку
  • Как сделать в Html список с помощью тегов UL, OL, DL и LI
  • Html таблица и теги Tr, Th, Td, Table
  • Html формы - теги Form и Input
  • Div верстка сайта в Html и CSS ч.1
  • Html и CSS верстка сайта на DIV ч.2
  • Блочная верстка

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

• Как вставить в HTML ссылку и картинку — теги IMG для вставки изображения и html теги гиперссылки A
• Html формы для сайта, теги Form и Input (Button, Checked, Value, Checkbox, Radio, Checkbox, Submit) — чекбоксы, Html кнопки и радиокнопки
• Html теги H1-H6 (заголовки), Hr (линия), P (абзац), Br (перенос строки) и атрибуты Html тегов (align, width)
• Select, Option, Textarea, Label, Fieldset, Legend — теги Html формы выпадающих списков и текстового поля
• Теги Html таблицы и дополнительные тэги Colspan, Cellpadding, Cellspacing, Rowspan
• Таблицы в Html (Table, Tr, Th, Td ), табличная верстка и теги Col, Tbody, Caption
• Font, Html color, Blockquote, Pre — форматирование текста в HTML, Html шрифты, Strong, Em, B, I