Prev Next

HTML Id

The id attribute uniquely identifies an element on a webpage. Unlike classes, which can be reused multiple times, an id should be unique per page. IDs are useful for targeting specific elements with CSS or JavaScript, and for creating internal links that jump directly to a particular section.

Key Topics

Assigning an Id

Example: Adding an id to an element.

<div id="header">This is the header section</div>

Example: Linking to a specific section using the id.

<a href="#header">Go to Header</a>

Styling with Ids

Example: Using CSS to style an element with a specific id.

#header {
    background-color: lightblue;
    padding: 10px;
}

Explanation: The #header selector in CSS targets the element with the id "header." This allows for precise styling of that particular element.

Key Takeaways

  • Use the id attribute to uniquely identify an element.
  • Ids can be used as jump targets for internal links, improving navigation.
  • In CSS, use #idname to style that specific element.
  • Limit each id to a single element per page for clarity and maintainability.
  • Combine ids with classes and semantic elements for a well-structured page.
Prev Next