Какие допустимые значения для атрибута id в HTML?

Question

При создании id атрибуты для элементов HTML, какие правила существуют для значения?

Answer 1

Для HTML 4 ответ технически:

Токены ID и NAME должны начинаться с буквы ([A-Za-z]) и могут сопровождаться любым количеством букв, цифр ([0-9]), дефисов ("-"), подчеркиваний ("_"), двоеточия (":") и точки (".").

HTML 5 является еще более допустимым, говоря только о том, что идентификатор должен содержать хотя бы один символ и не может содержать пробелов.

Атрибут id чувствителен к регистру в XHTML.

В качестве чисто практического вопроса вы можете избегать определенных персонажей. Точки, двоеточия и '#' имеют особое значение в селекторах CSS, поэтому вам придется экранировать эти символы, используя обратную косую черту в CSS или двойную обратную косую черту в строке селектора, передаваемой в jQuery. Подумайте о том, как часто вам придется избегать символа в ваших таблицах стилей или коде, прежде чем сходить с ума от точек и двоеточий в идентификаторах.

Например, объявление HTML <div id="first.name"></div> является действительным. Вы можете выбрать этот элемент в CSS как #first\.name а в jQuery вот так: $('#first\\.name'). Но если вы забудете обратную косую черту, $('#first.name'), у вас будет совершенно правильный селектор, ищущий элемент с идентификатором first а также с классом name, Это ошибка, которую легко не заметить. Вы можете быть счастливее в конечном итоге, выбирая идентификатор first-name (дефис, а не точка).

Вы можете упростить свои задачи разработки, строго придерживаясь соглашения об именах. Например, если вы полностью ограничиваетесь символами нижнего регистра и всегда разделяете слова либо дефисами, либо подчеркиванием (но не обоими, выбираете одно и никогда не используете другое), тогда у вас есть легко запоминающийся шаблон. Вы никогда не будете удивляться "было ли это firstName или же FirstName?", потому что вы всегда будете знать, что вы должны напечатать first_name, Предпочитаете случай верблюда? Затем ограничьте себя этим, без дефисов и подчеркиваний, и всегда, последовательно используйте прописные или строчные буквы для первого символа, не смешивайте их.

---

Теперь очень непонятная проблема заключалась в том, что по крайней мере один браузер, Netscape 6, неправильно обрабатывал значения атрибута id как регистрозависимые. Это означало, что если вы набрали id="firstName" в вашем HTML (в нижнем регистре 'F') и #FirstName { color: red } в вашем CSS (в верхнем регистре 'F') этот глючный браузер не смог бы установить цвет элемента на красный. Во время этой редакции, в апреле 2015 года, я надеюсь, что вас не просят поддержать Netscape 6. Считайте, что это историческая сноска.

Answer 2

From the HTML 4 specification:

Токены ID и NAME должны начинаться с буквы ([A-Za-z]) и могут сопровождаться любым количеством букв, цифр ([0-9]), дефисов ("-"), подчеркиваний ("_"), двоеточия (":") и точки (".").

A common mistake is to use an ID that starts with a digit.

Answer 3

Технически вы можете использовать двоеточия и точки в атрибутах id/name, но я настоятельно рекомендую избегать обоих.

В CSS (и некоторых библиотеках JavaScript, таких как jQuery) и точка, и двоеточие имеют особое значение, и вы столкнетесь с проблемами, если не будете осторожны. Периоды - это селекторы классов, а двоеточия - псевдоселекторы (например, ":hover" для элемента, когда мышь находится над ним).

Если вы дадите элементу идентификатор "my.cool:thing", ваш селектор CSS будет выглядеть так:

#my.cool:thing { ... /* some rules */ ... }

Что действительно говорит: "элемент с идентификатором" my ", класс" cool "и" вещь "псевдо-селектор" в CSS-говорить.

Придерживайтесь AZ любого регистра, цифр, подчеркиваний и дефисов. И, как сказано выше, убедитесь, что ваши идентификаторы уникальны.

Это должно быть вашей первой заботой.

Answer 4

HTML5: допустимые значения для идентификаторов и атрибутов классов

Начиная с HTML5, единственные ограничения на значение идентификатора:

1. должен быть уникальным в документе
2. не должно содержать пробелов
3. должен содержать хотя бы один символ

Аналогичные правила применяются к классам (за исключением уникальности, конечно).

Таким образом, значением могут быть все цифры, только одна цифра, только знаки препинания, включая специальные символы, что угодно. Просто без пробелов. Это очень отличается от HTML4.

В HTML 4 значения идентификаторов должны начинаться с буквы, за которой могут следовать только буквы, цифры, дефисы, подчеркивания, двоеточия и точки.

