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

Категория: HTML Опубликовано: 15.12.2016

создание списков в 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.

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

Оставить комментарий

Просмотров: 669

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


Защитный код
Обновить

X

Добро пожаловать!

Видимо вы используете браузерное расширение AdBlock, отвечающее за блокировку рекламы. Этот веб-проект существует и развивается за счет рекламных объявлений. Пожалуйста, внесите его в белый список. Заранее премного благодарен. Как отключить AdBlock

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

LSI-слова - особенности поиска и подбора

LSI-слова - особенности поиска и подбора

Подробнее
LSI-копирайтинг - тренд 2017 года

LSI-копирайтинг - тренд 2017 года

Подробнее
Как писать статьи? Секреты быстрой работы копирайтера

Как писать статьи? Секреты быстрой работы копирайтера

Подробнее
Как подобрать ключевые слова

Как подобрать ключевые слова

Подробнее