• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

HTML Id

← Previous Next →

In HTML, the id attribute is a unique identifier assigned to an element. Unlike classes, which can be used on multiple elements, an id must be unique on a page. IDs are used to target specific elements for styling with CSS, manipulating content with JavaScript, or linking to sections within a page. Understanding how and when to use IDs is crucial for building structured and interactive webpages. This chapter explains everything about HTML IDs, their uses, best practices, and practical examples.

What is an HTML Id

An id is an attribute that gives a single element a unique name. It allows developers to style or manipulate that specific element without affecting others. The syntax is simple:

<tag id="unique-name">Content</tag>

Example

<p id="intro">This is the introduction paragraph.</p>

Here, the paragraph has an id of intro. This means you can select it in CSS, JavaScript, or even create anchor links to it.

Difference Between Id and Class

Feature Id Class
Uniqueness Must be unique per page Can be used on multiple elements
CSS Selector #idname .classname
Purpose Target single elements Apply style/behavior to multiple elements

While classes are used for reusable styling, IDs are for targeting a specific element.

Assigning an Id to an HTML Element

You can assign an id to almost any HTML element, such as <div>, <p>, <span>, <header>, <footer>, <img>, <ul>, <li>, and more.

Example

<div id="header">
    <h1>Welcome to My Website</h1>
</div>

<p id="intro">This is the introduction paragraph with a unique ID.</p>

In this example, both the div and paragraph have unique IDs that can be individually targeted.

Using Id in CSS

You can style an element with a specific ID using the hash (#) selector in CSS.

Example: Styling with ID

<style>
#intro {
    font-size: 18px;
    color: blue;
    background-color: #f0f0f0;
    padding: 10px;
    border-radius: 5px;
}
</style>

<p id="intro">This paragraph is styled using an ID.</p>

Unlike classes, the ID selector only targets one element on the page. Using IDs ensures that the style is applied exclusively to that element.

Using Id in JavaScript

IDs are very useful in JavaScript because you can select and manipulate specific elements easily using getElementById.

Example: Changing Text with JavaScript

<p id="message">Original text</p>
<button onclick="changeText()">Click Me</button>

<script>
function changeText() {
    document.getElementById("message").innerHTML = "Text updated using ID!";
}
</script>

Clicking the button changes the content of the paragraph with the id message.

Anchoring and Linking with IDs

You can link to a specific section on a page using an ID. This is helpful for navigation menus or long pages.

Example: Anchor Link

<a href="#section1">Go to Section 1</a>

<div id="section1">
    <h2>Section 1</h2>
    <p>This is Section 1 content.</p>
</div>

Clicking the link scrolls the page to the div with the id section1.

Best Practices for Using Id

  1. Keep IDs unique – Each id must appear only once on a page to avoid conflicts.

  2. Use descriptive names – Choose meaningful names, like header, main-content, footer, or signup-form.

  3. Avoid using IDs for styling reusable elements – Use classes for repeated styles; IDs should target unique elements.

  4. Use lowercase and hyphens – Example: main-header or contact-section for better readability and maintainability.

  5. Combine with classes if needed – You can use both id and class on the same element to separate unique identification from shared styling.

Example: Combining ID and Class

<div id="main-header" class="header-style">
    <h1>Website Header</h1>
</div>

<style>
.header-style {
    background-color: #f8f8f8;
    padding: 20px;
}
#main-header {
    border-bottom: 2px solid #333;
}
</style>

Here, the class handles general styling while the ID applies a unique feature, such as a border.

Using ID in Forms

IDs are especially useful in forms for connecting labels and input fields. This improves accessibility and usability.

Example: Form Label Linking

<form>
    <label for="username">Username:</label>
    <input type="text" id="username" name="username">
</form>

The for attribute in the label links to the input with the corresponding ID. Clicking the label focuses the input field automatically.

Common Mistakes with IDs

  • Using the same ID for multiple elements – this can break CSS and JavaScript targeting.

  • Using IDs for elements that appear repeatedly – classes are better for multiple elements.

  • Choosing vague ID names like div1 or p2 – descriptive names are always better.

  • Relying solely on IDs for styling – classes provide more flexibility and reusability.

Summary of HTML Id 

HTML IDs are unique identifiers used to target specific elements for CSS styling, JavaScript manipulation, and page navigation. They must be unique on each page, unlike classes which can be reused. You learned how to assign IDs, style them with CSS, manipulate them with JavaScript, create anchor links, and combine them with classes. Following best practices ensures your HTML remains clean, maintainable, and accessible. IDs are essential for creating interactive and well-structured web pages.

Practice Questions

Q1. Create a paragraph with an id and style it using CSS.

Q2. Add a heading with id="title" and change its color to red.

Q3. Use JavaScript to change the content of a <div> with id="output".

Q4. Create a button that updates a paragraph with a specific id.

Q5. Use id="contact" and create a link that jumps to that section.

Q6. Add an input box with a unique id and set its value using JavaScript.

Q7. Create a list where one item has a special style via id.

Q8. Demonstrate an internal link navigation using id.

Q9. Apply font-style: italic to an element with a specific id.

Q10. Create a section with id="faq" and a link that jumps to it.

← Previous Next →

Try a Short Quiz.

coding learning websites codepractice

No quizzes available.

HTML

online coding class codepractice

HTML5 Basics

HTML Styling and Design

HTML Links and Media

HTML Layout and Structure

HTML Forms

HTML Graphics

HTML APIs

HTML Advanced Topics

codepractice logo
Login
Go Back Top