В HTML5 они действительны:

<div id="999"> ... </div>
<div id="#%LV-||"> ... </div>
<div id="____V"> ... </div>
<div id="⌘⌥"> ... </div>
<div id="♥"> ... </div>
<div id="{}"> ... </div>
<div id="©"> ... </div>
<div id="♤₩¤☆€~¥"> ... </div>

Просто помните, что использование цифр, знаков препинания или специальных символов в значении идентификатора может вызвать проблемы в других контекстах (например, CSS, JavaScript, регулярное выражение).

Например, следующий идентификатор действителен в HTML5:

<div id="9lions"> ... </div>

Тем не менее, это недопустимо в CSS:

Из спецификации CSS2.1:

4.1.3 Персонажи и регистр

В CSS идентификаторы (включая имена элементов, классы и идентификаторы в селекторах) могут содержать только символы [a-zA-Z0-9] и символы ISO 10646 U+00A0 и выше, плюс дефис (-) и подчеркивание (_); они не могут начинаться с цифры, двух дефисов или дефиса, за которым следует цифра.

В большинстве случаев вы можете избежать символов в контекстах, где у них есть ограничения или особое значение.

---

W3C Ссылки

HTML5

3.2.5.1 id атрибут

id Атрибут задает уникальный идентификатор своего элемента (ID).

Значение должно быть уникальным среди всех идентификаторов в домашнем поддереве элемента и должно содержать хотя бы один символ. Значение не должно содержать пробелов.

Примечание: нет никаких других ограничений на то, какую форму может принимать ID; в частности, идентификаторы могут состоять только из цифр, начинаться с цифры, начинаться с подчеркивания, состоять только из знаков препинания и т. д.

3.2.5.7 class атрибут

Атрибут, если указан, должен иметь значение, представляющее собой набор разделенных пробелами токенов, представляющих различные классы, к которым принадлежит элемент.

Классы, назначенные ему элементом HTML, состоят из всех классов, возвращаемых, когда значение атрибута class разбивается на пробелы. (Дубликаты игнорируются.)

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

Answer 5

JQuery обрабатывает любое допустимое имя ID. Вам просто нужно экранировать метасимволы (то есть точки, точки с запятой, квадратные скобки...). Это все равно что сказать, что JavaScript имеет проблему с кавычками только потому, что вы не можете написать

var name = 'O'Hara';

Селекторы в jQuery API (см. Примечание внизу)

Answer 6

Строго должно соответствовать

[A-Za-z][-A-Za-z0-9_:.]*

Но у jquery есть проблемы с двоеточиями, поэтому лучше их избегать.

Answer 7

HTML5:

избавиться от дополнительных ограничений на атрибут id смотрите здесь. Единственные оставшиеся требования (кроме уникальности в документе):

1. значение должно содержать хотя бы один символ (не может быть пустым)
2. он не может содержать пробелов.

---

PRE-HTML5:

Идентификатор должен совпадать:

[A-Za-z][-A-Za-z0-9_:.]*

1. Должен начинаться с символов AZ или az
2. Может содержать - (дефис), _ (нижнее подчеркивание), : (двоеточие) и . (Период)

но следует избегать : а также . обусловлено:

Например, идентификатор может быть помечен как "ab: c" и обозначен в таблице стилей как #ab: c, но помимо идентификатора элемента это может означать id "a", класс "b", псевдо- селектор "с". Лучше всего избегать путаницы и держаться подальше от использования. и: в целом.

Answer 8

Дефисы, подчеркивания, точки, двоеточия, цифры и буквы действительны для использования с CSS и JQuery. Следующее должно работать, но оно должно быть уникальным по всей странице, а также должно начинаться с буквы [A-Za-z].

Работа с двоеточиями и точками требует немного больше работы, но вы можете сделать это, как показано в следующем примере.

<html>
<head>
<title>Cake</title>
<style type="text/css">
    #i\.Really\.Like\.Cake {
        color: green;
    }
    #i\:Really\:Like\:Cake {
        color: blue;
    }
</style>
</head>
<body>
    <div id="i.Really.Like.Cake">Cake</div>
    <div id="testResultPeriod"></div>

    <div id="i:Really:Like:Cake">Cake</div>
    <div id="testResultColon"></div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(function() {
            var testPeriod = $("#i\\.Really\\.Like\\.Cake");
            $("#testResultPeriod").html("found " + testPeriod.length + " result.");

            var testColon = $("#i\\:Really\\:Like\\:Cake");
            $("#testResultColon").html("found " + testColon.length + " result.");
        });
    </script>
</body>
</html>

Answer 9

На практике многие сайты используют id атрибуты, начинающиеся с цифр, хотя это технически недопустимый HTML.

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

