Как сделать списки 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.