Курс HTML5, CSS3, SEO, Wordpress и Photoshop

Списки в HTML

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

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

Следующая конструкция делает маркированный список:

<!doctype html>

<html>

<body>

<ul>

<li>Первый элемент</li>

<li>Второй элемент</li>

<li>Третьи элемент</li>

</ul>

</body>

</html>

Вот как это выглядит в браузере:

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

Замечание

Можно добавлять неограниченное количество элементов маркированного списка, вставив эти элементы через <li>...</li>

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

Следующая конструкция делает нумерованный список:

<!doctype html>

<html>

<body>

<ol>

<li>Первый элемент</li>

<li>Второй элемент</li>

<li>Третьи элемент</li>

</ol>

</body>

</html>

Вот как это выглядит в браузере:

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

Замечание

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

Меню в HTML

Теперь, давайте создадим простенькое меню с помощью маркированного списка, для этого поставим внутрь <li>...</li> ссылки на другие html документы (сайты):

<!doctype html>
<html>
<body>
<ul>
<li><a href="index.html">Главная</a></li>
<li><a href="contact.html">Контакты</a></li>
<li><a href="about.html">О нас</a></li>
<li><a href="http://google.kz">Google</a></li>
</ul>
</body>
</html>

В браузере это выглядит так:

Простое меню