Спецификация HTML 4.01
         

Идентификаторы элемента: атрибуты id и class



7.5.2 Идентификаторы элемента: атрибуты id  и class   

Определения атрибутов

id = name [CS] Устанавливает имя элемента. Имя должно быть уникальным для данного документа. class = cdata-list [CS] Устанавливает имя класса или набор имён классов для элемента. Любому количеству элементов может быть назначено то же имя или имена класса. Множественные имена классов могут разделяться пробельными символами. Атрибут id назначает элементу уникальны идентификатор (который может проверяться разборщиком SGML). Например, следующие параграфы различаются значениями своих id: <P id="myparagraph"> Этот параграф имеет уникальное имя.</P> <P id="yourparagraph"> Этот параграф тоже имеет уникальное имя.</P>

Атрибут id имеет несколько ролей в HTML:

  • переключатель таблиц стилей;
  • anchor/якорь назначения для гипертекстовых ссылок;
  • как значение для ссылки на конкретный элемент из скрипта;


  • как имя объявленного элемента OBJECT;
  • для общих надобностей обработки в ПА (напр., для идентификации полей при извлечении данных из страниц HTML в базы данных, переводе документов HTML в другие форматы и т.п.).

Атрибут class одновременно назначает элементу одно или более имён классов; можно сказать, что элемент принадлежит данным классам. Имя класса может разделяться несколькими объектами элемента. Атрибут class имеет несколько ролей в HTML:

  • переключатель таблиц стилей (если автор захочет назначить информацию о стиле нескольким элементам);
  • для общих надобностей обработки в ПА.

В следующем примере элемент SPAN используется вместе с атрибутами id и class для разметки сообщений документа. Сообщения появляются в английской и французской версиях.

<!-- Сообщения на английском --> <P><SPAN id="msg1" class="info" lang="en">Variable declared twice</SPAN> <P><SPAN id="msg2" class="warning" lang="en">Undeclared variable</SPAN> <P><SPAN id="msg3" class="error" lang="en">Bad syntax for variable name</SPAN> <!-- Сообщения на французском --> <P><SPAN id="msg1" class="info" lang="fr">Variable d&eacute;clar&eacute;e deux fois</SPAN> <P><SPAN id="msg2" class="warning" lang="fr">Variable ind&eacute;finie</SPAN> <P><SPAN id="msg3" class="error" lang="fr">Erreur de syntaxe pour variable</SPAN>

Следующие правила CSS (Каскадной Таблицы Стилей) могут сообщить визуальным ПА, что необходимо отобразить информационные сообщения зелёным цветом, предупреждения - жёлтым, а ошибки - красным:

SPAN.info { color: green } SPAN.warning { color: yellow } SPAN.error { color: red }

Обратите внимание, что французское "msg1" и английское "msg1" не могут появляться в одном документе, поскольку они разделяют одно значение id. Авторы могут также использовать атрибут id для уточнения представления определённых сообщений, делать их якорями назначения и т.п.

Почти любому элементу HTML может быть назначен идентификатор и информация класса.

Предположим, например, что мы создаём документ о языке программирования. Документ содержит несколько отформатированных примеров. Мы используем элемент PRE для форматирования примеров. Мы назначаем также цвет фона (зелёный) всем объектам элемента PRE, принадлежащих классу "example".

<HEAD> <TITLE>... заголовок документа ...</TITLE> <STYLE type="text/css"> PRE.example { background : green } </STYLE> </HEAD> <BODY> <PRE class="example" id="example-1"> ...здесь - код примера... </PRE> </BODY>

Установив в этом примере атрибут id, мы можем
(1) делать ссылки на класс и
(2) переопределять информацию стиля класса с помощью объекта информации стиля.

Примечание. Атрибут id разделяет то же пространство имён, что и атрибут name, когда используется для именования якоря. См. дополнительно раздел якоря с id.



Содержание  Назад  Вперед