Answer 10

HTML5

Помня, что ID должен быть уникальным, т.е. в документе не должно быть нескольких элементов с одинаковым значением идентификатора.

Правила в отношении идентификатора контента в HTML5 (помимо уникальности):

This attribute's value must not contain white spaces. [...] 
Though this restriction has been lifted in HTML 5, 
an ID should start with a letter for compatibility.

Это спецификация W3 об ID (от MDN):

Any string, with the following restrictions:
must be at least one character long
must not contain any space characters
Previous versions of HTML placed greater restrictions on the content of ID values 
(for example, they did not permit ID values to begin with a number).

Больше информации:

• W3 - глобальные атрибуты (id)
• Атрибут MDN (id)

Answer 11

Для ссылки на идентификатор с точкой в ​​нем необходимо использовать обратную косую черту. Не уверен, если это то же самое для дефисов или подчеркивания. Например: HTML

<div id="maintenance.instrumentNumber">############0218</div>

CSS

#maintenance\.instrumentNumber{word-wrap:break-word;}

Answer 12

Из спецификации HTML 4...

Токены ID и NAME должны начинаться с буквы ([A-Za-z]) и могут сопровождаться любым количеством букв, цифр ([0-9]), дефисов ("-"), подчеркиваний ("_"), двоеточия (":") и точки (".").

РЕДАКТИРОВАТЬ: D'Oh! Опять на кнопку!

Answer 13

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

У вас может быть много идентификаторов, но все они должны иметь уникальное значение.

С другой стороны, есть класс-элемент. Как и ID, он может появляться много раз, но значение может использоваться снова и снова.

Answer 14

Уникальный идентификатор элемента.

В документе не должно быть нескольких элементов с одинаковым значением идентификатора.

Любая строка со следующими ограничениями:

1. должен быть длиной не менее одного символа

2. не должно содержать пробелов:

   • U + 0020 SPACE
   • U + 0009 ТАБЛИЦА ХАРАКТЕРОВ (вкладка)
   • U + 000A LINE FEED (LF)
   • U + 000C ФОРМА ПИТАНИЯ (FF)
   • U + 000D ВОЗВРАТ ПЕРЕВОЗКИ (CR)

Использование символов кроме ASCII letters and digits, '_', '-' and '.' может вызвать проблемы совместимости, так как они не были разрешены в HTML 4, Хотя это ограничение было снято в HTML 5Идентификатор должен начинаться с буквы для совместимости.

Answer 15

Похоже, что хотя двоеточия (:) и точки (.) Действительны в спецификации HTML, они недопустимы в качестве селекторов идентификаторов в CSS, поэтому их лучше избегать, если вы собираетесь использовать их для этой цели.

Answer 16

Любые буквенно-цифровые значения, а также "-" и "_" действительны. Но вы должны начать имя идентификатора с любого символа между AZ или az.

Answer 17

За HTML5

Значение должно быть уникальным среди всех идентификаторов в домашнем поддереве элемента и должно содержать хотя бы один символ. Значение не должно содержать пробелов.

Хотя бы один символ, без пробелов.

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

Answer 18

Начиная с ES2015, мы также можем использовать почти все символы Unicode для идентификаторов, если кодировка документа установлена ​​на UTF8.

Протестируйте здесь: https://mothereff.in/js-variables

Читайте о: https://mathiasbynens.be/notes/javascript-identifiers-es6

В ES2015 идентификаторы должны начинаться с $, _ или любого символа с производным от Unicode основным свойством ID_Start.

Остальная часть идентификатора может содержать $, _, U+200C, не соединяющий нулевую ширину, U+200D, соединяющий нулевую ширину, или любой символ с производным от Unicode основным свойством ID_Continue.

const target = document.querySelector("div").id
console.log(
   target
)
document.getElementById(target).style.backgroundColor = "black"

div {
  border: 1px black solid;
  width: 100%;
  height: 200px
}

<div id="H̹̙̦̮͉̩̗̗ͧ̇̏̊̾Eͨ͆͒̆ͮ̃͏̷̮̣̫̤̣Cͯ̂͐͏̨̛͔̦̟͈̻O̜͎͍͙͚̬̝̣̽ͮ͐͗̀ͤ̍̀͢M̴̡̲̭͍͇̼̟̯̦̉̒͠Ḛ̛̙̞̪̗ͥͤͩ̾͑̔͐ͅṮ̴̷̷̗̼͍̿̿̓̽͐H̙̙̔̄͜">

---

Стоит ли его использовать? Наверное, не лучшая идея!

Читайте о: /questions/34044502/javascript-sintaksicheskaya-oshibka-otsutstvuet-posle-tela-funktsii/34044536#34044536

