Маркированный (неупорядоченный) список

Для создания маркированного списка используются теги < ul > и < li > . Тег < ul > - это контейнер маркированного списка. Тег < li > - элемент списка.


<ul>  - контейнер для пунктов списка 
    <li>Яблоки</li> -  пункты списка списка 
    <li>Абрикосы</li>
    <li>Бананы</li>
    <li>Сливы</li>
</ul>
  • Яблоки
  • Абрикосы
  • Бананы
  • Сливы

Типы маркеров

Для маркированного списка доступны 3 типа маркеров по умолчанию: disc, square, circle . Задать тип маркера можно при помощи CSS свойства list-style-type . Тип маркера может быть задан, как для списка в целом (свойство применяется к < ul > ), так и для конкретного элемента (свойство применяется к < li > ). 


<ul>
  <li style="list-style-type: disc ;">Disc - закрашенный круг, точка.</li>
  <li style="list-style-type: circle ;">Circle - окружность, пустая внутри.</li>
  <li style="list-style-type: square ;">Square - квадрат.</li>
</ul>
  • Disc - закрашенный круг, точка.
  • Circle - окружность, пустая внутри.
  • Square - квадрат.

Положение маркера в списке

HTML поддерживает 2 типа положений маркеров списка: внутри или снаружи. Положение маркера регулируется CSS свойством list-style-position . Положение может быть задано, как для списка в целом, так и для отдельного элемента. 


<ul>
  <li style="list-style-position: inside ;">Маркер внутри (inside)</li>
  <li style="list-style-position: outside ;">Маркер снаружи (outside)</li>
</ul>

Свой маркер в HTML списке

Использовать в качестве маркера HTML списка можно и свою картинку. Для этого используйте CSS свойство list-style-image .