HTML ID Attribute - HTML Tutorial

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": The id attribute 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-content ID, 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.
The id attribute 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>

HTML ID Attribute Syntax

HTML ID Attribute Example Code

HTML Labs