Які дійсні значення для атрибута id у HTML?

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

Для 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'), у вас буде ідеально правильний селектор, який шукає елемент з id, firstа також має клас name. Це помилка, яку легко не помітити. first-nameНатомість ви можете бути щасливішими, вибравши ідентифікатор (дефіс, а не період).

Ви можете спростити свої завдання з розробки, суворо дотримуючись конвенції про іменування. Наприклад, якщо ви повністю обмежуєтесь малими символами і завжди розділяєте слова або дефісами, або підкресленнями (але не обома, виберіть одне і ніколи не використовуйте інше), то у вас є легкий для запам'ятовування шаблон. Ви ніколи не замислюєтеся "це було firstNameчи FirstName?" тому що ви завжди будете знати, що вам слід набрати first_name. Віддаєте перевагу верблюдовому футляру? Тоді обмежтеся цим: жодні дефіси чи підкреслення, і завжди, послідовно використовуйте ні великі, ні великі регістри для першого символу, не змішуйте їх.

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

З специфікації HTML 4 :

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

Поширена помилка - використовувати ідентифікатор, який починається з цифри.

Ви можете технічно використовувати двокрапки та періоди в атрибутах id / name, але я настійно пропоную уникати обох.

У CSS (і декількох бібліотеках JavaScript, таких як jQuery), і період, і двокрапка мають особливе значення, і у вас виникнуть проблеми, якщо ви не будете обережні. Періоди є селекторами класів, а колонки - псевдоселекторами (наприклад, ": навести курсор" для елемента, коли миша над ним).

Якщо ви даєте елементу ідентифікатор "my.cool:thing", ваш вибір CSS виглядатиме так:

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

Що насправді говорить: "елемент з ідентифікатором" мій ", клас" круто "і" псевдоселектор "в річчі CSS.

Дотримуйтесь AZ будь-якого випадку, цифр, підкреслення та дефісів. І як сказано вище, переконайтеся, що ваші ідентифікатори унікальні.

Це має бути вашим першим питанням.

JQuery робить обробляти будь-яке припустиме ім'я ідентифікатора. Вам просто потрібно уникнути метахарактерів (тобто крапки, крапки з комою, квадратні дужки ...). Це як би сказати, що у JavaScript є проблема з цитатами лише тому, що ви не можете писати

var name = 'O'Hara';

Селектори в API jQuery (див. Нижню примітку)

Суворо воно повинно відповідати

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

Але у jquery, здається, є проблеми з колонами, тому, можливо, краще їх уникнути.

HTML5:

позбавляється від додаткових обмежень на атрибут id див. тут . Залишилися єдині вимоги (крім унікальних у документі):

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

PRE-HTML5:

Ідентифікатор повинен відповідати:

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

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

але слід уникати :і тому .:

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

HTML5: Дозволені значення для атрибутів ID та класу

Щодо 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).

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

Примітка. Немає інших обмежень щодо форми форми ідентифікатора; зокрема, ідентифікатори можуть складатися з просто цифр, починати з цифри, починати з підкреслення, складатися з просто розділових знаків тощо.

3.2.5.7 class Атрибут

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

Класи, які присвоїв йому елемент HTML, складаються з усіх класів, повернених, коли значення атрибута класу розділено на пробіли. (Дублікати ігноруються.)

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

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

Специфікація проекту HTML 5 розширює правила для атрибутів idі nameатрибутів: вони тепер є просто непрозорими рядками, які не можуть містити пробілів.

Дефіси, підкреслення, крапки, колонки, цифри та літери є дійсними для використання з 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>

HTML5

Маючи на увазі, що ID повинен бути унікальним, тобто. у документі не повинно бути декількох елементів, які мають однакове значення 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 щодо ідентифікатора (від 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 atribute (id)

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

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

CSS

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

З специфікації HTML 4 ...

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

РЕДАКТУЙТЕ: d'oh! Знову прибитий до ґудзика!

Також ніколи не забувайте, що посвідчення особи унікальне. Після використання значення ідентифікатора може знову не з’являтися ніде в документі.

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

З іншого боку, є клас-елемент. Як ідентифікатор, він може з’являтися багато разів, але значення може використовуватися знову і знову.

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

У документі не повинно бути декількох елементів, які мають однакове значення id.

Будь-який рядок із наступними обмеженнями:

1. має бути принаймні одним символом

2. не повинен містити символів пробілу:

   • U + 0020 ПРОСТІР
   • U + 0009 ХАРАКТЕРНА ТАБЛЮЦІЯ (вкладка)
   • U + 000A ЛІНЕВАННЯ (LF)
   • U + 000C ФОРМУВАННЯ (FF)
   • Повернення перевезення вантажів U + 000D (CR)

Використання символів, окрім випадків, ASCII letters and digits, '_', '-' and '.'може спричинити проблеми сумісності, оскільки їх не було дозволено HTML 4. Хоча це обмеження було знято HTML 5, ідентифікатор повинен починатись із листа про сумісність.

Здається, хоча колонки (:) та періоди (.) Дійсні в специфікації HTML, вони недійсні як селектори ID в CSS, тому, напевно, найкраще уникати, якщо ви збираєтесь використовувати їх для цієї мети.

для HTML5

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

Принаймні один символ, пробілів немає.

Це відкриває двері для дійсних випадків використання, таких як використання наголошених символів. Це також дає нам багато більше боєприпасів, щоб стріляти собі в ногу, оскільки тепер ви можете використовувати значення id, які спричинять проблеми як з CSS, так і з JavaScript, якщо ви не дуже обережні.

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>.

Будь - яке альфа-числове значення та " - " та " _ " є дійсним. Але вам слід почати ім'я id з будь-якого символу між AZ або az .

Жодних пробілів не повинно починатися із знака від a до z та 0 до 9.

В 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>

Але навіть якщо ви можете зробити ідентифікатор за допомогою Colons (:) або period (.), CSS важко використовувати ці ідентифікатори як Selector. В основному, коли ви хочете використовувати псевдоелементи (: раніше,: після).

Також у JS важко вибрати ці ідентифікатори. Таким чином, ви повинні використовувати перші чотири ідентифікатори, як вважають за краще багато розробників навколо, і якщо це необхідно, ніж ви можете також використовувати останні два.

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

це використання для HTML5 ...

ми можемо додати ідентифікатор з будь-яким тегом.

Починаючи з ES2015, ми також можемо використовувати -значно всі символи unicode для ідентифікаційних номерів , якщо для діапазону документів встановлено значення UTF8.

Перевірте тут: https://mothereff.in/js-variables

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

У ES2015 ідентифікатори повинні починатись з $, _ або будь-якого символу з основним властивістю Unicode ID_Start.

Інша частина ідентифікатора може містити $, _, U + 200C нульову ширину, не приєднується, приєднувач нульової ширини U + 200D або будь-який символ із базовим властивістю 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̙̙̔̄͜">

Чи варто використовувати його? Напевно, не гарна ідея!

Читайте про: https://stackoverflow.com/a/52799593/2494754

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

формат повинен бути або починати з '.' або алфавіту, за яким слід будь-який із спеціальних символів більшої кількості алфавітів чи чисел. значення поля id не повинно закінчуватися на "_".
Також пробіли не дозволені, якщо вони надані, вони трактуються як різні значення, що не вірно у випадку атрибутів id.