HTML ID Attribute: Syntax, Uses, and Examples

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML ID Attribute Guide</title>
</head>
<body>
    <!-- Top Navigation with Anchor Fragment Links -->
    <nav>
        <a href="#aboutSection">About Us</a> |
        <a href="#contactSection">Contact</a>
    </nav>

    <!-- Accessible Form Input Binding -->
    <form style="margin: 20px 0;">
        <label for="newsletterEmail">Subscribe to Newsletter:</label>
        <input type="email" id="newsletterEmail" name="newsletter_email" placeholder="you@domain.com">
    </form>

    <!-- Unique Bookmark Target: aboutSection -->
    <section id="aboutSection" style="margin-top: 40px; padding: 20px; background: #f8fafc;">
        <h2>About Our Organization</h2>
        <p>This section is uniquely identified by id="aboutSection".</p>
    </section>

    <!-- Unique Bookmark Target: contactSection -->
    <section id="contactSection" style="margin-top: 40px; padding: 20px; background: #eff6ff;">
        <h2>Contact Information</h2>
        <p>This section is uniquely identified by id="contactSection".</p>
    </section>

    <script>
        // High-speed unique DOM lookup
        const contactSec = document.getElementById('contactSection');
        console.log('Located unique section:', contactSec.id);
    </script>
</body>
</html>