Списки в 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>

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

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

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

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

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

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

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

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

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

Теперь посмотрим, как образуется нумерованный список с помощью тегов ol (от англ. «ordered list» — «упорядоченный список&#187). Это блочный и парный тег (по аналогии с 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>

<ol>
   <li type="a">HTML</li>
   <li type="a">CSS</li>
   <li type="a">JS</li>
</ol>

<ol>
   <li type="I">HTML</li>
   <li type="I">CSS</li>
   <li type="I">JS</li>
</ol>

<ol>
   <li type="i">HTML</li>
   <li type="i">CSS</li>
   <li type="i">JS</li>
</ol>

<ol>
   <li type="1">HTML</li>
   <li type="1">CSS</li>
   <li type="1">JS</li>
</ol>

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

<ol reversed>
   <li>HTML</li>
   <li>CSS</li>
   <li>JS</li>
</ol>

<ol reversed>
   <li type="a">HTML</li>
   <li type="a">CSS</li>
   <li type="a">JS</li>
</ol>

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

<ol start="5">
   <li type="1">HTML</li>
   <li type="1">CSS</li>
   <li type="1">JS</li>
</ol>

<ol start="3">
   <li type="a">HTML</li>
   <li type="a">CSS</li>
   <li type="a">JS</li>
</ol>

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

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

<ol>
   <li>HTML</li>
   <li value="7">CSS</li>
   <li>JS</li>
</ol>

<ol>
   <li type="I">HTML</li>
   <li type="I" value="7">CSS</li>
   <li type="I">JS</li>
</ol>

<ol>
   <li type="a">HTML</li>
   <li type="a" value="7">CSS</li>
   <li type="a">JS</li>
</ol>

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

Отличная возможность обогатить структуризацию списков — это вложить их один в другой, причем, можно применять в одной конструкции как маркированные, так и нумерованные списки. Их отличительной особенностью является то, что внутри 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>

В данном выше примере отображаются значки по умолчанию (для маркированных списков это закрашенные кружки, а для нумерованных — арабские цифры). Конечно, можно разнообразить конструкцию при помощи уже известных нам атрибутов, но лучше стилизовать списки при помощи средств 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>

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