Вы здесь

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

Существует три типа списков: упорядоченные, неупорядоченные и списки определений. Здесь мы рассмотрим первые два вида списков, а о списках определений вы сможете узнать в учебнике "HTML среднего уровня".

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

Для определения неупорядоченных списков используется тег ul, а для определения упорядоченных списков – тег ol. Внутри списков для определения каждого отдельного элемента списка используется тег li.

Измените свою веб-страницу следующим образом:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <title>Моя первая веб-страница</title>
</head>
<body>
   <h1>Моя первая веб-страница</h1>
   <h2>Что это такое</h2>
   <p>Простая страница, созданная при помощи HTML</p>
   <h2>Для чего это нужно</h2>
   <ul>
       <li>Чтобы изучить HTML</li>
       <li>Чтобы похвастать</li>
       <li>Потому что я обожаю свой компьютер и хочу привить ему любовь к HTML</li>
   </ul>
</body>
</html>

Если посмотреть эту веб-страницу в браузере, то увидите список, маркированный буллитами. Замените тег ul на тег ol, и вы увидите, что список стал нумерованным.

Кроме всего прочего можно включать одни списки в другие, формируя тем самым структурированную иерархию элементов.

Замените код списка из предыдущего примера следующим:

<ul>
   <li>Чтобы изучить HTML</li>
   <li>Чтобы похвастать
       <ol>
           <li>перед начальником</li>
           <li>перед друзьями</li>
           <li>перед моей кошкой</li>
           <li>перед маленькой говорящей уткой в моей голове</li>
       </ol>
   </li>
   <li>Потому что я обожаю свой компьютер и хочу привить ему любовь к HTML</li>
</ul>

И вот у нас список внутри списка. А ведь можно поместить еще один список внутри этого вложенного списка. И еще один. И так далее до бесконечности.