Списки в HTML

В HTML существует два основных типа списков: упорядоченные и неупорядоченные. Каждый из них имеет свои особенности и предназначение.

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

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

• Тег: <ul> (unordered list)
• Элементы списка: <li> (list item)

Пример

<ul>     <li>Первый элемент</li>     <li>Второй элемент</li>     <li>Третий элемент</li> </ul>

Результат Первый элемент Второй элемент Третий элемент

 

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

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

• Тег: <ol> (ordered list)
• Элементы списка: <li> (list item)

Пример

<ol>     <li>Первый шаг</li>     <li>Второй шаг</li>     <li>Третий шаг</li> </ol>

Результат Первый шаг Второй шаг Третий шаг

 

3. Смешанные (вложенные) списки

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

Пример

<ol>     <li>Первый шаг         <ul>             <li>Подшаг A</li>             <li>Подшаг B</li>         </ul>     </li>     <li>Второй шаг</li> </ol>

Результат Первый шаг         Подшаг A Подшаг B Второй шаг

Примечение
В HTML вложенные списки должны быть полностью содержаться внутри родительского элемента <li>.
Это означает, что тег <ul> для вложенного списка должен находиться внутри тега <li>, а не на одном уровне с ним.

Атрибуты списков

Атрибуты списков в HTML влияют на их внешний вид и поведение. 

Атрибут type у тегов <ul> и <ol> определяет вид маркера или нумерации.

• Для <ul>:
  • type="disc": круглый маркер (по умолчанию).
  • type="circle": пустой круг.
  • type="square": квадратный маркер.
• Для <ol>:
  • type="1": арабские цифры (по умолчанию).
  • type="A": заглавные буквы.
  • type="a": строчные буквы.
  • type="I": большие римские цифры.
  • type="i": маленькие римские цифры.

Начальное значение:

• Атрибут start у тега <ol> позволяет задать начальное значение для нумерации списка. Например, start="3" начнет нумерацию с 3.

Примеры

<ol type="A">     <li>Первый элемент</li>     <li>Второй элемент</li> </ol>	Результат Первый элемент Второй элемент
<ol start="5">     <li>Пятый элемент</li>     <li>Шестой элемент</li> </ol>	Результат Пятый элемент Шестой элемент
<ul type="square">     <li>Первый элемент</li>     <li>Второй элемент</li> </ul>	Результат Первый элемент Второй элемент