Список в HTML – его виды и создание

Одним из наиболее часто используемых элементов в языке HTML являются списки, которых существует несколько видов. Далее мы подробно рассмотрим такие вопросы как создание списков в HTML, их виды и особенности их применения.

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

Используются следующие виды списков:

• маркированные;
• нумерованные;
• определений.

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

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

<ul>
 <li>Первый пункт</li>
 <li>Второй пункт</li>
 <li>Третий пункт</li>
</ul>

Маркированные списки в HTML еще называют неупорядоченными, поскольку используются они в том случае, если его элементы могут быть размещены в любом произвольном порядке.

Также здесь используется значение square, задающее тип маркера. Например, прописав, в результате мы получим незакрашенные кружочки в качестве маркеров каждого из элементов. Также можно использовать атрибуты «disc» (закрашенный кружок), и «square» (квадрат).

Нумерованный список в HTML или упорядоченный, используется в случаях, когда необходимо вывести перечень объектов, расположение которых необходимо организовать в определенном порядке.

Например, пошаговый алгоритм действий, по реализации какого-либо задания. Для разметки упорядоченного листинга используется тег OL, с уже упоминаемыми элементами LI. Пример нумерованного списка:

<ol>
<li>Audi</li>
<li>BMW</li>
<li>Volkswagen</li>
</ol>

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

<ol> — арабские цифры (по умолчанию);
<ol> — заглавные буквы;
<ol> — строчные буквы;
<ol> — заглавные римские цифры;
<ol> — строчные римские цифры.

Создавая нумерованный список можно также применять атрибут start, с помощью которого задается начальное значение отсчета.

Создать список определений в HTML можно с помощью тегов DL, DT, DD. Вот как это выглядит:

<dl>
<dt>Первый термин</dt>
      <dd>Описание</dd>
<dt>Второй термин</dt>
  <dd>Его описание</dd>
</dl>

Это хороший вариант для формирования отдельных статей под специальный словарь терминов. Здесь DL применяется для обозначения листинга определений, DT означает термины, а DD отвечает за разметку определений.

Также, применяются многоуровневые или вложенные списки в HTML, когда один из листингов находится внутри другого. Пример такой конструкции:

<ul>
   <li>Достопримечательности Польши
    <ul>
     <li>Интересное во Вроцлаве</li>
     <li>Интересное в Праге</li>
     <li>Интересное в Холме</li>
    </ul>
   </li>
   <li>Достопримечательности Франции</li>
   <li>Достопримечательности Италии</li>
   <li>Достопримечательности Испании</li>
  </ul>

Как видите, все так же просто, суть только в изменении порядка размещения тегов.

С помощью HTML можно создать и выпадающий список, когда при нажатии на элемент интерфейса появляется раскрывающееся меню с элементами для выбора. Его синтаксис выглядит следующим образом:

<select>
  <option>Вариант 1</option>
  <option>Вариант 2</option>
</select>

Раскрывающийся список в HTML также обладает некоторыми атрибутами и значениями, среди которых наиболее часто используются следующие:

• multiple — возможность выбора нескольких значений;
• name – присвоение имени выпадающему списку;
• size – количество видимых позиций.

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

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