Списки используются для того, чтобы упорядочить какие-либо данные и представить их наглядном и удобном виде. Списки бывают маркированными и нумерованными. Как они выглядят, мы все прекрасно знаем.
Маркированный список заключается в парный тег <ul></ul>.
Каждый элемент списка HTML заключается в парный тег <li></li>.
<!DOCTYPE html>
<html>
<head>
<meta charset= "utf-8">
<title>Маркированный список</title>
</head>
<body>
<h1>Маркированный список</h1>
<ul>
<li>Элемент 1</li>
<li>Элемент 2</li>
<li>Элемент 3</li>
<li>Элемент 4</li>
</ul>
</body>
</html>
<html>
<head>
<meta charset= "utf-8">
<title>Маркированный список</title>
</head>
<body>
<h1>Маркированный список</h1>
<ul>
<li>Элемент 1</li>
<li>Элемент 2</li>
<li>Элемент 3</li>
<li>Элемент 4</li>
</ul>
</body>
</html>
В браузере мы получаем вот такой результат:
Нумерованный список HTML заключается в тег <ol></ol>.
<!DOCTYPE html>
<html>
<head>
<meta charset= "utf-8">
<title>Нумерованный список</title>
</head>
<body>
<h1>Нумерованный список</h1>
<ol>
<li>Элемент 1</li>
<li>Элемент 2</li>
<li>Элемент 3</li>
<li>Элемент 4</li>
</ol>
</body>
</html>
<html>
<head>
<meta charset= "utf-8">
<title>Нумерованный список</title>
</head>
<body>
<h1>Нумерованный список</h1>
<ol>
<li>Элемент 1</li>
<li>Элемент 2</li>
<li>Элемент 3</li>
<li>Элемент 4</li>
</ol>
</body>
</html>
Внутри элементов списка HTML могут быть вложены и другие списки.
<!DOCTYPE html>
<html>
<head>
<meta charset= "utf-8">
<title>Вложенные списки</title>
</head>
<body>
<h1>Вложенные списки</h1>
<ol>
<li>Животные
<ul>
<li>Лев</li>
<li>Тигр</li>
<li>Пантера</li>
</ul>
</li>
<li>Птици
<ul>
<li>Сокол</li>
<li>Орёл</li>
<li>Стерх</li>
</ul>
</li>
</ol>
</body>
</html>
<html>
<head>
<meta charset= "utf-8">
<title>Вложенные списки</title>
</head>
<body>
<h1>Вложенные списки</h1>
<ol>
<li>Животные
<ul>
<li>Лев</li>
<li>Тигр</li>
<li>Пантера</li>
</ul>
</li>
<li>Птици
<ul>
<li>Сокол</li>
<li>Орёл</li>
<li>Стерх</li>
</ul>
</li>
</ol>
</body>
</html>
Список определений заключается в парный тег <dl></dl>.
Название определения заключается в парный тег <dt></dt>,
Описание определения заключается в парный тег <dd></dd>.
<!DOCTYPE html>
<html>
<head>
<meta charset= "utf-8">
<title>Список определений</title>
</head>
<body>
<h1>Список определений</h1>
<dl>
<dt>Название определения 1</dt>
<dd>Описание определения 1</dd>
<dt>Название определения 2</dt>
<dd>Описание определения 2</dd>
</dl>
</body>
</html>
<html>
<head>
<meta charset= "utf-8">
<title>Список определений</title>
</head>
<body>
<h1>Список определений</h1>
<dl>
<dt>Название определения 1</dt>
<dd>Описание определения 1</dd>
<dt>Название определения 2</dt>
<dd>Описание определения 2</dd>
</dl>
</body>
</html>
Про оформление списков с помощью CSS читайте здесь.