Для более удобного ознакомления с материалом требуется его должное оформление. Создание маркированных либо нумерованных списков способствует легкому и ненавязчивому чтению. Кроме того данный способ группировки содержимого статьи делает текст более привлекательным в глазах посетителей.
Для отображения списков существуют специальные теги ul, ol, dl. Давайте на деле разберем, что каждый из них приставляет собой по отдельности.
Виды HTML списков
В HTML существует три вида списков:
№ 1. Маркированный список html
За его отображение отвечает тег ul. То есть текст, расположившийся между открывающимся <ul> и закрывающимся </ul> тегом, будет относиться к маркированному списку.
В свою очередь внутри тега <ul> находятся теги <li> к которым и привязан тот или иной пункт. В отличии от тега <ul>, тег <li> закрывать не обязательно.
<li>Создание сайта</li>
<li>Оптимизация</li>
<li>Продвижение</li>
<li>Монетизация</li>
</ul>
Тег <ul> может содержать внутри себя следующие параметры:
<ul
- circle — маркер в виде не закрашенного кружка.
- type= disc — маркер в виде закрашенного кружка.
- square — маркер квадратной формы.
- compact — компактное отображение списка.
>
Указанный параметр type можно использовать для тега <li>, но он будет активен только для конкретного пункта меню.
При желании установить какой-то особый маркер можно вместо привычного тега <li> применять тег <img src…> в результате чего напротив пункта будет отображаться изображение.
№ 2. Нумерованный список html
За отображение и вывод данного HTML списка отвечают парные теги <ol>… </ol>
Для создания каждого пункта списка, так как и в вышеприведенном примере используется элемент <li>
<li>Создание сайта</li>
<li>Оптимизация</li>
<li>Продвижение</li>
<li>Монетизация</li>
</ol>
Тег <ol> может включать в себя следующие атрибуты:
<ol
- type — отвечает за вид маркера, который может отображаться в виде букв или цифр. К нему относятся значения: 1 — маркер по умолчанию (десятичная нумерация); А — заглавные буквы (A, B, C…); а — строчные буквы (a, b, c…); I — римские заглавные буквы (I, II, III…); i — строчные римские.
- reversed — задает команду отображения списков в обратном отчете (5, 4, 3…).
- start — отвечает за вывод начального значения, от которого начнется естественный отсчет нумерации. К примеру, поставленное в начале списка значение <ol start =”B”, говорит о том, что первому пункту списка будет присвоен порядковый номер «B».
>
<li>Создание сайта</li>
<li>Оптимизация</li>
<li>Продвижение</li>
<li>Монетизация</li>
</ol>
При необходимости удаления какого-нибудь пункта из списка, отображение нумерации не нарушится, поскольку браузеры научены в автоматическом режиме задавать правильный порядок указанных атрибутов.
В свою очередь тег <li> в нумерованном списке может в себя вмещать атрибут value, который позволяет изменить порядковый номер определенного элемента установленного по умолчанию.
№ 3. Список определений html
Для создания и отображения данного списка используется тег <dl>…</dl>
Для добавления термина применяется тег <dt></dt>, определения <dd></dd>. Данный тег не имеет атрибутов.
<dt>Администратор сайта:</dt>
<dd>Александр Щербина</dd>
<dt>Посетители:</dt>
<dd>Подписчики</dd>
<dd>Все желающие</dd>
</dl>
Надеюсь, я доступно объяснил, как сделать список в html. Если у вас после прочтения статьи остались вопросы, пожалуйста, задавайте их в комментариях.
Обнаружили в тексте грамматическую ошибку? Пожалуйста, сообщите об этом администратору: выделите текст и нажмите сочетание горячих клавиш Ctrl+Enter