HTML ID
In HTML, the id attribute is used to assign a unique identifier to an HTML element. This unique identifier can then be used to reference the element in CSS for styling, or in JavaScript for manipulating the element.
Here’s a basic example of how the id attribute is used in HTML:
Example 1: Basic Usage
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML ID Example</title>
<style>
/* CSS styling using ID */
#header {
color: blue;
font-size: 24px;
}
</style>
</head>
<body>
<h1 id="header">Welcome to My Website</h1>
<p>This is a paragraph of text.</p>
<button id="myButton">Click Me!</button>
<script>
// JavaScript accessing element by ID
document.getElementById('myButton').addEventListener('click', function() {
alert('Button was clicked!');
});
</script>
</body>
</html>
Explanation
-
HTML Structure
- The
idattribute is used in the<h1>and<button>elements with values"header"and"myButton", respectively.
- The
-
CSS Styling
- The
#headerselector in the CSS targets the<h1>element withid="header"and applies styles to it. The#symbol denotes that it's an ID selector.
- The
-
JavaScript Interaction
- The
document.getElementById('myButton')method is used to select the button withid="myButton". The JavaScript code then adds an event listener to the button that displays an alert when the button is clicked.
- The
Important Notes
- Uniqueness: The value of the
idattribute must be unique within a page. No two elements should have the sameidvalue. - Case Sensitivity: The
idattribute is case-sensitive, somyButtonandMyButtonwould be considered different IDs.
Using IDs effectively allows you to target and style specific elements or manipulate them using JavaScript.
0
likes
Your Feedback
Help us improve by sharing your thoughts
Online Learner helps developers master programming, database concepts, interview preparation, and real-world implementation through structured learning paths.
Quick Links
© 2023 - 2026 OnlineLearner.in | All Rights Reserved.