Создание списков в HTML

Для того чтобы на странице интернет ресурса можно было отобразить маркированный список, в HTML предусмотрены теги <ul>
и <li>
. Между тегами <ul>
помещаются элементы списка начинающиеся с тега <li>
.
Пример простого списка

HTML
<ul>
<li>маркированный список</li>
<li>выравнивание списка</li>
<li>маркеры с помощью тегов</li>
</ul>
Примеры списков заданных стилями
Маркеры в виде диска

HTML
<div class="list-disc">
<ul>
<li>маркеры в виде диска</li>
<li>маркеры списков</li>
<li>списки с дисковыми маркерами</li>
</ul>
</div>
Маркеры в виде окружности

HTML
<div class="list-circle">
<ul>
<li>создание списков</li>
<li>кольцевые маркеры</li>
<li>оформление списка</li>
</ul>
</div>
Маркеры квадратные

HTML
<div class="list-square">
<ul>
<li>списки с маркерами</li>
<li>квадратные маркеры</li>
<li>списки с квадратными маркерами</li>
</ul>
</div>
Маркеры в виде картинки

HTML
<div class="list-marker">
<ul>
<li>маркеры списков в виде картинки</li>
<li>картинки в виде маркеров</li>
<li>оформление списка красивыми маркерами</li>
</ul>
</div>
CSS
.list-disc,
.list-circle,
.list-square,
.list-marker
{
font-size: 16px;
line-height: 18px;
letter-spacing: 2px;
padding-top: 17px;
padding-bottom: 17px;
}
.list-disc li {
list-style-type: disc;
margin-left: 48px;
}
.list-circle li {
list-style-type: circle;
margin-left: 48px;
}
.list-square li {
list-style-type: square;
margin-left: 48px;
}
.list-marker li{
text-indent: 24px;
margin-left: 28px;
list-style-type: none;
background-repeat: no-repeat;
background-image: url(arrow.png);
}