Существует три типа списков: упорядоченные, неупорядоченные и списки определений. Здесь мы рассмотрим первые два вида списков, а о списках определений вы узнаете позже.
Упорядоченные и неупорядоченные списки работают одинаково, за исключением того, что последние используются для представления непоследовательных списков, элементы которых обычно маркируются крупной черной точкой (буллитом), а первые используются для представления последовательных списков, которые обычно имеют вид элементов пронумерованных в возрастающем порядке.
Для определения неупорядоченных списков используется тег <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>
И вот у нас список внутри списка. А ведь можно поместить еще один список внутри этого вложенного списка. И еще один. И так далее до бесконечности.