Урок 8. Списки в HTML

Списки в HTML

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

В HTML в основном используются два типа списков: нумерованный список и маркированный список.

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

Для создания нумерованного списка в HTML необходим тег <ol> (ordered list), а для создания пунктов в списке тег <li>. Пункты списка будут пронумерованы автоматически.

<html>
 <head>
  <title>Название сайта</title>
 </head>
 <body>
  <ol>
 <li>Первый</li>
 <li>Второй</li>
 <li>Третий</li>
</ol>
   </body>
</html>

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

В качестве нумерации по умолчанию стоят арабские числа ( 1, 2, 3, 4 и тд.), так же можно использовать: прописные и строчные латинские буквы, прописные и строчные римские числа. Чтобы указать необходимый тип нумерующих элементов используйте атрибут type. Например:

<ol type="1"> - Будут использованы числа
 <li>...</li>
</ol>
<ol type="A" - Будут использованы прописные латинские буквы
 <li>...</li>
</ol>

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

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

Маркированный список создается при помощи тега <ul> (unordered list), пункты списка создаются также при помощи тега <li>. Все пункты списка будут отмечены маркером автоматически.

<html>
 <head>
    <title>Название сайта</title>
 </head>
 <body>
     <ul>
      <li>Первый</li>
      <li>Второй</li>
      <li>Третий</li>
    </ul>
   </body>
</html>

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

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

<ul type="circle">  - пустой круг
 <li>...</li>
</ul>
<ul type="square"> - квадрат
 <li>...</li>
</ul>

Маркированный список - квадрат HTML

Список описаний

Очень редко встречается "Список описаний", отличие от нумерованного и маркированного списка в том, что для каждого пункта списка можно добавить описание. Список описаний создается при помощи тега <dl> (description list), пункты при помощи тега <dt>, а описание пунктов при помощи тега <dd>.

<html>
 <head>
    <title>Название сайта</title>
 </head>
 <body>
 <dl>
  <dt>Первый</dt>
   <dd>Описание 1</dd>
  <dt>Второй</dt>
   <dd>Описание 2</dd>
  <dt>Третий</dt>
   <dd>Описание 3</dd>
  </dl>
   </body>
</html>