Id in html

Div in html Iframe in html

In HTML, the id attribute is used to uniquely identify an element within an HTML document. Each id must be unique within the document, meaning no two elements can have the same id. This uniqueness allows the id attribute to be used for various purposes, including CSS styling, JavaScript manipulation, and navigation through fragment identifiers in URLs.

Key Characteristics of `id`:

Uniqueness: Each id must be unique within the HTML document.
Case-Sensitive: id values are case-sensitive (id="example" is different from id="Example").
Styling: CSS can use id to apply specific styles to an element.
JavaScript: JavaScript can use id to select and manipulate specific elements.
Fragment Identifier: The id can be used in URLs to navigate to specific parts of a webpage.

1. Styling with CSS:

You can apply styles to a specific element using the id attribute. In CSS, the id selector is prefixed with a #.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ID Example</title>
    <style>
        #uniqueHeader {
            background-color: #4CAF50;
            color: white;
            padding: 10px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="uniqueHeader">
        <h1>Welcome to My Website</h1>
    </div>
</body>
</html>

In this example, the <div> element with id="uniqueHeader" is styled with a green background and white text.

2. Manipulation with JavaScript:

You can use JavaScript to select and manipulate an element by its id.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ID Example</title>
    <style>
        #content {
            padding: 20px;
            background-color: #f0f0f0;
        }
    </style>
</head>
<body>
    <div id="content">
        <p>This is some content.</p>
        <button onclick="changeContent()">Change Content</button>
    </div>

    <script>
        function changeContent() {
            document.getElementById('content').innerHTML = '<p>Content has been changed!</p>';
        }
    </script>
</body>
</html>

In this example, when the button is clicked, the JavaScript function changeContent is executed, which changes the content of the <div> with id="content".

3. Fragment Identifier:

You can use id as a fragment identifier in URLs to navigate to specific parts of a webpage.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ID Example</title>
</head>
<body>
    <h2 id="section1">Section 1</h2>
    <p>Content of Section 1.</p>
    <h2 id="section2">Section 2</h2>
    <p>Content of Section 2.</p>
    <a href="#section1">Go to Section 1</a>
    <a href="#section2">Go to Section 2</a>
</body>
</html>

In this example, clicking on the links will navigate to the respective sections of the page identified by id="section1" and id="section2".

Conclusion:

The id attribute is a powerful tool in HTML for uniquely identifying elements, allowing for precise styling, manipulation, and navigation.

By using id effectively, you can create well-structured and interactive web pages.