Списки в HTML — теги ul, ol, li, dl, dd, dt

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

В языке гипертекстовой разметки существует три основных вида: маркированные, нумерованные списки, а также списки определений (описаний).

Мы разберем поподробнее, как формировать самые разнообразные варианты на их основе. Они могут понадобиться при публиковании той или иной информации на веб-ресурсе.

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

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

Маркированный список определят тег ul (его названием является не что иное как аббревиатура английского словосочетания «unordered list» — «неупорядоченный список»).

Между открывающим и закрывающим тегами ul располагаются элементы списка, содержание каждого из которых должно в свою очередь располагаться между <li> и </li>.

Таким образом, ul является парным тегом, а также блочным, то есть образует контейнер, куда входят элементы (строки), образуемые каждый раз элементом li (его наименование происходит от англ. «list item» — «пункт списка»). Соответственно, li является парным и строчным тегом.

<ul>
   <li>WP</li>
   <li>Joomla</li>
   <li>Drupal</li>
</ul>
  • WP
  • Joomla
  • Drupal

Внешний вид маркера для каждого элемента списка возможно изменить. До недавнего времени легитимным вариантом было использование для этих целей атрибута type для ul и li, который имеет следующие значения: disc (параметр по умолчанию, который выводит маркерный значок в виде закрашенного кружка, если он отсутствует, то применяется браузером автоматически, как на примере выше), а также circle и square:

<ul>
   <li type="disc">WP</li>
   <li type="disc">Joomla</li>
   <li type="disc">Drupal</li>
</ul>
  • WP
  • Joomla
  • Drupal
<ul>
   <li type="circle">WP</li>
   <li type="circle">Joomla</li>
   <li type="circle">Drupal</li>
</ul>
  • WP
  • Joomla
  • Drupal
<ul>
   <li type="square">WP</li>
   <li type="square">Joomla</li>
   <li type="square">Drupal</li>
</ul>
  • WP
  • Joomla
  • Drupal

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

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

<ul>
   <li type="disc">WP</li>
   <li type="circle">Joomla</li>
   <li type="square">Drupal</li>
</ul>
  • WP
  • Joomla
  • Drupal

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

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

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

  • A — заглавные латинские буквы;
  • a — строчные латинские буквы;
  • I — заглавные римские цифры;
  • i — строчные римские цифры;
  • 1 — арабские цифры (по умолчанию).

Вот примеры для каждого варианта:

<ol>
   <li type="A">HTML</li>
   <li type="A">CSS</li>
   <li type="A">JS</li>
</ol>
  1. HTML
  2. CSS
  3. JS
<ol>
   <li type="a">HTML</li>
   <li type="a">CSS</li>
   <li type="a">JS</li>
</ol>
  1. HTML
  2. CSS
  3. JS
<ol>
   <li type="I">HTML</li>
   <li type="I">CSS</li>
   <li type="I">JS</li>
</ol>
  1. HTML
  2. CSS
  3. JS
<ol>
   <li type="i">HTML</li>
   <li type="i">CSS</li>
   <li type="i">JS</li>
</ol>
  1. HTML
  2. CSS
  3. JS
<ol>
   <li type="1">HTML</li>
   <li type="1">CSS</li>
   <li type="1">JS</li>
</ol>
  1. HTML
  2. CSS
  3. JS

Также можно обеспечить нумерованный список, где нумерация всех элементов осуществляется в обратном порядке, например: 3, 2, 1. Это реализуется с помощью атрибута reversed ([HTML5]) тега ol, который значений не имеет. При этом не важно, какой параметр type установлен.

<ol reversed>
   <li>HTML</li>
   <li>CSS</li>
   <li>JS</li>
</ol>
  1. HTML
  2. CSS
  3. JS
<ol reversed>
   <li type="a">HTML</li>
   <li type="a">CSS</li>
   <li type="a">JS</li>
</ol>
  1. HTML
  2. CSS
  3. JS

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

<ol start="5">
   <li type="1">HTML</li>
   <li type="1">CSS</li>
   <li type="1">JS</li>
</ol>
  1. HTML
  2. CSS
  3. JS
<ol start="3">
   <li type="a">HTML</li>
   <li type="a">CSS</li>
   <li type="a">JS</li>
</ol>
  1. HTML
  2. CSS
  3. JS

Для нумерованного списка в качестве атрибута для отдельных элементов li может быть применен value (добавленный в [HTML5]), параметром которого опять же может служить любое целое положительное число. Тогда порядковый номер такого элемента будет соответствовать данному числу, а все ниже следующие элементы будут пронумерованы с учетом данного обстоятельства.

Например, если ко второму элементу в списке добавить value="7", то далее счет элементов будет начинаться с «8» по порядку. Этот атрибут также работает со всеми значениями type для тега li (с арабскими и римскими цифрами, а также буквами латинского алфавита).

<ol>
   <li>HTML</li>
   <li value="7">CSS</li>
   <li>JS</li>
</ol>
  1. HTML
  2. CSS
  3. JS
<ol>
   <li type="I">HTML</li>
   <li type="I" value="7">CSS</li>
   <li type="I">JS</li>
</ol>
  1. HTML
  2. CSS
  3. JS
<ol>
   <li type="a">HTML</li>
   <li type="a" value="7">CSS</li>
   <li type="a">JS</li>
</ol>
  1. HTML
  2. CSS
  3. JS

Вложенные списки

Отличная возможность обогатить структуризацию списков — это вложить их один в другой, причем, можно применять в одной конструкции как маркированные, так и нумерованные списки. Их отличительной особенностью является то, что внутри li могут располагаться элементы ul и li.

<ol>
  <li>CMS (системы управления контентом)
    <ul>
      <li>WordPess</li>
      <li>Joomla</li>
      <li>Drupal</li>
    </ul>
  </li>
  <li>Средства для веб-разработки
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>Виды контента на сайте
    <ul>
      <li>Текстовые материалы</li>
      <li>Изображения формата JPG, PNG, GIF</li>
      <li>Встроенные видеоролики</li>
    </ul>
  </li>
</ol>
  1. CMS (системы управления контентом)
    • WordPess
    • Joomla
    • Drupal
  2. Средства для веб-разработки
    • HTML
    • CSS
    • JavaScript
  3. Виды контента на сайте
    • Текстовые материалы
    • Изображения формата JPG, PNG, GIF
    • Встроенные видеоролики

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

HTML списки определений (описания) — теги dl, dd, dt

Еще один вид списков, который формируется таким образом, что его содержание заключается между тегами <dl> и </dl> («description list» — «список описаний»), образующими контейнер. Тег dt («description list term» — «термин списка описаний») указывает какое-либо понятие, а dd («description list description» — «описание списка описаний») — описывает его.

В списке определений <dt> обязан предшествовать <dd>. Это важно, поскольку по логике вещей сам термин всегда располагается до его определения. В итоге мы получаем следующую картину:

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

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

Кстати, современные реалии таковы, что язык 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. Игорь Горнов

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

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

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

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