id and class attributes of HTML

Last update on August 19 2022 21:51:12 (UTC/GMT +8 hours)

id and class

HTML id and class attributes identify an element in an HTML document. This is useful for applying styles and manipulating an element with DOM and JavaScript.

HTML element id attribute

1. id attribute identifies an element in HTML document. This happens when the value of id attribute of an HTML element matches the name of id, either in CSS or in a script (e.g. JavaScript).

2. Once a name is used as the value of an id attribute of an HTML element, it can not be used as the value of any other element's id attribute.

Syntax

<ElementName id="name_of_the_id">text content</ElementName>

Where ElementName is any HTML element name.

Type of values

Type of value for id attribute is ID.

Value

The value of id attribute is as supplied by the author of the web document. It must be unique in the web document.

Example of using id attribute to apply a style with CSS

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<title>Example of HTML id attribute with CSS - HTML tutorial |
w3resource</title>
<style type="text/css">
#w3r {
color: red; 
} 
</style>
</head>
<body>
<p id="w3r" >Even after three months of the devastating flood in
Pakistan, people are still without food, shelter or hope - BBC
reports.</p>
</body>
</html>

Result

View this example in a separate browser window

Example id attribute with CSS

Example of using id attribute with JavaScript

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<title>Example of HTML id attribute with JavaScript - HTML tutorial |
w3resource</title>
<script type="text/javascript">
function w3r(){ 
var w3rValue = document.getElementById("w3r");
alert("The text enclosed by p is : " + w3rValue.innerHTML);
}
</script>
</head>
<body onload="w3r()">
<p id="w3r">Even after three months of the devastating flood in Pakistan,
people are still without food, shelter or hope - BBC reports.</p>
</body>
</html>

Result

View this example in a separate browser window

Example id attribute with JavaScript

Description HTML class attribute

1. class attribute identifies an element in HTML document. This happens when the value of class attribute of an HTML element matches the name of class. Usually this is used to apply styles.

2. Unlike id, name of a class can be used with multiple elements in an HTML document.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<title>Example of HTML class attribute with CSS - HTML tutorial |
w3resource</title>
<style type="text/css">
 .w3r {
background: lightyellow; 
} 
</style>
</head>
<body>
<p class="w3r">Even after three months of the devastating flood in
Pakistan, people are still without food, shelter or hope - BBC
reports.</p>
</body>
</html>

Result

View this example in a separate browser window

Example class attribute with CSS

Note

In this page, we have discussed the HTML id and class attribute. These two attributes are referred as document wide identifiers, which are used to identify an element in an HTML page. This is useful for applying styles to a particular element or manipulating an element (format as well as style) in an HTML page.

Previous: HTML cite attribute
Next: HTML classid attribute