Уникальность id в HTML

Question

Вопрос на странице может быть только один такой id вообще или один id именно у этого тега. Корректно ли делать?

<div id="1">
    <p id="1"></p>
</div>

Один на странице. Цитата: "В коде документа каждый идентификатор уникален и должен быть включён лишь один раз." http://htmlbook.ru/samcss/identifikatory-i-klassy — Алексей Шиманский, Jul 28 '17 at 07:18
и цифрой быть он не может. начинаться должен с латинского символа — Alexander Igorevich, Jul 28 '17 at 07:20
@AlexanderIgorevich, уже может, начиная с html5 — Grundy, Jul 28 '17 at 07:23
@АлексейШиманский, я 100% отвечал уже на подобный вопрос про уникальность, но найти не могу :( — Grundy, Jul 28 '17 at 07:23
@Grundy тебе надо вести табель учёта ;-) — Алексей Шиманский, Jul 28 '17 at 07:24
@АлексейШиманский, да тут поиск плохо работает прост! — Grundy, Jul 28 '17 at 07:25
@АлексейШиманский / Grundy Ничёсе.. Ок. Будем знать ) хотя: тык — Alexander Igorevich, Jul 28 '17 at 07:27
@AlexanderIgorevich ага. будем знать https://jsfiddle.net/03f24wv2/ — Алексей Шиманский, Jul 28 '17 at 07:27
@AlexanderIgorevich, это потому что ты неправильно используешь. Ну и немножко спецификации — Grundy, Jul 28 '17 at 07:30

Drag13 · Accepted Answer · 2017-07-28T07:48:14.653

10

Количество одинаковых id может быть любым. Страница от этого не свалится с ошибками, а операционная система не покажет синее окно смерти.

Но почему так делать не стоит:

Семантика. Id подразумевает свою уникальность. Когда вы пишете span id="mySpan" вы обещаете всем, кто читает вашу страницу, что больше таких id не будет.
Выборка. getElementById, $('#selector') вернет вам первый встреченный элемент и проигнорирует все остальные. Т.е. если у вас их несколько на странице, шанс случайно ошибки значительно возрастает.
Применение стилей. В случае с несколькими одинаковыми id применение стилей будет не однозначно. Кто-то применит их ко всем id, кто-то к первому, кто-то к последнему. Кстати, поведение в п. 2 тоже не гарантировано.
HTML валидаторы. В некоторых командах используются HTML валидаторы. Они просто не пропустят ваш код.

edited Jul 28 '17 at 07:48

answered Jul 28 '17 at 07:25

Drag13

896

1

в пункт про выборку стоит добавить про применение стилей – Grundy Jul 28 '17 at 07:27
Спасибо. Только вопрос: если у меня id в переменной, то как использовать выбор по селектору? var sel = 'selector'; как теперь сделать $('#sel') ? – fosh4455 Jul 28 '17 at 07:32
1

@fosh4455 $(sel). но это уже никак не относится к тому вопросу, что ты задал. Если интересен другой вопрос - задай еще один) – Алексей Шиманский Jul 28 '17 at 07:35
@fosh4455, например так – Grundy Jul 28 '17 at 07:36
@Алексей Шиманский вы тут модератор? – fosh4455 Jul 28 '17 at 07:36
@fosh4455 правила таковы, что если возникают какие-то новые вопросы по новой проблеме/теме/ - вы их задаете. Комментарии предназначены для уточнений по текущему вопросу/ответу. Если вы не готовы принимать правила ресурса - то вам стоит поискать другой, подходящий под ваши желания – Алексей Шиманский Jul 28 '17 at 07:42
@Grundy а вот тут уже я не в курсе похоже. Стили тоже применятся к первому элементу? – Drag13 Jul 28 '17 at 07:44
@Vitalii, на самом деле - это не тривиальный вопрос :-) все на усмотрение браузера и то как он будет разбирать дерево – Grundy Jul 28 '17 at 07:45
@Grundy Т.е. мы имеем неопределенное поведение для стилей. Ясно, спасибо. – Drag13 Jul 28 '17 at 07:46
@Vitalii. я бы сказал, что к одному элементу стили точно применятся, но к какому мы не можем гарантировать – Grundy Jul 28 '17 at 07:47
Исправил и спасибо за уточнение. – Drag13 Jul 28 '17 at 07:48
@Vitalii стиль применяется ко всех элементам с одинаковым ID. :) – Stanislav Hmelevsky Jul 28 '17 at 07:56
Я тоже так думал но вот тут @Grundy говорит что это не гарантировано. И я действительно нигде не видел обещание такого поведения. – Drag13 Jul 28 '17 at 08:00
@Grundy https://jsfiddle.net/h791qpLf/1/ - объясните пожалуйста) – Алексей Шиманский Jul 28 '17 at 08:05
@Алексей Шиманский я не Grundy но речь идет о том, что это не гарантированное поведение. Т.е. если у нас есть div то мы знаем, что он займет всю ширину родителя и так должны вести себя все браузеры, так как это стандарт. В случае с перекрывающимися id браузеры вольны вести себя так как хотят и мы можем только надеться что они поведут себя так и будут вести так и дальше. – Drag13 Jul 28 '17 at 08:09
@АлексейШиманский, забавно, в спецификации описан только случай когда у одного элемента несколько id. В остальном указано ID typed attribute can be used to uniquely identify its element. Так что, результат вполне может быть своеволием браузеров :) – Grundy Jul 28 '17 at 08:13
@Grundy всех сжечь!) – Алексей Шиманский Jul 28 '17 at 08:18

score 6 · Answer 2 · answered Jul 28 '17 at 07:25

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

Пример:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Атрибут id</title>
 </head> 
 <body> 
  <div id="help">
   <p>За помощью можно обратится в stackoverflow.</p>
  </div>
 </body> 
</html>

В ваших правках есть однотипная ошибка: вы, как и многие новички считаете, что много форматирования -- это хорошо. Почитайте эту тему на мете про форматирование http://meta.ru.stackoverflow.com/questions/1328/ особенно про внутристрочное форматирование — A K, Aug 05 '17 at 08:02

Уникальность id в HTML

2 Answers2