HTML5 списки: <ol> и <ul> для начинающих

Типы списков в HTML

В HTML есть два основных типа списков:

  • Пронумерованные списки: <ol> (ordered list)
  • Непронумерованные списки: <ul> (unordered list)

Пронумерованные списки (<ol>)

Для создания пронумерованного списка используется тег <ol>. Каждый элемент списка обозначается тегом <li> (list item).

Пример:

<ol>
  <li>Купить молоко</li>
  <li>Купить картошку</li>
  <li>Купить машину</li>
</ol>

Результат: 1. Купить молоко; 2. Купить картошку; 3. Купить машину

Атрибуты <ol>

Тег <ol> поддерживает следующие атрибуты:

  • start: Указывает начальное число нумерации (по умолчанию — 1). Например, start="7" начнет нумерацию с 7.
  • type: Определяет тип символов нумерации:
    • 1 (по умолчанию): Арабские цифры (1, 2, 3…)
    • A: Заглавные буквы латинского алфавита (A, B, C…)
    • a: Строчные буквы латинского алфавита (a, b, c…)
    • I: Римские цифры (I, II, III…)
    • i: Римские цифры (i, ii, iii…)

Пример использования атрибута type:

<ol type="A">
  <li>Купить молоко</li>
  <li>Купить картошку</li>
  <li>Купить машину</li>
</ol>

Результат: A. Купить молоко; B. Купить картошку; C. Купить машину

Внутри элементов <li> можно использовать другие HTML-теги для форматирования текста, например, <b> для жирного текста или <span style="font-size:1.2em;"> для изменения размера шрифта.

Непронумерованные списки (<ul>)

Для создания непронумерованного списка используется тег <ul>. Каждый элемент списка, как и в пронумерованных списках, обозначается тегом <li>.

Пример:

<ul>
  <li>Купить молоко</li>
  <li>Купить картошку</li>
  <li>Купить машину</li>
</ul>

Результат: • Купить молоко; • Купить картошку; • Купить машину

Атрибуты <ul>

Тег <ul> поддерживает атрибут type:

  • disc (по умолчанию): Заполненные кружки.
  • circle: Пустые кружки.
  • square: Заполненные квадраты.

Пример использования атрибута type:

<ul type="square">
  <li>Купить молоко</li>
  <li>Купить картошку</li>
  <li>Купить машину</li>
</ul>

Результат: □ Купить молоко; □ Купить картошку; □ Купить машину

В HTML есть два типа списков: пронумерованные (<ol>) и непронумерованные (<ul>). Каждый элемент списка обозначается тегом <li>. Теги <ol> и <ul> имеют атрибуты для настройки отображения. Внутри элементов списка можно использовать другие HTML-теги для форматирования.

Что будем искать? Например,программа