HTML IDs

The HTML id attribute specifies a unique identifier for an element. Unlike classes, IDs must be unique within a document - no two elements should have the same ID. IDs are commonly used for styling specific elements, creating anchor links, and selecting elements with JavaScript.

Basic ID Syntax

The id attribute assigns a unique name to an element:

<!-- ID on different elements -->
<div id="header">Header content</div>
<p id="intro">Introduction paragraph</p>
<img id="logo" src="logo.png" alt="Company Logo">
<section id="main-content">Main section</section>
<footer id="footer">Footer content</footer>

ID Naming Rules

The following are some rules for valid ID names:

Valid ID Names

These are some examples of valid ID names:

<!-- Valid ID names -->
<div id="header">Header</div>
<div id="main-content">Main Content</div>
<div id="button-primary">Primary Button</div>
<div id="nav_item">Navigation Item</div>
<div id="sidebar2">Sidebar 2</div>
<div id="section-1">Section 1</div>

ID Naming Rules:

Invalid ID Names:

The following are some examples of invalid ID names:

<!-- Invalid ID names -->
<div id="1header">Invalid: starts with number</div>
<div id="header content">Invalid: contains space</div>
<div id="header@content">Invalid: contains special character</div>
<div id="header" id="main">Invalid: duplicate IDs</div>

Anchor Links with IDs

IDs are commonly used to create anchor links that jump to specific sections of a page:

<!-- Navigation links -->
<nav>
  <ul>
    <li><a href="#introduction">Introduction</a></li>
    <li><a href="#features">Features</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

<!-- Page content with ID anchors -->
<section>
  <h2 id="introduction">Introduction</h2>
  <p>Introduction content goes here...</p>
</section>

<section>
  <h2 id="features">Features</h2>
  <p>Features content goes here...</p>
</section>

<section>
  <h2 id="contact">Contact</h2>
  <p>Contact information goes here...</p>
</section>

ID vs Class Comparison

Practical Examples

Here are some practical examples of how IDs are used in real-world scenarios:

Page Layout Structure

Here's an example of a semantic page structure using IDs for unique elements:

<!-- Semantic page structure with IDs -->
<div id="page-wrapper">
  <header id="site-header">
    <div id="logo"><img src="logo.png" alt="Logo"></div>
    <nav id="main-navigation">
      <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
      </ul>
    </nav>
  </header>
  
  <main id="main-content">
    <section id="hero-section">
      <h1 id="main-title">Welcome</h1>
    </section>
    
    <section id="content-section">
      <article id="main-article">
        <p>Main article content</p>
      </article>
    </section>
  </main>
  
  <aside id="sidebar">
    <div id="widget-1">Widget content</div>
  </aside>
  
  <footer id="site-footer">
    <div id="footer-content">Footer content</div>
  </footer>
</div>

Form with IDs

<form id="contact-form">
  <div id="name-field">
    <label for="name">Name:</label>
    <input id="name" type="text" name="name" required>
  </div>
  
  <div id="email-field">
    <label for="email">Email:</label>
    <input id="email" type="email" name="email" required>
  </div>
  
  <div id="message-field">
    <label for="message">Message:</label>
    <textarea id="message" name="message" rows="4"></textarea>
  </div>
  
  <button id="submit-btn" type="submit">Send Message</button>
  <div id="form-message"></div>
</form>

Best Practices