Как сделать список в HTML — пошаговое руководство с примерами

В HTML языке есть много возможностей для разметки, в том числе и списки, которые можно стилизовать стилями CSS. Сейчас мы рассмотрим несколько вариантов как сделать список html и немного изменим их внешний вид. А также, в виде маркеров списка могут быть изображения. Например, звездочки или стрелочки, которые указывают на начало нового элемента списка.

Как сделать список в HTML и какие они бывают

Обычно в HTML есть три вида списков — это: маркированный, нумерованный и список определений. А также, возможно вложенные списки,то есть, у какого либо пункта из списка могут быть дочерние элементы. Список с дочерними элементами выглядит в виде дерева, где есть главный пункт, затем его подпункты и у них в свою очередь также могут быть дочерние подпункты.

Маркированный список

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

<h1>Маркированный список</h1>
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>PHP</li>
  <li>MySQL</li>
</ul>

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

Нумерованные списки открываются с помощью тега <ol>, в него также как и в предыдущем варианте вкладываются элементы списка с помощью тега <li>. В этом примере браузер сам пронумерует все элементы списка по порядку начиная с 1.

<h1>Нумерованный список</h1>
<ol>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>PHP</li>
  <li>MySQL</li>
</ol>

Список определений

HTML список определений дается для того чтоб определить заголовок той или иной информации. Для начала открываем главный тег <dl>, затем в него уже вставляем определения элементов списка, <dt> — определяет заголовок информации, <dd> — несет саму информацию.

<h1>Список определений</h1>
<dl>
  <dt>HTML</dt>
  <dd>Язык разметки.</dd>
  <dt>CSS</dt>
  <dd>Язык стилей.</dd>
  <dt>JavaScript</dt>
  <dd>Язык программирования на стороне клиента.</dd>
  <dt>PHP</dt>
  <dd>Язык программирования на стороне сервера.</dd>
  <dt>SQL</dt>
  <dd>Язык взаимодействия с базами данных.</dd>
</dl>

Вложенные списки

Как уже писали выше, бывают и вложенные списки которые позволяют выстраивать дерево списков с различной информацией. Например, у нас есть интернет-магазин в котором множество категорий. Нам нужно все категории упорядочить, заглавная категория «Одежда», затем есть подкатегории «Мужская одежда», «Женская одежда» и т.д. Соответственно, в подкатегориях могут быть и другие подкатегории.

<h1>Древовидный список категорий</h1>
<ul>
    <li>Одежда
        <ul>
            <li>Мужская одежда
                <ul>
                    <li>Верхняя одежда</li>
                    <li>Обувь</li>
                    <li>Нижнее белье</li>
                    <li>Головные уборы</li>
                    <li>Аксессуары</li>
                  </ul>
            </li>
            <li>Женская одежда</li>
            <li>Детская одежда</li>
          </ul>
    </li>
    <li>Сувениры</li>
    <li>Посуда</li>
    <li>Игрушки</li>
    <li>Мебель</li>
  </ul>

Таким образом мы получим вложенные списки трех уровней:

Стилизация HTML списков с помощью CSS

Задать стили спискам можно при помощи css стиля list-style-type и добавить цвет при помощи color.

ul {
  list-style-type: square; /* квадратные маркеры */
  color: blue;
}

При помощи применения данного стиля в теге <style> мы сделали маркеры квадратными а не круглыми и задали им синий цвет. Точно также можно задать изображение вместо маркера, естественно, заранее подготовив размер самой картинки. Оптимальный размер картинки для списков будет 16х16 пикселей.

ul {
  list-style-image: url("/assets/images/icon-list-style.png"); /* маркеры в виде картинки */
}

Итоги создания списков HTML

Теперь вы понимаете принцип создания списков и у вас больше не возникает вопрос, как сделать список в html. Далее, вам остается только наращивать опыт просто экспериментируя с данными. Например, создайте html список с 10 уровнями вложений, на разных уровнях применяйте разные типы списков. Сами элементы списков сделайте в виде текста, ссылок, изображений, видео и т.д. А также, рекомендуем к ознакомлению наш материал о том как создать html таблицу на примерах.