Зачем добавлять идентификатор в свои теги HTML?

Question

Простой вопрос: почему мы должны добавить id в наши HTML-тэги, если они работают отлично без них? Я знаю, что одним из их применений является возможность навигации по странице через хэштеги (#), но есть ли для них какое-то другое применение?

Answer 1

Они чаще всего используются для уникальной идентификации элементов для стилей (CSS) и сценариев (JavaScript и др.).

Но если вы спрашиваете о HTML и только HTML, то одним примером, где полезны декларативные идентификаторы, является <label> с этими <input>, <button> или же <textarea> управление через его for атрибут:

<label for="ex">Example field:</label>
<input type="text" name="ex" id="ex">

Без назначения этого атрибута активация метки ничего не делает, но когда вы соединяете оба элемента вместе, используя for а также idактивация метки приводит к тому, что ее элемент управления получает фокус.

Другой способ связать метку формы с ее элементом управления - поместить ее в метку:

<label>
Example field:
<input type="text" name="ex">
</label>

Но это не всегда соответствует структуре формы или страницы, поэтому в качестве альтернативы предлагается ссылка на идентификатор.

Другие обстоятельства, когда id Атрибут выполняет функцию, подробно освещенную в ответе Алохчи.

Answer 2

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

• В качестве цели для идентификатора фрагмента в URL.
• В качестве цели на элементах управления формы для for атрибут на <label> а также <output> элементы.
• Как цель на <form> элементы для form атрибут на форме связанных элементов.
• В качестве цели для ссылки на элемент через микроданные itemref приписывать.
• В качестве цели для ссылок на элементы через некоторые атрибуты ARIA, включая aria-describedby, aria-labelledby и 4 других.
• Как цель на <th> элементы для headers атрибут на <td> а также <th> элементы.
• Как цель на <menu> элементы для contextmenu приписывать.
• Как цель на <datalist> элементы для list атрибут на <input> элементы.
• Как часть ссылки на хэш-имя <map> элементы для usemap атрибут на <img> а также <object> элементы.
• Как идентификатор элемента в селекторе CSS
• Как идентификатор элемента для обработки JavaScript

Answer 3

Идентификаторы используются для доступа к вашим элементам в CSS и JavaScript. Строго говоря, идентификаторы должны однозначно идентифицировать элемент. Вы также можете использовать атрибуты класса для определения групп элементов.

Атрибут id предоставляет уникальный идентификатор для элемента в документе. Он может использоваться элементом для создания гиперссылки на этот конкретный элемент.

Этот идентификатор может также использоваться в коде CSS в качестве ловушки, которую можно использовать в целях стилизации, или с помощью кода JavaScript (через объектную модель документа или DOM) для внесения изменений или добавления поведения в элемент путем ссылки на его уникальный идентификатор.

см. http://reference.sitepoint.com/html/core-attributes/id

Для получения дополнительной информации о классе см. здесь: http://reference.sitepoint.com/html/core-attributes/class

Answer 4

AFAIK, они используются для уникальной ссылки на тег. И облегчает вам обращение к тегу.

Answer 5

Я тоже предпочитаю class для стилизации с помощью CSS, но иногда вам нужен элемент, чтобы быть уникальным. По причинам доступности вы используете id для ввода элементов, чтобы "подключить" его label к нему с помощью for приписывать. А для Javascript гораздо проще выбрать элемент, если он получил id приписывать.

Answer 6

Вы можете использовать идентификаторы, чтобы получить доступ к вашим элементам div из javascript, CSS и jquery. Если вы не используете идентификаторы, вам будет очень трудно взаимодействовать со своей HTML-страницей из JS.

Answer 7

Он предназначен для того, чтобы помочь вам идентифицировать ваш элемент в коде java-скрипта. Функция getElementByID в java-скрипте дает дескриптор элемента с определенным идентификатором для вас.

var someElement = document.getelementById("someID");
// do whatever with someElement;

Answer 8

Основная причина, по которой я использую идентификаторы для своих элементов HTML, заключается в том, что их выбор происходит быстрее, в Javascript с getElementById и в CSS, используя #id учебный класс.

Конечно, я не говорю, что это всегда хорошая идея, особенно в CSS, где наличие классов, основанных на идентификаторах, может вызвать большую избыточность, это только одна из причин

Answer 9

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

1. Справочник по сценариям, Выбор элементов для применения сценариев,
2. Выбор таблицы стилей, выбор элементов для стиля
3. Именованные якоря для ссылок, которые вы называете навигацией по страницам.

Просто потому, что в большинстве случаев вы захотите что-то сделать с вашим контентом в любом теге, хорошо поставить идентификатор, то есть атрибут id.