HTML Tutorial: HTML Id
Learn how to use HTML id attribute to style or target unique elements with colorful examples
HTML id is used to identify unique elements on a page.
Unlike classes, an id can be used only once per page.
1️⃣ Basic Id Example
INPUT:
<!DOCTYPE html>
<html>
<head>
<style>
#main-heading { color: blue; font-size: 30px; font-weight: bold; }
</style>
</head>
<body>
main-heading
OUTPUT:
Welcome to My Page
✔️ id="main-heading" targets a unique element
✔️ Use CSS with #main-heading to style it
2️⃣ Using Id with Div
INPUT:
<style>
#header { background-color: #0077cc; color: white; padding: 10px; text-align: center; }
</style>
<div id="header">
This is a header section
</div>
OUTPUT:
This is a header section
✔️ Id selector is useful for styling a single div ✔️ Ideal for headers, footers, or unique sections
3️⃣ Difference Between Id and Class
| Feature | Class | Id |
|---|---|---|
| Usage | Multiple elements | Single element |
| Selector | .classname | #idname |
| Example | <p class="text"> | <div id="header"> |
4️⃣ Inline Id Styling
INPUT:
<h2 id="unique-heading" style="color:#ff6600; background-color:#f0f7ff; padding:8px;">
Unique Inline Styled Heading
</h2>
OUTPUT:
Unique Inline Styled Heading
✔️ Inline styles can be applied directly with id
✔️ Useful for quick testing or unique overrides
5️⃣ Best Practices for Id
- Use ids for unique elements only
- Do not repeat the same id on multiple elements
- Prefer classes for reusable styling
- Combine ids with CSS or JavaScript for targeting
- Keep id names meaningful and descriptive
🚀 What’s Next?
👉 HTML Buttons
Next lesson will cover:
- Creating buttons with
<button> - Button types and styling
- Event handling for buttons
Using ids correctly helps target and style unique elements efficiently, keeping your HTML organized and maintainable.
Tags
HTML Tutorial