Теги <OL>,<UL>,<DL> - Как вставлять СПИСКИ в свой блог с помощью HTML тэгов

Как работать со списками в своем блоге

Тег <IMG> Тег <A> Теги <OL>,<UL>,<LI>,<DL>,<DT>,<DD> Прочие HTML-теги

На афонской тропе (рука дрогнула)

Чтобы ваши тексты выглядели структурно, прозрачно и понятно следует знать и применять специальные средства HTML для представления списков. Всего в HTML предусмотрено три вида списков:

нумерованный (включая и буквенную нумерацию, и также римскими цифрами);
ненумерованный, но с маркерами (обычно кружочками);
и двухуровневый список, названный "списком определений".

Их можно вкладывать друг в друга и даже независимо использовать отдельные их части. Это мощные средства HTML-разметки, существенно улучшающие внешний вид страниц.

Нумерованный список (Ordered List), тег <ol> с тэгами <li> для элементов

Нумерованный список начинается HTML-тэгом <ol> (Ordered List) и завершается тэгом </ol>. Список автоматически отделяется от окружаещего контента отступами сверху и снизу. Допускается вложенность нумерованного (или иного) списка в другой список (любого вида). При этом появляются дополнительные отступы слева.
Каждый пункт нумерованного списка может занимать несколько строчек (просто переноситься без Enter-а). Начинается он тэгом <li> и завершается тэгом </li>. Все пункты автоматически сдвигаются вправо (появляются отступы слева).

<ol type="i" title="Всплывающая подсказка"> Заголовок списка
<li> Первый пункт списка </li>
...
<li> Последний пункт списка </li>
</ol>

Атрибуты (параметры) тега <ol>

type="A" - Заменяет числовую нумерацию на Заглавные латинские буквы
type="a" - Заменяет числовую нумерацию на Строчные латинские буквы
type="I" - Заменяет арабскую числовую нумерацию на Римскую (в верхнем регистре)
type="i" - Заменяет арабскую числовую нумерацию на Римскую (в нижнем регистре)
type="1" - Числовая нумерация арабскими цифрами (По умолчанию)
start="21" - Начальное значение для любой числовой нумерации
title="Всплывающий текст (подсказка)" - Появляется при наведении курсора мыши на любую часть списка. Используют редко.

Ненумерованный (но маркированный) список (Unordered List), тег <ul> с тэгами <li> для элементов

Ненумерованный список начинается HTML-тэгом <ul> (Unordered List) и завершается тэгом </ul>. Список автоматически отделяется от окружаещего контента отступами сверху и снизу. Допускается вложенность ненумерованного (или иного) списка в другой список (любого вида). При этом появляются дополнительные отступы слева.
Каждый пункт ненумерованного списка может занимать несколько строчек (просто переноситься без Enter-а). Начинается он тэгом <li> и завершается тэгом </li>. Все пункты автоматически сдвигаются вправо (появляются отступы слева).

<ul title="Всплывающая подсказка"> Заголовок списка
<li> Первый пункт списка </li>
...
<li> Последний пункт списка </li>
</ul>

Атрибуты (параметры) тега <ul>

type="disc" - Список маркируется черными кружочками
type="circle" - Список маркируется малозаметными окружностями
type="square" - Список маркируется черными квадратиками
title="Всплывающий текст (подсказка)" - Появляется при наведении курсора мыши на любую часть списка. Используют редко.

Примечание: У меня в Опере (на Linux), какой тип не ставь, показываются только окружности! А вот если не использовать тэги <ul> и </ul> (убрать их совсем, а теги <li> и </li> оставить), то список успешно выдается - маркированным черными кружочками (как и должен бы по умолчанию), но без отступа слева...

Список определений (Definition List), тег <dl> с тэгами <dt>(Definition Term) для терминов и с тэгами <dd> (Definition Description) для описаний

Начинается HTML-тэгом <dl> (Definition List) и завершается тэгом </dl>. Внутри следуют такие пары пар: название термина (Definition Term) между тэгами <dt> и </dt> и описание термина (Definition Description) между тэгами <dd> и </dd>. Каждое определение-блок может занимать несколько строчек (причем могут вставляться теги переноса строки <br /> (а для CMS Drupal - просто одиночный Enter)).

Единственный атрибут (параметр) тега <dl>:

title="Всплывающий текст (подсказка)" - Появляется при наведении курсора мыши на любую часть списка. Используют редко.

<dl title="Всплывающая подсказка"> Заголовок списка
<dt> Первый ТЕРМИН </dt>
<dd> Определение первого термина </dd>
...
<dt> Последний ТЕРМИН </dt>
<dd> Определение последнего термина </dd>
</dl>

ТЕРМИН-1 - Это уровень DT - наименование термина: Определение термина-1" - Это уровень DD - развернутое описание термина.
ТЕРМИН-2 - Это уровень DT - наименование термина: Определение термина-2" - Это уровень DD - развернутое описание термина.
ТЕРМИН-3 - Это уровень DT - наименование термина: Определение термина-3" - Это уровень DD - развернутое описание термина.

Не читайте про это: Эксперементируя (у меня Опера под Linux, но вроде это везде так), выяснил следующее:

тег <dd> не зависит от наличия своей вложенности в теги <dl> и <dt> и проявляется в большом отступе слева для всего заключенного в пару <dd> и </dd> текста. Причем можно прерывать текст (Enter-ом в Друпале или тегом переноса строки <br />), а чтобы сделать, не теряя отступа, новый абзац (параграф <p> - </p>), то жму два Enter-а и вставляю в пустую строку   (так в Друпале) - и все путем;
тег <dl> сдвигает вправо все, что в него вложено, - на половинный отступ. А т.к. все, что заключено в пару <dd> и </dd> уже имеет большой отступ, независящий от тега <dl>, то получается "лесенка": сначала <dl> делает шажок, потом <dd> как-бы добавляет еще столько-же - и все путем;
тег <dt> ничего не сдвигает, но равняется на сдвиг <dl> (если он есть), или на начало строки, если мы намеренно не используем <dl>. И еще назначение тега <dt> - держаться на оптимальном расстоянии от последующего списка, так что лучше выглядит OL-список или UL-список с заголовком в <dt> (вот такой гибрид), нежели в "родной" нотации, где заголовок следует за тегами <ol> или <ul> !

Используем специальные кнопки BUEditor для облегчение ввода тегов

Если на сайте используется Drupal-модуль "редактор BUEditor":

Для преобразований выбранных строчек текста в списке в редакторе BUEditor предусмотрены соответствующие кнопки "Ordered list. Converts selected lines to a numbered list.", "Unordered list. Converts selected lines to a bulleted list." (с изображениями списков на значках), облегчающие первичное наложение структуры списков на набор линий текста. Если вы разобрались с применяемыми в списках тегами, то вам не составит труда подправить заготовку, дополнить новыми пунктами и т.д. Дерзайте!

Тег <IMG> Тег <A> Теги <OL>,<UL>,<LI>,<DL>,<DT>,<DD> Прочие HTML-теги

Путь к Богу