HTML Основы


HTML Расширенный


HTML Примеры


HTML Справка




Списки в HTML


назад вперед

В HTML используются упорядоченные, неупорядоченные списки и списки определений.


Пример

  • Это первый пункт списка
  • Это второй пункт списка
  • Это третий пункт списка

Примеры

Неупорядоченный список

Упорядоченный список


Неупорядоченный списки

Неупорядоченный список — это перечень элементов. Элементы списка обозначаются буллетами (обычно черные закрашенные кружочки).

Неупорядоченный список начинается с тега <ul>. Каждый элемент списка начинается с тега <li>:

<ul>

<li>Кофе</li>

<li>Чай</li>

</ul>

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

В пункты списка можно помещать параграфы, горизонтальные линии, изображения, ссылки, другие списки и т.д.


Упорядоченные списки

Упорядоченный список — это тоже перечень элементов. Элементы списка обозначаются числами.

Упорядоченный список начинается с тега <ol>. Каждый элемент списка начинается с тега <li>:

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

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

  1. Coffee
  2. Milk
В пункты упорядоченного списка можно помещать параграфы, горизонтальные линии, изображения, ссылки, другие списки и т.д.

Список определений

Список определений — это не просто список элементов. Это список элементов с описанием каждого элемента.

Список определений начинается с тега <dl>.

Каждый элемент списка определений начинается с тега <dt>.

Каждое описание элемента списка начинается с тега <dd>.

<dl>
<dt>Кофе</dt>
<dd>Темный горячий напиток</dd>
<dt>Молоко</dt>
<dd>Белый прохладный напиток</dd>
</dl>

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

Кофе
Темный горячий напиток
Молоко
Белый прохладный напиток

Еще примеры

Виды упорядоченных списков

Различные виды упорядоченных списков.

Виды неупорядоченных списков

Вложенные списки

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


Теги списков

Тег Описание
<ol> Упорядоченный список
<ul> Неупорядоченный список
<li> Элемент списка
<dl> Список определений
<dt> Элемент списка определений
<dd> Описание элемента в списке определений
<dir> Устарело. Используйте тег <ul>
<menu> Устарело. Используйте тег <ul>


Поисковой портал Jooble - позволяет в один клик найти любую интересующую вакансию по всему интернету.

Понравилась запись? Сказать "Спасибо" очень просто, поделитесь записью в социальных сетях!


назад вперед

СТАТИСТИКА




ССЫЛКИ


Подпишись на новости сайта