PassFront
  1. PassFront
  2. База знаний
  3. Продвинутые темы

В каком случае нужно прописывать id для элемента?

Продвинутые темы

`id` элементу прописывают, когда нужен уникальный идентификатор: для связи `label`/`for`, якорных ссылок, доступа из JS, ARIA-связей и уникальных фрагментных ссылок.

Когда нужен id

Связь label и поля ввода

<label for="email">Email</label>
<input id="email" type="email">

Клик по label фокусирует поле — важно для доступности.

Якорные ссылки (навигация по странице)

<a href="#section2">К разделу</a>
<section id="section2">...</section>

ARIA-связи

<input aria-describedby="hint">
<span id="hint">Подсказка</span>

aria-labelledby, aria-describedby ссылаются на id.

Доступ из JS (иногда)

document.getElementById('app');

Хотя чаще используют классы/data-*/refs.

Когда id НЕ нужен

  • Для стилизации — используют классы (id повышает специфичность, что усложняет CSS).
  • Для повторяющихся элементов — id должен быть уникальным на странице, поэтому не подходит для списков (там классы/data-*).
  • В React — обычно refs вместо getElementById.

Нюансы

id должен быть уникальным в пределах документа. Дубли ломают связи и валидность.

Коротко для собеседования

id прописывают для уникальной идентификации: связь label for/input id, якорные ссылки (href="#id"), ARIA-связи (aria-describedby), иногда доступ из JS. Не для стилизации (классы) и не для повторяющихся элементов (id уникален). Должен быть уникален на странице.

Другие вопросы раздела