html tutorial - id Attribute in HTML - html5 - html code - html form



Id attribute in html

Learn html - html tutorial - Id attribute in html - html examples - html programs

  • The id attribute is used to define a unique id for an HTML element.
  • The id used to identify a unique element and its content.
  • The id attribute value should not contain white space.
  • If any two of the element has same name, we can identify a single element by its id attribute.

Syntax for id attribute in HTML:

<element id=”value”>

Difference between HTML 4.01 and HTML 5 for id Attribute:

HTML 4.01

HTML 5

  • In HTML5 the id attribute supports all the element.

Applies To:

Element Attribute
All HTML elements id

id Attribute Value:

Value Description
id id attribute used to specifies a unique id for the element.

Sample Coding for id Attribute in HTML:

Tryit<!DOCTYPE html>
<html>
    <head>
        <title>Wikitechy id Attribute</title>
    </head>
    <body>
        <h1 id=”title”>Wikitechy HTML.</h1>
        <button onclick=”change_title()”>Change Title!</button>
        <script>
            function change_title()
            {
             document.getElementById("title").innerHTML = "Wikitechy CSS.";
            }
        </script>
    </body>
</html>

Code Explanation for id Attribute in HTML:

id Attribute Code Explanation

  1. <h1> tag has the id attribute with the value of “title”.
  2. <button> tag is have the onclick attribute to call “change_title()” JavaScript function on button click.
  3. change_title() function change the content as “Wikitechy CSS.” which element has id attribute value as “title”.

Output for id Attribute in HTML:

id Attribute Output

  1. The output shows “Wikitechy HTML” when the page loads.
id Attribute Output
  1. When the button clicked the content changed to “Wikitechy CSS.”

Browser Support for id Attribute in HTML:

Yes Yes Yes Yes Yes

Related Searches to id Attribute in html