Web

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

Списки в ХТМЛ имеют важное значение. С их помощью при создании веб-страниц формируют многие важные элементы страницы, например меню или сайдбар с виджетами. Каждый уважающий себя верстальщик умеет пользоваться списками и другими возможностями HTML. 

До сих пор идут споры, является ли HTML полноценным языком программирования. Кто-то считает что  «нет», а кто-то, что «да». При этом сложно не заметить, что  HTML в совокупности с CSS творит веб-чудеса. Только этими двумя инструментами можно создать полноценный веб-сайт с несложной функциональностью. Чтобы такое делать, нужно тщательно изучать эти технологии и понимать, где и что можно правильно применить. 

Сегодня мы расскажем что такое списки ХТМЛ, чтобы вы могли их применять в веб-разработке.

Списки ХТМЛ

HTML-списки — это контейнеры, которые используют для того, чтобы сгруппировать несколько элементов, связанных между собой. Списки ХТМЛ представлены тремя видами:

  1. Неупорядоченный или маркированный  HTML-список. Такой список определяется тегами «ul», а каждый отдельный элемент определяется тегом «li». Мы все видели такие списки. Как правило, элементы этого списка начинаются с «точки» или какого-то другого специального знака, но не числа.

  2. Нумерованный  HTML-список. Такой список определяется тегами «ol», а каждый отдельный элемент определяется тегом «li». Мы все видели такие списки. Как правило, элементы такого списка начинаются с числа и перечисляются по порядку. Причем перечисление элементов может происходить обычными или «римскими» цифрами.

  3. HTML -список определений. Такой список определяется тегами «dl», а элементы определяются тегами: «dt» отвечает за термин и «dd», который отвечает за определение термина.  Такие списки встречаются реже, поэтому не все их видели.

Каждый отдельный список — это отдельный контейнер. Каждый отдельный элемент списка ведет себя как отдельный контейнер, который занимает всю ширину родительского контейнера. Таким образом, создавая список, мы имеем конструкцию «контейнеры в контейнере» или «блоки в блоке». Повлиять на отображения всего ХТМЛ-списка или его отдельного элемента можно при помощи классов и идентификаторов CSS.

Как формируются ХТМЛ-списки?

В принципе, все ХТМЛ-списки формируются одинаково. Чтобы их научиться формировать, нужно понять конструкцию и алгоритм.

Неупорядоченный  HTML-список в коде формируется так:

<ul>

   <li>Дормидонт Платонович</li>

   <li>Никифор Аристархович</li>

   <li>Первомай Виссарионович</li>

   <li>Афродита Владленовна</li>

</ul>

 

В браузере этот же список будет выглядеть так:

  • Дормидонт Платонович

  • Никифор Аристархович

  • Первомай Виссарионович

  • Афродита Владленовна

 

Нумерованный  HTML-список в коде формируется так:

<оl>

   <li>Дормидонт Платонович</li>

   <li>Никифор Аристархович</li>

   <li>Первомай Виссарионович</li>

   <li>Афродита Владленовна</li>

</оl>

 

В браузере этот же список будет выглядеть так:

  1. Дормидонт Платонович

  2. Никифор Аристархович

  3. Первомай Виссарионович

  4. Афродита Владленовна

 

HTML-список определений  в коде формируется так:

<dl>

   <dt>Генеральный директор:</dt>

        <dd>Дормидонт Платонович</dd>

    <dt>Директор по развитию:</dt>

        <dd>Никифор Аристархович</dd>

    <dt>Исполнительный директор:</dt>

        <dd>Первомай Виссарионович</dd>

    <dt>PR-менеджер:</dt>

        <dd>Афродита Владленовна</dd>

</dl>

 

В браузере этот же список будет выглядеть так:

Генеральный директор:

    Дормидонт Платонович

Директор по развитию:

    Никифор Аристархович

Исполнительный директор:

    Первомай Виссарионович

PR-менеджер:

    Афродита Владленовна

 

В качестве элементов списка может выступать что угодно:

  • текст;
  • пустые строки;
  • ссылки;
  • изображения;
  • другие списки;
  • и др.

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

Вложенный HTML-список в коде выглядит вот так:

<ul>

    <li>Раздел 1</li>

    <li>Раздел 2</li>

    <ul>

        <li>Подраздел 2.1</li>

        <li>Подраздел 2.2</li>

        <ul>

            <li>Подраздел 2.2.1</li>

            <li>Подраздел 2.2.2</li>

        </ul>

    </ul>

    <li>Раздел 3</li>

</ul>

В браузере этот же список будет выглядеть так:

  • Раздел 1
  • Раздел 2
  • Подраздел 2.1
  • Подраздел 2.2
    • Подраздел 2.2.1
    • Подраздел 2.2.2
  • Раздел 3

Заключение

Как видно из статьи, списки ХТМЛ формируются достаточно просто. Для того чтобы их стилизовать на свой вкус, обязательно используйте возможности CSS.

Схожие статьи

Web

Тернарный оператор PHP против оператора объединения с нулевым значением

Установка Apache Ubuntu: поднимаем веб-сервер на своем компьютере
Web

Установка Apache Ubuntu: поднимаем веб-сервер на своем компьютере

Блокировка сайта Роскомнадзором: какие основания могут быть
Web

Блокировка сайта Роскомнадзором: какие основания могут быть

Web

Передача переменных и данных из PHP в JavaScript