Согласно W3C, атрибут ID в HTML - уникальный идентификатор элемента. Он обеспечивает способ определения области веб-страницы для стилей CSS, якорных ссылок и целей для скриптов.
Для чего используется атрибут ID?
Атрибут ID выполняет несколько действий для веб-страниц:
- Селектор таблицы стилей: Это функция, для которой большинство людей используют атрибут ID. Поскольку они уникальны, вы стилизуете только один элемент на своей веб-странице, когда используете свойство ID. Обратной стороной использования идентификатора для стилизации является то, что он имеет очень высокий уровень специфичности, что может сделать его очень сложным, если вам по какой-то причине понадобится переопределить стиль позже в таблица стилей. Из-за этого современные веб-практики склоняются к использованию классов и селекторов классов вместо идентификаторов и селекторов идентификаторов для общих целей стилизации.
- Именованные якоря для ссылки на: Веб-браузеры укажите точные местоположения в ваших веб-документах, указав идентификатор в конце URL-адреса. Добавьте идентификатор в конец URL-адреса страницы, поставив перед ним решетку. Свяжите эти якоря с самой страницей, добавив хэш-тег и имя идентификатора в href атрибут элемента. Например, для подразделения с идентификатором контакт, ссылку на него на этой странице с помощью #контакт.
- Ссылка на скрипты: Если вы пишете какие-либо функции Javascript, используйте атрибут ID, чтобы вы могли вносить изменения в конкретный элемент на странице с вашими скриптами.
- Другая обработка: Идентификатор поддерживает обработку ваших веб-документов любым удобным для вас способом. Например, вы можете извлечь HTML-код в базу данных и использовать атрибут ID для идентификации полей.
Правила использования атрибута ID
Убедитесь, что ваши атрибуты идентификатора соответствуют этим трем стандартам:
- Идентификатор должен начинаться с буквы (a-z или A-Z).
- Все последующие символы могут быть буквами, цифрами (0–9), дефисами (-), подчеркиванием (_), двоеточиями (:) и точками (.).
- Каждый идентификатор должен быть уникальным в пределах документа.
Использование атрибута ID
После того, как вы определите уникальный элемент своего веб-сайта, используйте таблицы стилей стилизовать только этот элемент.
Например, чтобы идентифицировать идентификатор с названием контактиспользуйте любую из этих форм:
div # contact {background: # 0cf;}
#contact {background: # 0cf;}
Первый пример нацелен на подразделение с атрибутом ID, равным контакт. Второй по-прежнему нацелен на элемент с идентификатором контакт, это просто не означает, что это разделение. Конечный результат укладки будет точно таким же.
Вы также можете ссылаться на этот конкретный элемент без добавления каких-либо тегов.
Ссылайтесь на этот абзац в своих сценариях с помощью getElementById Метод JavaScript:
document.getElementById ("раздел контактов")
Атрибуты ID по-прежнему очень полезны в HTML, хотя селекторы классов заменили их для большинства общих целей стилизации. Использование атрибута ID в качестве привязки для стилей, а также их использование в качестве якорей для ссылок или целей для скриптов означает, что они по-прежнему занимают важное место в веб-дизайне сегодня.