Является ли пустой идентификатор или пустой идентификатор хорошей практикой HTML?Условное добавление идентификатора в элемент HTML - PullRequest
0 голосов
/ 29 мая 2019

Моя цель - условно добавить идентификатор в элемент HTML.В JSX у меня есть загадка условного добавления идентификатора к элементу html следующим образом:

<SomeHTMLElement id={condition ? "someId" : ""} />

или

<SomeHTMLElement id={condition ? "someId" : null} />

Какой метод лучше использовать HTML?По умолчанию null или ""?

Если есть другой способ условно добавить идентификатор к элементу HTML, даже не вводя атрибут id в сам элемент, это также было бы здорово.например, <HTMLElement id /> или <HTMLElement id="" /> или <HTMLElement id={null} /> было бы лучше, чтобы там не было пустого атрибута id, поэтому он будет скомпилирован в <HTMLElement />

1 Ответ

1 голос
/ 02 июня 2019

Пустые атрибуты ID - плохая практика, потому что они являются недопустимым HTML. Если вам не нужен атрибут ID в DOM, не выводите его вообще.

Следующий документ HTML содержит атрибут id без значения и атрибут id="" с явной пустой строкой.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Empty ID validation test</title>
    <meta charset="utf-8">
  </head>
  <body>
    <h1>Empty ID validation test</h1>

    <p id>This paragraph has an id attribute without a value.</p>
    <p id="">This paragraph has an id attribute explicitly set to an empty string.</p>

  </body>
</html>

Валидатор W3C выдает две разные ошибки по этому поводу.

  1. "Неверное значение для attibute id для элемента p: идентификатор не должен быть пустой строкой." Валидатор выдает эту ошибку для обоих атрибутов id в этом примере.
  2. «Дубликат ID». Идентификаторы должны быть уникальными, но валидатор видит, что id и id="" имеют одинаковое значение.

Обратите внимание, что повторяющиеся идентификаторы также явный сбой WCAG на уровне A (см. F77: сбой критерия успеха 4.1.1 из-за повторяющихся значений идентификатора типа ), хотя на практике это не наносит вред доступности, если IDREF не используется в другом месте .

В JSX я считаю, что установка атрибута в значение null (например, <HTMLElement id={null} />) - это простой способ предотвратить его появление в DOM. Заметьте, я говорю о реальном DOM, а не о виртуальном DOM.

...