View video tutorial
HTML Id
HTML
The id attribute in HTML provides a unique identifier for an HTML element within an entire HTML document.
This means that two elements on the same web page cannot share the same ID value.
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>
Click on the "Try it Now" button to see how it works.
Example
<html>
<!-- Example: id Tag -->
<head>
<title>HTML id Example</title>
<script>
let x = true;
function m1() {
if (x) {
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";
x = false;
} else {
document.getElementById("id1").style = "";
x = true;
}
}
</script>
</head>
<body>
<h2>HTML id used in JavaScript</h2>
<p id="id1" onclick="m1();">Welcome to w3context.</p>
</body>
</html>
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>
<h2 onclick="m1();">HTML id used in JavaScript (click me)</h2>
<p id="id1" onclick="m2();">Welcome to w3context.(click me)</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";
}
function m2() {
document.getElementById("id1").style= "";
}
</script>
</body>
</html>
Click on the "Try it Now" button to see how it works.