Difference between id and class Attributes in HTML
HTML id Attribute: The id attribute is a unique identifier that is used to specify the document. It is used by CSS and JavaScript to perform a certain task for a unique element. In CSS, the id attribute is written using the # symbol followed by id.
Syntax:
<element id="id_name">
In CSS Stylesheet:
#id_name {
// CSS Property
}Example:
html
<!DOCTYPE html><html> <head> <title> HTML id attribute </title> <style> #geeks{ color: green; font-size: 25px; } </style></head> <body style="text-align: center"> <h1>Geeks for Geeks</h1> <p id="geeks">Welcome to Geeks for Geeks</p> <p>A Computer Science portal for geeks</p></body> </html> |
Output:
HTML class Attribute: The class attribute is used to specify one or more class names for an HTML element. The class attribute can be used on any HTML element. The class name can be used by CSS and JavaScript to perform certain tasks for elements with the specified class name. The class name in CSS stylesheet using “.” symbol.
Syntax:
<element class="class_name">
In CSS Stylesheet:
.class {
// CSS Property
}Example:
html
<!DOCTYPE html><html> <head> <style> .geeks{ color: green; font-size: 25px; } </style></head> <body style="text-align: center;"> <h1>Geeks for Geeks</h1> <p> Welcome to Geeks for Geeks</p> <p class="geeks"> A Computer Science portal for geeks </p></body> </html> |
Output:
Difference between id and class attribute: The only difference between them is that “id” is unique in a page and can only apply to at most one element, while “class” selector can apply to multiple elements.
HTML is the foundation of webpages is used for webpage development by structuring websites and web apps.You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.
Please Login to comment...