Главная / Блог / Обзоры / Список в HTML – его виды и создание

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

05 августа 13
Reading Time: 1
Комментариев нет
1 Star2 Stars3 Stars4 Stars5 Stars (3 votes)

Одним из наиболее часто используемых элементов в языке 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.

Comments (0)

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

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

Более 3000 запущенных проектов

Вместе с нами многие уже развивают свой бизнес! Смотреть все отзывы
Перепробовав много CMS (opencart, Битрикс) и др. Мы увидим, как много в каждой из них недостатков. Где-то или очень сложно или очень дорого кастомизировать. Работая маркетологом, могу заверить, что в ImageCMS большинство нужны "фич" реализовано из коробки, без дополнительных надстроек. Посмотрев демо версию новой версии движка, был приятно удивлен скоростью работы (ооочень важно).
За время сотрудничества компания показала себя в качестве ответственного подрядчика, быстро воплотив в жизнь удобный интернет-магазин с учетом всех наших пожеланий.
Работой доволен. Отвечают всегда быстро и по сути, остаются только приятные впечатления от общения. Пара слов о новом движке: Быстро, красиво и интуитивно понятно. Полностью оправдывает вложенные средства. Рекомендую.
Доволен. Скрипт считаю перспективным. Считаю, что ваш коллектив работает на опережение: ваше предложение было оптимальным по цене/качеству.
Опертивная и четкая работа, своевременое предоставление дополнительных консультаций по работе с административной частью. Созданным магазином довольна. Рекомендую этот движок!
Заказать услугу
Персональная информация:

прикрепить файл

Создайте свой личный демо-магазин ImageCMS