Answer 19

1. Идентификаторы лучше всего подходят для именования частей вашего макета, поэтому они не должны давать одинаковые имена для идентификатора и класса.
2. ID позволяет буквенно-цифровые и специальные символы
3. но избегайте использования # : . * ! символы
4. недопустимые пробелы
5. не начинается с цифр или дефиса, за которыми следует цифра
6. с учетом регистра
7. использование селекторов идентификаторов быстрее, чем использование селекторов классов
8. используйте дефис "-" (подчеркивание "_" также можно использовать, но не подходит для seo) для длинных имен классов CSS или правил Id
9. Если правило имеет селектор идентификатора в качестве ключевого селектора, не добавляйте имя тега к правилу. Поскольку идентификаторы уникальны, добавление имени тега замедлит процесс сопоставления без необходимости.
10. В HTML5 атрибут id можно использовать с любым элементом HTML, а в HTML 4.01 атрибут id нельзя использовать с: <base>, <head>, <html>, <meta>, <param>, <script>, <style>, and <title>.

Answer 20

Без пробелов, должно начинаться как минимум с символа от a до z и от 0 до 9.

Answer 21

В HTML

Идентификатор должен начинаться с {AZ} или {az}, вы можете добавить цифры, точку, дефис, подчеркивание, двоеточие.

Например:

<span id="testID2"></span>
<span id="test-ID2"></span>
<span id="test_ID2"></span>
<span id="test:ID2"></span>
<span id="test.ID2"></span>

Но даже несмотря на то, что вы можете создать идентификатор с помощью двоеточия (:) или точки (.), CSS сложно использовать этот идентификатор в качестве селектора. В основном, когда вы хотите использовать псевдоэлементы (: до,: после).

Также в JS сложно выбрать эти ID. Таким образом, вы должны использовать первые четыре идентификатора. Как предпочитают многие разработчики, и, если это необходимо, вы также можете использовать последние два.

Answer 22

Значения могут быть: [az],[AZ],[0-9],[* _: -]

он используется для HTML5 ...

мы можем добавить id с любым тегом.

Answer 23

Помогите, мой Javascript сломан!

Все говорят, что идентификаторы не могут быть дублированы.

Лучше всего пробовать во всех браузерах, кроме FireFox.

Answer 24

Существует несколько правил создания атрибутов id для элементов HTML.

1. Атрибут id должен быть уникальным. (Никакие два элемента не должны иметь одинаковое значение идентификатора).
   Пример: –

   <h1 id="one">Heading One</h1>
<h1 id="two">Heading Two</h1>

2. Атрибут id должен начинаться с **буквы, подчеркивания (_) или дефиса (-).
   Пример: -

   <li id="one">One</li>
<li id="_two">Two</li>
<li id="-three">Three</li>

3. Атрибут id не может содержать пробелы или другие специальные символы .
   Пример:-

   <li id="one@one">One</li>
<li id="two%two">Two</li>
<li id="three#three">Three</li>
<li id="four&four">Three</li>
<li id="five five">Three</li>

4. Атрибут id должен иметь смысл и не должен быть слишком длинным или слишком коротким.

5. Хорошей практикой является использование строчных букв в значениях атрибута id .

Answer 25

1. Работают прописные и строчные буквы
2. '_' и '-' тоже работают
3. Числа работает
4. Двоеточие (,) и точка (.), Кажется, работают
5. Интересно, что смайлы работают

Answer 26

Идентификатор HTML

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

Других ограничений на то, какую форму может принимать идентификатор, нет; в частности, идентификаторы могут состоять только из цифр, начинаться с цифры, начинаться с подчеркивания, состоять только из знаков препинания и т. д.

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

Answer 27

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

Все a, b, c... x, y, z, A, B, C... X, Y, Z, 0,1,2... 7,8,9, -, _ можно использовать для id, но вы не должны использовать цифру и - в качестве первого символа.

это неправильно:

1adfsvsdf   // use number in first
-adfasdf    // use - in first
afd'ksdf    // use ' in characters
asdf;asdf   // use ; in characters

Answer 28

Алфавиты -> колпачки и маленькие
цифры-> 0-9
специальные символы-> ':', '-', '_', '.'

формат должен начинаться с '.' или алфавит, за которым следуют либо специальные символы из большего числа алфавитов или цифр. значение поля id не должно заканчиваться на "_".
Кроме того, пробелы не допускаются, если они предусмотрены, они обрабатываются как разные значения, что недопустимо в случае атрибутов id.

Answer 29

В HTML5 идентификатор не может начинаться с цифры, например"1kid" и они не могут иметь пробелы (id ="Some kind")