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

Как выполнить запрос «INSERT IF NOT EXIST» в MySQL?

Способы защиты от отслеживания в Firefox: настройка анонимности и черный список
Web

Способы защиты от отслеживания в Firefox: настройка анонимности и черный список

Web

Отправка HTML по электронной почте через PHP

Web

Перегрузка функций PHP

×