Рубрики

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

Атрибут 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>

  

</html>

Выход:

Рекомендуемые посты:

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

0.00 (0%) 0 votes