Understanding HTML IDs

In HTML, the id attribute is a unique identifier used to target a specific element. Unlike classes, each id value must be unique within an HTML document. This means no two elements should share the same id. This uniqueness makes it very useful for pinpointing one specific element when you need to style it or manipulate it with JavaScript.

IDs are also very handy when creating links that scroll the user to a specific part of the page (like a section header or a bookmark).

Example of Using an ID for Styling

<style>
            #important-text {
                color: red;
                font-weight: bold;
            }
        </style>
    
        <p id="important-text">This paragraph has a unique style because it has an 'important-text' ID.</p>
        <p>This paragraph will not have the same style because it doesn't have an ID.</p>
        

Example of Using an ID for Bookmarking

<a href="#section2">Jump to Section 2</a>
        <p>Section 1 content...</p>
        <h2 id="section2">Section 2</h2>
        <p>You jumped here from Section 1!</p>
        

As demonstrated, the id attribute provides a powerful way to access and manipulate elements. The first example shows how an element with an ID can be styled distinctly, and the second example demonstrates how IDs can be used to create in-page links that allow users to jump to different sections of a webpage.