Что такое атрибут ID в HTML и как он используется?

Согласно W3C, атрибут ID в HTML является уникальным идентификатором элемента. Он позволяет идентифицировать область веб-страницы для стилей CSS, якорных ссылок и целей для сценариев.

Для чего используется атрибут ID?

Атрибут ID может выполнять несколько действий для веб-страниц:

  • Выбор таблицы стилей: Это функция, для которой большинство людей используют атрибут ID. Поскольку они уникальны, вы можете быть уверены, что будете стилизовать только один элемент на своей веб-странице, когда будете создавать стили с использованием свойства ID. Недостатком использования идентификатора в целях стилизации является то, что он имеет очень высокий уровень специфичности, что может сделать его очень сложным, если по какой-то причине вам потребуется переопределить стиль позже в таблице стилей. Из-за этого современные веб-практики склоняются к использованию классов и селекторов классов вместо идентификаторов и селекторов идентификаторов для общих стилей оформления.
  • Именованные якоря для ссылки наВеб-браузеры позволяют указывать точное местоположение в ваших веб-документах, указывая на идентификатор в конце URL-адреса. Вы просто добавляете идентификатор в конец URL-адреса страницы, перед которым стоит знак решетки (#). Вы также можете связать эти якоря с самой страницей, добавив знак решетки (#) и имя идентификатора в атрибуте href для элемента. Например, если у вас есть подразделение с идентификатором контакта, вы можете сделать ссылку на него на этой странице с помощью #contact.
  • Справочник по сценариям: Если вы пишете какие-либо функции Javascript, вы захотите использовать атрибут ID, чтобы вы могли вносить изменения в точный элемент на странице с вашими сценариями.
  • Другая обработка: Идентификатор позволяет вам обрабатывать ваши веб-документы так, как вам нужно. Например, вы можете извлечь HTML в базу данных, а атрибут ID идентифицирует поля.

Правила использования атрибута ID

Есть несколько правил, которым вы должны следовать, чтобы иметь действительный документ, который использует атрибут id в любом месте документа:

  • Идентификатор должен начинаться с буквы (a-z или A-Z)
  • Все последующие символы могут быть буквами, числами (0-9), дефисами (-), символами подчеркивания (_), двоеточиями (:) и точками (.).
  • Каждый идентификатор должен быть уникальным в документе. Почему?

Использование атрибута ID

После того как вы определили уникальный элемент вашего веб-сайта, вы можете использовать таблицы стилей для стилизации только этого одного элемента.

Свяжитесь с нами

Здесь есть текстовое содержание

div # contact-section {background: # 0cf;} 

-или просто-

# contact-section {background: # 0cf;}

Любой из этих двух селекторов будет работать. Первый (div # contact-section) будет предназначен для подразделения с атрибутом ID «contact-section». Второй (# contact-section) по-прежнему будет нацеливать элемент с идентификатором «contact-section», он просто не будет знать, что он ищет это разделение. Конечный результат стиля будет точно таким же.

Вы также можете ссылаться на этот конкретный элемент (# contact-section) без добавления каких-либо тегов.

Ссылайтесь на этот абзац в ваших скриптах с помощью метода JavaScript «getElementById»:

document.getElementById ( «контакт сечение»)

Атрибуты идентификаторов все еще очень полезны в HTML, хотя селекторы классов заменили их для большинства общих стилей. Возможность использовать атрибут ID в качестве ловушки для стилей, а также использовать их в качестве якорей для ссылок или целей для скриптов, означает, что они все еще занимают важное место в веб-дизайне сегодня.

Ссылка на основную публикацию