The id attribute uniquely identifies an HTML element within a page. Each ID must be unique, making it useful for linking, styling, and scripting specific elements.
HTML ID Attribute Syntax
Explanation of Syntax:
tagname: The name of the HTML element (e.g.,<div>,<h2>).id="unique_id": Theidattribute provides a unique identifier for the element.
<tagname id="unique_id">Content</tagname>
HTML ID Attribute Example Code
Explanation of Code:
- The code starts with the
<!DOCTYPE html>declaration and the opening<html>tag. - The
<head>section includes metadata and a CSS style for the#main-contentID, which gives it a light blue background and padding. - The
<body>section contains:- An
<h1>tag with a welcome message. - A
<div>tag assigned the unique ID “main-content,” allowing for specific styling and identification. Inside the<div>, a<p>tag describes the content area.
- An
- The
idattribute is beneficial for referencing specific elements in CSS and JavaScript, ensuring that each element can be individually styled or manipulated without affecting others.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ID Attribute Example</title>
<style>
#main-content {
background-color: lightblue;
padding: 20px;
}
</style>
</head>
<body>
<h1>Welcome to My Website</h1>
<div id="main-content">
<p>This is the main content area with a unique ID.</p>
</div>
</body>
</html>