Списки в HTML

Списки отражают информацию структурно и позволяют удобно настраивать отображение с помощью CSS, поэтому они наилучшим подходят для создания меню на сайте.

Существует два основных вида списков в HTML: нумерованный и маркированный. Третий тип — список для определений, который встречается довольно редко.

Нумерованный список

В нумерованном списке у каждого элемента списка проставляется номер.

Например, чтобы создать такой список:

Одеть спортивную форму

Взять мяч

Собрать друзей

Сыграть футбол

Розетки Легранд

надо написать такой код:

<ol>

<li> Одеть спортивную форму </ li>

<li> Взять мяч </ li>

<li> Собрать друзей </ li>

<li> Сыграть футбол </ li>

<li> Розетки Легранд </ li>

</ Ol>

Розберемся со структурой. Тег <ol> означает начало списка, а тег <li> новый элемент. Для тега нумерованного списка <ol> можно применять несколько атрибутов, в частности, start (номер с которого будет начинаться наша нумерация) и type (указывает тип нумерации и может иметь следующие значения — 1, A, a, I, i).

<ol start=3 type=A>

<li> Одеть спортивную форму </ li>

<li> Взять мяч </ li>

<li> Собрать друзей </ li>

<li> Сыграть футбол </ li>

<li> Розетки Легранд </ li>

</ Ol>

Модифицировав код, мы указали, что тип нумерации должен быть буквенно и начинаться с 3 символов, т.е. буквы C, вот что мы получили:

C. Одеть спортивную форму

D. Взять мяч

E. Собрать друзей

F. Сыграть футбол

E. Розетки Легранд

Маркированный список

В маркированном списке порядок элементов не имеет такой роли, как в нумерованном. У элементов проставляются специальные значки (точки, сферы, квадраты).

Перед приведением примера, скажу, что список это имеет атрибут type (от которого как раз и зависит тип значка), который принимает значения disc (по умолчанию, отображает закрашенный круг), square (закрашенный квадрат), circle (незакрашенный круг).

<ul type=square>

<li> Сходить в кинотеатр </ li>

<li> Встреча с друзьями </ li>

<li> Игра в пейнтбол </ li>

</ Ul>

Чтобы создать маркированный список используем тег <ul>.

  • Сходить в кинотеатр
  • Встреча с друзьями
  • Игра в пейнтбол

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