создание списков в htmlДля более удобного ознакомления с материалом требуется его должное оформление. Создание маркированных либо нумерованных списков способствует легкому и ненавязчивому чтению. Кроме того данный способ группировки содержимого статьи делает текст более привлекательным в глазах посетителей.

Для отображения списков существуют специальные теги ul, ol, dl. Давайте на деле разберем, что каждый из них приставляет собой по отдельности.

Виды HTML списков

В HTML существует три вида списков:

1. Маркированный список html. За его отображение отвечает тег ul. То есть текст, расположившийся между открывающимся <ul> и закрывающимся </ul> тегом, будет относиться к маркированному списку.

В свою очередь внутри тега <ul> находятся теги <li> к которым и привязан тот или иной пункт. В отличии от тега <ul>, тег <li> закрывать не обязательно.

<ul>
<li>Создание сайта</li>
<li>Оптимизация</li>
<li>Продвижение</li>
<li>Монетизация</li>
</ul>

маркированный список html

Тег <ul> может содержать внутри себя следующие параметры:

<ul

- circle – маркер в виде не закрашенного кружка.

- type= disc – маркер в виде закрашенного кружка.

- square – маркер квадратной формы.

- compact – компактное отображение списка.

>

Указанный параметр type можно использовать для тега <li>, но он будет активен только для конкретного пункта меню.

При желании установить какой-то особый маркер можно вместо привычного тега <li> применять тег <img src…> в результате чего напротив пункта будет отображаться изображение.

2. Нумерованный список html. За отображение и вывод данного HTML списка отвечают парные теги <ol>… </ol>

Для создания каждого пункта списка, так как и в вышеприведенном примере используется элемент <li>

<ol>
<li>Создание сайта</li>
<li>Оптимизация</li>
<li>Продвижение</li>
<li>Монетизация</li>
</ol>

нумерованный html

Тег <ol> может включать в себя следующие атрибуты:

<ol

- type – отвечает за вид маркера, который может отображаться в виде букв или цифр. К нему относятся значения:

1 – маркер по умолчанию (десятичная нумерация).

А – заглавные буквы (A, B, C…).

а – строчные буквы (A, B, C…).

I – римские заглавные буквы (I, II, III…).

i – строчные римские.

- reversed – задает команду отображения списков в обратном отчете (5, 4, 3…).

- start – отвечает за вывод начального значения, от которого начнется естественный отсчет нумерации. К примеру, поставленное в начале списка значение <ol start =”B”, говорит о том, что первому пункту списка будет присвоен порядковый номер «B».

<ol type="I">
<li>Создание сайта</li>
<li>Оптимизация</li>
<li>Продвижение</li>
<li>Монетизация</li>
</ol>

применение атрибута type

При необходимости удаления какого-нибудь пункта из списка, отображение нумерации не нарушится, поскольку браузеры научены в автоматическом режиме задавать правильный порядок указанных атрибутов.

В свою очередь тег <li> в нумерованном списке может в себя вмещать атрибут:

- value – значение позволяющее изменить порядковый номер определенного элемента установленного по умолчанию.

3. Список определений html. Для создания и отображения данного списка используется тег <dl>…</dl>

Для добавления термина применяется тег <dt></dt>, определения <dd></dd>. Данный тег не имеет атрибутов.

<dl>
  <dt>Администратор сайта:</dt>
    <dd>Александр Щербына</dd>
  <dt>Посетители:</dt>
    <dd>Подписчики</dd>
    <dd>Все желающие</dd>
</dl>

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

Думаю на сегодня достаточно, и теперь вы знаете, как сделать список в html. Со следующей статьи вы узнаете, как сделать линию с помощью HTML и CSS.

Спасибо за внимание и до скорого на страницах Stimylrosta.

Не ленитесь, поделитесь!

Добавить комментарий


Читайте также

Что такое заспамленность текста

Что такое заспамленность текста

Подробнее
Что такое трафик сайта

Что такое трафик сайта

Подробнее
Что такое стоп-слова

Что такое стоп-слова

Подробнее
Как сделать лендинг самостоятельно

Как сделать лендинг самостоятельно

Подробнее
Основные виды копирайтинга

Основные виды копирайтинга

Подробнее
Что такое вода в тексте

Что такое вода в тексте

Подробнее

Самое читаемое

Присоединяйтесь!

Наверх