Списки html: теги ul, ol, li, dl, dd, dt

Здравствуйте, уважаемые читатели! Сегодня в качестве продолжения цикла статей рубрики «Основы html» я хочу познакомить вас с алгоритмом создания списков html при помощи тегов ul и li (маркированный список), ol и li (нумерованный список), dl, dt, dd (список определений).

В рамках данной рубрики вы уже получили информацию о том, что такое язык гипертекстовой разметки html и его основные теги, как создаются гиперссылки в html при участии тега A, как использовать тег img для вставки картинок на сайт, как создавать формы для сайта посредством тегов form и input, выпадающих списков (select и option), текстового поля (textarea), а также мы поговорили о создании кнопок на сайте с привлечением тега button.

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

Маркированные HTML списки - теги ul и li

Маркированный список определят тег ul. Между открывающим и закрывающим тегами ul располагаются элементы списка, содержание каждого из которых должно быть в свою очередь располагаться между открывающим и закрывающим тегами li. Сразу отмечу, что тег ul является парным (наличие открывающего и закрывающего тега), а также блочным, то есть образует контейнер, в который входят элементы (строки), образуемые каждый раз тегом li. Соответственно тег li является парным и строчным.

  <ul>
    <li>1 элемент маркированного списка</li>
    <li>2 элемент маркированного списка</li>
    <li>3 элемент маркированного списка</li>
  </ul>
  • 1 элемент маркированного списка
  • 2 элемент маркированного списка
  • 3 элемент маркированного списка

По умолчанию внешний вид маркера представляется закрашенным кружком. Однако, можно изменить его внешний вид, применив атрибут type, который имеет следующие значения: disc, circle, square. Значение disc (которое определяет внешний вид маркера в виде закрашенного кружка) применяется по умолчанию. То есть если атрибут type не прописан, то внешний вид маркера будет выглядеть как закрашенный кружок. Если дополнить данными атрибутами тег ul, то получим следующие варианты:

  <ul>
    <li type="disc">1 элемент маркированного списка</li>
    <li type="disc">2 элемент маркированного списка</li>
    <li type="disc">3 элемент маркированного списка</li>
  </ul>
  • 1 элемент маркированного списка
  • 2 элемент маркированного списка
  • 3 элемент маркированного списка
  <ul>
    <li type="circle">1 элемент маркированного списка</li>
    <li type="circle">2 элемент маркированного списка</li>
    <li type="circle">3 элемент маркированного списка</li>
  </ul>
  • 1 элемент маркированного списка
  • 2 элемент маркированного списка
  • 3 элемент маркированного списка
  <ul>
    <li type="square">1 элемент маркированного списка</li>
    <li type="square">2 элемент маркированного списка</li>
    <li type="square">3 элемент маркированного списка</li>
  </ul>
  • 1 элемент маркированного списка
  • 2 элемент маркированного списка
  • 3 элемент маркированного списка

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

  <ul>
    <li type="disc">1 элемент маркированного списка</li>
    <li type="circle">2 элемент маркированного списка</li>
    <li type="square">3 элемент маркированного списка</li>
  </ul>
  • 1 элемент маркированного списка
  • 2 элемент маркированного списка
  • 3 элемент маркированного списка

Нумерованные HTML списки - теги ol и li

Теперь посмотрим, как образуется нумерованный список с помощью тегов ol (блочный и парный тег по аналогии с ul). В качестве тега, определяющего элементы нумерованного списка html, здесь тоже выступает тег li. Нумерованный список - совокупность пронумерованных элементов. Тип нумерации определяется атрибутом type, который может принимать следующие значения:

  • A - заглавные латинские буквы;
  • a - строчные латинские буквы;
  • I - заглавные римские цифры;
  • i - строчные римские цифры;
  • 1 - арабские цифры
  <ol>
    <li type="A">1 элемент нумерованного списка</li>
    <li type="A">2 элемент нумерованного списка</li>
    <li type="A">3 элемент нумерованного списка</li>
  </ol>
  1. 1 элемент нумерованного списка
  2. 2 элемент нумерованного списка
  3. 3 элемент нумерованного списка
  <ol>
    <li type="a">1 элемент нумерованного списка</li>
    <li type="a">2 элемент нумерованного списка</li>
    <li type="a">3 элемент нумерованного списка</li>
  </ol>
  1. 1 элемент нумерованного списка
  2. 2 элемент нумерованного списка
  3. 3 элемент нумерованного списка
  <ol>
    <li type="I">1 элемент нумерованного списка</li>
    <li type="I">2 элемент нумерованного списка</li>
    <li type="I">3 элемент нумерованного списка</li>
  </ol>
  1. 1 элемент нумерованного списка
  2. 2 элемент нумерованного списка
  3. 3 элемент нумерованного списка
  <ol>
    <li type="i">1 элемент нумерованного списка</li>
    <li type="i">2 элемент нумерованного списка</li>
    <li type="i">3 элемент нумерованного списка</li>
  </ol>
  1. 1 элемент нумерованного списка
  2. 2 элемент нумерованного списка
  3. 3 элемент нумерованного списка
  <ol>
    <li type="1">1 элемент нумерованного списка</li>
    <li type="1">2 элемент нумерованного списка</li>
    <li type="1">3 элемент нумерованного списка</li>
  </ol>
  1. 1 элемент нумерованного списка
  2. 2 элемент нумерованного списка
  3. 3 элемент нумерованного списка

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

  <ol reversed>
    <li type="1">1 элемент нумерованного списка</li>
    <li type="1">2 элемент нумерованного списка</li>
    <li type="1">3 элемент нумерованного списка</li>
  </ol>
  1. 1 элемент нумерованного списка
  2. 2 элемент нумерованного списка
  3. 3 элемент нумерованного списка

