HTML

id is a unique identification of an element.

Element Identification


The id is a unique identification of an element in a document.

id must be unique in a document.

This id is used to apply style or script on the element.

It is a single name with no space and started with letter, and is case sensitive.

Learning with HTML Editor "Try it Now"

You can edit the HTML code and view the result using online editor.

Example

<!DOCTYPE html>
<html>
<!-- Example: id Tag -->
<head>
    <title>HTML id Example</title>
    <style>
        #id1 {
            color: white;
            background-color:#404040;
            padding:20px;
            font-size: 20pt;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <h2>HTML id used in CSS</h2>
    <p id="id1">Welcome to w3context.</p>
</body>
</html>
Try it Now »

Click on the "Try it Now" button to see how it works.


Example

<!DOCTYPE html>
<html>
<!-- Example: id Tag -->
<head>
    <title>HTML id Example</title>
    <script>
        function m1() {
            document.getElementById("id1").style.color = "white";
            document.getElementById("id1").style.backgroundColor = "#404040";
            document.getElementById("id1").style.padding = "20px";
            document.getElementById("id1").style.fontSize = "20pt";
            document.getElementById("id1").style.borderRadius = "5px";
        }
    </script>      
</head>
<body onload="m1();">
    <h2>HTML id used in JavaScript</h2>
    <p id="id1">Welcome to w3context.</p>   
</body>
</html>
Try it Now »

Click on the "Try it Now" button to see how it works.


Example

<!DOCTYPE html>
<html>
<!-- Example: id Tag -->
<head>
    <title>HTML id Example</title>      
</head>
<body onload="m1();">
    <h2>HTML id used in JavaScript</h2>
    <p id="id1">Welcome to w3context.</p> 
    <script>
        function m1() {
            document.getElementById("id1").style.color = "white";
            document.getElementById("id1").style.backgroundColor = "#404040";
            document.getElementById("id1").style.padding = "20px";
            document.getElementById("id1").style.fontSize = "20pt";
            document.getElementById("id1").style.borderRadius = "5px";
        }
    </script>    
</body>
</html>
Try it Now »

Click on the "Try it Now" button to see how it works.