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

28.12.2019HTML, Веб-технологии

Атрибут id — это уникальный идентификатор, который используется для указания документа. Атрибут id используется с использованием символа # (хэш), за которым следует идентификатор. Значение должно быть уникальным среди всех идентификаторов в домашнем поддереве элемента.

Синтаксис:

  <tag id = #Values>

Допустимые значения для атрибута ID:
Начиная с HTML5, id должен удовлетворять этим трем условиям:

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

Таким образом, значение может состоять из всех цифр, только одна цифра, включать специальные символы и т. Д. Просто без пробелов.

В HTML 5 допустимы следующие значения идентификаторов:

  <tag id = "#999" > .... </tag > 
  <tag id = "#%LV-||" > .... </tag > 
  <tag id = " ____V" > .... </tag > 
  <tag id = "{}" > .... </tag > 
  <tag id = " ©" > .... </tag >

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

 <tag id = ".\1gfg" > .... <\tag >

Этот идентификатор действителен в HTML 5 Но в CSS идентификаторы javaScript (включая имена элементов, классы и идентификаторы в селекторах) могут содержать только символы [a-zA-Z0-9].

Теперь мы увидим примеры допустимых и недействительных значений идентификаторов в HTML и CSS .

Пример 1: значение id равно 1gfg и 1geeks, которые действительны в HTML 5, но не в CSS . Таким образом, мы просто получаем простой вывод вместо стилизованного вывода, потому что значение ID недопустимо в CSS .

<!DOCTYPE html>

<html>

<head>

<title>Id Attributes</title>

<style>

#1gfg {

color: #009900;

font-size: 50px;

font-weight: bold;

text-align: center;

}

#1geeks {

text-align: center;

font-size: 20px;

}

</style>

</head>

<body>

<div id="1gfg">GeeksforGeeks</div>

<div id="1geeks">

A computer science portal for geeks

</div>

</body>

</html>

Выход:

Пример 2: Теперь мы изменим значения идентификаторов od, но код останется таким же, как и раньше. Значение id — это gfg и geeks, которые действительны в HTML 5, а также в CSS . Таким образом, на этот раз мы получим стилизованный вывод, потому что значение ID допустимо в CSS .

<!DOCTYPE html>

<html>

<head>

<title>Id Attributes</title>

<style>

#gfg {

color: #009900;

font-size: 50px;

font-weight: bold;

text-align: center;

}

#geeks {

text-align: center;

font-size: 20px;

}

</style>

</head>

<body>

<div id="gfg">GeeksforGeeks</div>

<div id="geeks">

A computer science portal for geeks

</div>

</body>

</html>

Выход:

Мы только что видели пример допустимых значений идентификаторов в HTML и CSS .
Теперь мы видим еще один пример допустимых и недопустимых значений идентификаторов в HTML и javaScript .

Пример 3: Мы возьмем значение идентификатора ./1gfg, которое допустимо в HTML 5, но недопустимо в javaScript . Поэтому после нажатия кнопки «изменить текст» ничего не произойдет, потому что значение ID недействительно для javaScript .

<html>

<body>

<h1 id=".\1gfg">Hello Geeks!</h1>

<button onclick="displayResult()">

Change text

</button>

<style>

#.\1gfg {

color: green;

}

</style>

<script>

function displayResult() {

document.getElementById(

".\1gfg").innerHTML = "GeeksForGeeks!";

}

</script>

</body>

</html>

Выход:

Теперь мы увидим другой пример, в котором мы изменим значение идентификатора с ./1gfg на gfg, и кнопка изменения будет работать Hello Geeks! заменит GeeksForGeeks зеленым цветом, потому что значение идентификатора действительно для JavaScript .

Пример 4:

<html>

<body>

<h1 id="gfg">Hello Geeks!</h1>

<button onclick="displayResult()">

Change text

</button>

<style>

#gfg {

color: green;

}

</style>

<script>

function displayResult() {

document.getElementById(

"gfg").innerHTML = "GeeksForGeeks!";

}

</script>

</body>