HTML / 7. Форматированные списки

Неупорядоченные списки

Подобно перечню покупок или сданных в прачечную вещей, неупорядоченный список представляет собой совокупность однородных элементов, между которыми нет отношений порядка или следования. Самые распространенные в сети неупорядоченные списки – это собрание гиперссылок на другие документы. Общая тема, например «Сайты любителей кумкватов», связывает отдельные элементы в неупорядоченный список, который можно читать в каком угодно порядке.

Тег <ul>
Тег <ul> сигнализирует броузеру, что все, следующее за ним, вплоть до закрывающего тега </ul>, представляет собой неупорядоченный список элементов. Внутри неупорядоченного списка каждый элемент отмечается тегом <li>. Кроме того, в список может входить практически любое HTML/XHTML-содержимое, включая другие списки, текст и мультимедийные элементы.При отображении броузер обычно предваряет любой элемент списка специальным маркером и, располагая каждый элемент неупорядоченного списка с новой строки, применяет к нему какое-нибудь форматирование, например отступ от левого края окна. Действительное отображение неупорядоченных списков хотя и сходно у популярных броузеров (рис. 7.1), не определяется стандартами, так что не надо увлекаться точным позиционированием элементов на экране.

Вот пример неупорядоченного списка, описанного в соответствии со стандартом XHTML:
Popular Kumquat recipes:

<ul>
<li>Pickled Kumquats</li>
<li>'Quats and 'Kraut (a holiday favorite!)</li><li>'Quatshakes</li>
</ul>
There are so many more to please every palate!

Ловкие HTML-авторы иногда применяют вложенные неупорядоченные списки с элементами, отмеченными тегом <li>, и без него, чтобы воспользоваться автоматической системой создания последовательных отступов. Вы сможете соорудить кое-какие хитроумные фрагменты, применяя этот способ. Но только не полагайтесь на него, имея дело с различными броузерами, особенно с теми, что появятся в будущем.

Лучше применить свойство border в определениях стиля в тегах абзаца (<p>) или раздела (<div>), чтобы организовать отступы в секциях вашего документа, не являющихся списками.

Атрибут type
Графические броузеры автоматически снабжают каждый отмеченный тегом <li> элемент неупорядоченного списка специальным маркером. В частности, Netscape и Firefox выводят ромбик, а Internet Explorer и Opera применяют сплошной закрашенный кружок. Броузеры, поддерживающие HTML 3.2 и более поздние версии, включая 4.0 и 4.1, так же как и XHTML 1.0, позволяют употреблять атрибут type для определения того, какой символ маркера будет отмечать элементы неупорядоченного списка. Этот атрибут может принимать такие значения: disc (диск), circle (круг), square (квадрат).

Все элементы в списке будут отмечаться указанным маркером, если только отдельный элемент не отменит его спецификацию. Как это делается, описано далее в этой главе.
С появлением стандарта каскадных таблиц стилей W3C признал нежелательным в HTML 4 и XHTML атрибут type. Ожидается, что он выйдет из употребления.

Компактные неупорядоченные списки
Если вы любите широкие открытые пространства, вам не понравится необязательный атрибут тега <ul> compact. Он предлагает броузеру сжать неупорядоченный список в компактный блок меньшего размера. Обычно броузер уменьшает расстояние между представленными элементами. И если он что-нибудь и делает с отступами в списке, так
убавляет их (обычно броузер ничего с ними не делает).

Некоторые броузеры игнорируют атрибут compact, поэтому не следует полагаться на его свойства форматирования. Кроме того, этот атрибут признан нежелательным в стандартах HTML 4 и XHTML, так что ему недолго осталось жить.

Атрибуты class и style
Атрибуты class и style дают возможность управления отображением списков при помощи каскадных таблиц стилей, что позволяет осуще-ствлять более совершенный контроль, нежели тот, которого можно достичь с применением отдельных атрибутов, подобных type. Включайте атрибут style в тег <ul>, чтобы назначить в качестве маркеров ваши собственные пиктограммы, вместо того чтобы употреблять общепринятые кружки, диски и квадратики. Атрибут class позволяет применять к содержимому тега стиль, заранее определенный для данного класса списков. Значение атрибута class – это имя стиля, определенного в таблице стилей на уровне документа или внешним образом.

Атрибуты lang и dir
Атрибут lang позволяет определить язык, который употребляется в списке, а атрибут dir дает возможность посоветовать броузеру, в каком направлении следует выводить текст. Значение атрибута lang – это двухбуквенный код языка по стандарту ISO, включающий необязательный языковой модификатор. К примеру, lang=en-UК сообщает броузеру, что список написан по-английски, причем так, как говорят и пишут в Великобритании (United Kingdom). Предполагается, что броузер как-то отразит в макете и типографских решениях ваш выбор языка.

Атрибут dir сообщает броузеру, в каком направлении следует отображать содержимое списка: слева направо (dir=ltr), как в английском или русском языках, или справа налево (dir=rtl) для таких языков, как китайский или иврит.

Атрибуты id и title
Используйте атрибут id для обеспечения неупорядоченного списка меткой. Допустимое значение атрибута – заключенная в кавычки строка, которая уникальным образом идентифицирует список и позволяет употреблять его в качестве цели гиперссылок и селектора в таблицах стилей, для автоматического поиска и ряда других приложений.

Вы также можете использовать необязательный атрибут title и заключенную в кавычки строку – значение атрибута – для дополнительной идентификации списка. В отличие от id, значение атрибута title не обязано быть уникальным.

Атрибуты событий
Многие относящиеся к поведению пользователя события как внутри списка, так и вне него, такие как одинарный или двойной щелчок мышью в области отображения списка, распознаются современными броузерами. С помощью соответствующих on-атрибутов и их значений можно реагировать на эти события, отображая окно диалога с пользователем или активизируя какое-нибудь мультимедийное событие.

Статьи по HTML на эту тему:

Вложенные списки
Директории
Как использовать списки
Меню
Списки определений

Вернуться в раздел: HTML / 7. Форматированные списки