Простые списки можно создать с обрывов текста или страниц. HTML предлагает инструменты для организации и группировки данных. Списки пригодятся для создания карты сайта (оглавления) .
В HTML имеются три вида списков:
- маркированный список
- нумерованный список
- список определений
Списки отличаются по типам представления.
Маркированный список – это списки, в которых пункты отмечаются с помощью различных символов. Такой вид списка еще называют ненумерованный, или неупорядоченный, для элемента списка последовательность неважна. Для создания списка в HTML предусмотрен элемент UL, требующий наличие закрывающего тега. Пункты списка находятся внутри элемента UL . Каждый пункт начинается с элемента LI .
У элемента UL есть атрибут type, определяющий вид маркера списка. Может принимать следующие значения:
circle – создает маркер в виде круга, белого внутри;
square – создает маркер в виде квадрата;
disc – создает маркер в виде круга, закрашенного черным цветом.
Пример создания маркированного списка с разными маркерами:
<!DOCTYPE html>
<html>
<head>
<title>Списки HTML</title>
</head>
<body>
<ul type=”circle”>
<li>HTML</li>
<li>PHP</li>
<li>SEO</li>
<li>JavaScript</li>
</ul>
<ul type=”square”>
<li>HTML</li>
<li>PHP</li>
<li>SEO</li>
<li>JavaScript</li>
</ul>
<ul type=”disc”>
<li>HTML</li>
<li>PHP</li>
<li>SEO</li>
<li>JavaScript</li>
</ul>
</body>
</html>
При создании маркированного списка можно задать вид маркера отдельно для каждого пункта списка. Если вы хотите создавать свои маркеры для списков , в этом случае внешний вид будет намного лучше соответствовать стилю вашего сайта.
В HTML есть возможность создать список с графическими маркерами. Для этого нужно вместе элемента LI подставить картинку с желаемым изображением. А с помощью элемента BR можно перенести строку.
Список с графическими маркерами:
<ul>
<img src=”marker.png” />HTML<br />
<img src=”marker.png” />PHP<br />
<img src=”marker.png” />SEO<br />
<img src=”marker.png” />JavaScript<br />
</ul>
Нумерованный список – если нужно расписать порядок действий для перечисления. Для создания упорядоченного списка применяется элемент OL, которому требуется наличие закрывающего тега, а все пункты списка находятся внутри элемента. У элемента OL есть атрибут type, который задает формат символов, используемых для нумерации.
Значения атрибута type указывают, что пункты будут нумероваться с помощью:
A – заглавных букв латинского алфавита;
a – строчных букв латинского алфавита;
I – заглавных римских цифр;
i – строчных римских цифр;
1 – арабских цифр.
Вторым атрибутом элемента OL является start , указывающий, с какого числа начать нумерацию списка.
Пример кода для создания упорядоченного списка с разной нумерацией:
<ol type=”1″ start=”10″>
<li>Курсы HTML</li>
<li>Курсы PHP</li>
<li>Курсы SEO</li>
<li>Курсы JavaScript</li>
</ol>
<ol type=”A”>
<li>Новости мира технологий</li>
<li>Военные разработки</li>
<li>Последние новости мира</li>
<li>Рекомендации Seo продвижения</li>
</ol>
<ol type=”a”>
<li>IT услуги</li>
<li>Для вебмастера</li>
<li>Партнерская программа</li>
<li>Вакансии IT</li>
</ol>
<ol type=”I”>
<li>Разместить ссылку</li>
<li>Вечные ссылки</li>
<li>Маркетинг</li>
<li>Контекстная реклама</li>
</ol>
<ol type=”i”>
<li>Земля</li>
<li>Марс</li>
<li>Венера</li>
<li>Юпитер</li>
</ol>
С помощью атрибута value можно задать номер, с которого будет продолжена нумерация.
<ol type=”1″ >
<li type=”1″ value=”10″>Игры</li>
<li>Фильмы</li>
<li value=”1″>Музыка</li>
<li type=”I”>Книги</li>
</ol>
Список определений – это особый вид списка, применяется для форматирования словарей или когда необходимо пояснять термины. Особенность списка определений элемент списка всегда состоит с двух частей. Первая часть задает определяемое слово, а вторая – описание или расшифровку термина. Для организации списка определений служит элемент DL, нужно задавать элементы DT и DD. Особых атрибутов в них не предусмотрено.
Пример списка определений:
<dl>
<dt>Правители России:</dt>
<dd>Александр</dd>
<dt>Петр</dt>
<dd>Елизавета</dd>
<dd>Николай</dd>
<dd>Путин</dd>
</dl>
Как создать вложенный список – их можно комбинировать и вкладывать друг в друга списки разных типов, главное следить где вложенный список, а где список верхнего уровня.
Пример вложенного списка:
<ul>
<li>Пункт 1.</li>
<li>Пункт 2.
<ul>
<li>Подпункт 2.1.</li>
<li>Подпункт 2.2.
<ul>
<li>Подпункт 2.2.1.</li>
<li>Подпункт 2.2.2.</li>
</ul>
</li>
<li>Подпункт 2.3.</li>
</ul>
</li>
<li>Пункт 3.</li>
</ul>
