Как увеличить посещаемость любого сайта минимум в два раза? Секретное руководство внутри! Получить руководствоX

Eltis-book > HTML учебник > HTML списки

HTML списки

«HTML списки» – восьмой урок учебника HTML. В этом уроке мы обсудим вопрос создания и форматирования HTML списков.

В языке HTML существует три вида списков: упорядоченные, неупорядоченные и списки определений. Именно об этих видах списков и пойдет речь в сегодняшнем уроке.

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

Для создания упорядоченного html списка используется тег <ol>. Все элементы списка расположены в контейнере<li></li>.

У тега <ol> существуют следующие атрибуты: start – определяет первое число построения списков и type – задает стиль нумерации списков и может принять следующие значения:

  • «A» – большие заглавные буквы (A, B, C …)
  • «a» – малые буквы (a, b, c …)
  • «I» – большие числа римского алфавита (I, II, III …)
  • «i» – малые числа римского алфавита (i, ii, iii …)
  • «1» – простые числа арабского алфавита (1, 2, 3 …)

Ну а теперь небольшой пример:


<p>Упорядоченный список:</p><br> <ol>
<li><p>элемент 1</p></li>
<li>элемент 2</li>
<li>элемент 3</li>
</ol>
Упорядоченный список:

    1. элемент 1
    2. элемент 2
    3. элемент 3

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

Не трудно догадаться, что вложенность списков второго, третьего и т. д. уровней тоже поддерживается:

<p>Многоуровневый список <p>
<ul>
<li>элемент 1</li>
<ol>
<li>элемент 1</li>
<li>элемент 2</li>
<li>элемент 3</li>
</ol>
<li>элемент 2</li>
<ol>
<li>элемент 1</li>
<li>элемент 2</li>
<li>элемент 3</li>
</ol>
<li>элемент 3</li>
<ol>
<li>элемент 1</li>
<li>элемент 2</li>
<li>элемент 3</li>
</ol>
</ul>
  • элемент 1
    1. элемент 1
    2. элемент 2
    3. элемент 3
  • элемент 2
    1. элемент 1
    2. элемент 2
    3. элемент 3
  • элемент 3
    1. элемент 1
    2. элемент 2
    3. элемент 3

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

Ненумерованные списки, в отличие от нумерованных, маркируются различными символами.

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

<p>Неупорядоченный список:</p>
<ul>
<li>элемент 1</li>
<li>элемент 2</li>
<li>элемент 3</li>
</ul>
Неупорядоченный список:

  • элемент 1
  • элемент 2
  • элемент 3

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

Должен сразу вам сказать, что списки определений на мой взгляд как и фреймы являются своеобразным HTML–архаизмом. Используются они крайне редко и потому заострять внимание на них мы не будем. Просто обсудим способ их построения:

Список определений начинается с тега <dl>. Каждый термин списка определений начинается с тега <dt>, а каждое новое определение – с тега <dd>.


HTML списки позволяют максимально наглядно структурировать информацию на странице. Так же списки часто используются для проектирования меню навигации (как это сделано на данном сайте).

В следующем уроке мы поговорим о создании форм в HTML. Формы способны внести множество полезного функционала на ваши страницы. В большинстве случаев формы используются совместно с языками программирования, такими как PHP и JavaScript.

Исключительно
для моих подписчиков доступен мощный мини-курс по проектированию SEO текстов, которые сами выходят в ТОП!

Подписывайся на рассылку и получишь
это руководство полностью БЕСПЛАТНО