Learn HTML – Part 49 – id Attribute – Unique Element Identifier
The HTML id attribute is used to uniquely identify an element within a webpage.
Each id value must be unique in a page, meaning it cannot be used by multiple elements.
What is the id Attribute?
The id attribute assigns a unique identifier to an HTML element.
This identifier can be used by CSS, JavaScript, and internal page links to reference that specific element.
Basic Syntax
<element id="uniqueName">Content</element>
The value of the id must be unique within the page.
Example – Using id Attribute
<p id="intro">Welcome to HTML learning.</p>
Output:
Welcome to HTML learning.
Using id with CSS
The id attribute is commonly used in CSS to style a specific element.
<style>
#title {
color: blue;
font-size: 24px;
}
</style>
<h2 id="title">HTML Tutorial</h2>
Output:
HTML Tutorial
Using id for Page Navigation
The id attribute can be used to create internal page links.
<a href="#section1">Go to Section 1</a>
<h2 id="section1">Section 1</h2>
Output:
Section 1
Rules for Using id
- Each id must be unique within the page
- An element can have only one id
- id values should not contain spaces
- Use meaningful names for better readability
Why Use id?
- Uniquely identifies an element
- Used for CSS styling
- Used for JavaScript interactions
- Creates internal page navigation links
The
idattribute uniquely identifies an HTML element within a webpage.
Common Mistakes Beginners Make
- Using the same id for multiple elements
- Using spaces in id values
- Confusing id with class attributes
Conclusion
The HTML id attribute is used to uniquely identify elements on a webpage.
It plays an important role in styling, scripting, and creating navigation links within a page.
What’s Next?
Now that you understand the id attribute, the next step is learning about the class attribute, which is used to group multiple HTML elements together.
Next: Learn HTML – Part 50 – class Attribute – Grouping HTML Elements →
Series: Learn HTML Series