Существует также возможность начать маркированный список не с 1, а с любого другого числа. Для этого можно воспользоваться атрибутом start, причем совершенно не важно, какое значение атрибута type установлено. Посмотрите пример использования атрибута name в совокупности с различными значениями атрибута type (1 и I):

  <ol start="5">
    <li type="1">1 элемент нумерованного списка</li>
    <li type="1">2 элемент нумерованного списка</li>
    <li type="1">3 элемент нумерованного списка</li>
  </ol>
  1. 1 элемент нумерованного списка
  2. 2 элемент нумерованного списка
  3. 3 элемент нумерованного списка
  <ol start="4">
    <li type="I">1 элемент нумерованного списка</li>
    <li type="I">2 элемент нумерованного списка</li>
    <li type="I">3 элемент нумерованного списка</li>
  </ol>
  1. 1 элемент нумерованного списка
  2. 2 элемент нумерованного списка
  3. 3 элемент нумерованного списка

HTML списки определений - теги dl, dd, dt

Еще один вид списков html - список определений. Он формируется следующим образом. Содержание этого списка заключается между открывающим и закрывающим тегами dl, которые образуют контейнер. Тег dt определяет какой-либо термин, а dd - описание этого термина.

  <dl>
  <dt>CMS</dt>
  <dd>Система управления контентом,
 которая применяется для создания сайтов.</dd>
  <dt>HTML</dt>
  <dd>Язык гипертекстовой разметки,
 являющийся основой создания вебресурсов.</dd>
 </dl>
CMS
Система управления контентом,
которая применяется для создания сайтов.
HTML
Язык гипертекстовой разметки,
являющийся основой создания вебресурсов.

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

Кстати, современные реалии таковы, что язык html нельзя рассматривать в отрыве от css, поэтому, чтобы не пропустить эти важнейшие материалы, подпишитесь на обновление блога через RSS-ленту либо по e-mail. На этом тема сегодняшней статьи исчерпана, если вы получили необходимую информацию, не откажитесь воспользоваться кнопками социальных сетей.

Еще статьи по данной теме:
Самые интересные публикации из рубрики: Уроки HTML

12 отзывов

  1. Lev

    Знаете, давно занимаюсь разработкой сайтов, но вот о тегах не знал 🙂
    Как-то не приходилось.
    Мелочь, а приятно)
    Спасибо за статью)

  2. Игорь

    Пожалуйста, Lev. Рад, что пост оказался Вам полезным. Хотя немного странно, что Вы не имели представления о тегах, если занимались разработкой. Ведь понятие тега самое важное в html. 🙂

  3. Валерий

    Спасибо за информацию.

  4. Андрей

    Подскажите, а как сделать чтобы список шел слева навправо

  5. Игорь

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

  6. vodkomotornik

    Очень емко и доходчиво!
    Добавил в закладочку.
    Спасибо за труд!

  7. Денис

    Игорь, данный способ, о котором упомянул Андрей, действительно используется и довольно часто при версте элементов навигации в горизонтальной ориентации. Далеко ходить не надо - взглянем на структуру вашей основной менюшки 😉

    Теперь, если позволите, отвечу на вопрос Андрея. Зачастую, достаточно указать элементам списка css-свойство li { float: left; } Однако, есть достаточно много других способов. Например, современные браузеры и IE выше седьмой версии, понимают свойство display с параметрами table, table-row и table-cell, что дает возможность расположить элементы списка на всю ширину родительского блока, не прибегая к помощи JS. Кроме того, расположить горизонтально элементы можно, если установить для них правило display: inline-block; Это более кроссбраузерное решение, но так же есть проблемки в старых IE. Хотя, существуют, так называемые фиксы. Добавлю, что при использовании inline-block, надо не забывать про "пустые текстовые узлы", которые генерируются между элементами, в следствии чего возникают "загадочные отступы" между элементами. Это лечиться разными способами, но дабы не утомлять Вас своей лекцией, сейчас пропущу эти моменты и, если понадобится, то расскажу подробней по просьбе "трудящихся" ;))

  8. Игорь

    Денис, где же Вы раньше были? 🙂
    Действительно, мой ответ Андрею был крайне некорректен, о чем я очень сожалею. Видимо, был в тот момент в цейтноте и не вник в суть, имея ввиду использование списка в контенте страницы, а не в шаблоне. Но на это и существуют такие читатели, как Вы, Денис, которые тактично указывают на упущение. Дополнение крайне полезно, к сожалению, немного несвоевременно для Андрея, но, думаю, другим читателям оно пригодится.

  9. Илья

    Статья помогла, спасибо!

  10. Greg

    вы должно быть классный разработчик

  11. Михаил

    Спасибо за интересную подачу материала.
    Такой вопрос, если можно:
    каким образом эта информация (списки - теги ul и li) передается на обработку в скрипт PHP,
    как во всех других случаях - с помощью тэга form, или как-то по другому?

  12. Игорь Горнов

    Михаил, конкретизируйте, пожалуйста.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Чтобы ввести любой код, вставьте его между [php] и [/php]. Ссылка (URL), помещенная в текст комментария, не будет активной. C целью ее выделения и более удобного копирования можно заключить ее между тегами <pre> и </pre>.