← Back to HTML Course | Chapter 3: Page Structure | Lesson 3 of 12

HTML Id

Imagine check-in day at a major international flight terminal. Everyone has a boarding group, like 'Group Economy' or 'Group Business' (which behave like HTML classes). However, when security agents scan your passport, they look at your unique passport number. Only one person in the entire airport can have that exact passport number. That is exactly what an HTML ID is. An ID is a unique name tag that you attach to a single element on your webpage. No other element on that page can share that name. It is the perfect tool for identifying a specific element for jump links, precise styling, or custom scripting.

In this page:

  1. What is the id Attribute?
  2. Styling with IDs in CSS
  3. Creating Jump Links with Anchor IDs
  4. Targeting IDs in JavaScript
  5. Class vs. ID - When to Use Which
Syntax
markup 
<tagname id="idname">content</tagname>

<style>
  #idname {
    property: value;
  }
</style>

What is the id Attribute?

The id attribute defines a completely unique identifier for an HTML element. Unlike classes, an ID can only be assigned to one single element on an HTML page.

Note: Each ID must be entirely unique across your entire HTML page structure.
Warning: Assigning the same ID to multiple elements on the same page is invalid HTML and will break your JavaScript selectors.

Example: What is the id Attribute?

markup 
<p id="intro">This paragraph has a unique id</p>

Styling with IDs in CSS

To target and style an ID inside your stylesheet, you use a hash symbol (#) followed by the exact ID name. ID selectors have a very high specificity rating, meaning they override standard class and element styling rules.

Note: Use class selectors for general styling, and reserve IDs for unique layout sections.
Warning: Because ID selectors have high specificity, they can make overriding styles in your CSS sheet difficult.

Example: Styling with IDs in CSS

markup 
<style>
  #intro {
    font-weight: bold;
  }
</style>
<p id="intro">Styled by id</p>

Creating Jump Links with Anchor IDs

You can use IDs to build links that jump directly to specific sections on a long webpage. By setting the href of an anchor link to match an element's ID (prefixed with a hash #), the browser will automatically scroll to that element when clicked.

Note: Pair jump links with smooth scrolling using CSS for a more polished user experience.
Warning: Make sure the link's href matches the element's ID case-sensitivity exactly to prevent broken links.

Example: Creating Jump Links with Anchor IDs

markup 
<a href="#section1">Jump to Section 1</a>
<h2 id="section1">Section 1</h2>

Targeting IDs in JavaScript

JavaScript relies heavily on IDs to locate and manipulate specific elements dynamically. The document.getElementById method is one of the fastest and most reliable ways to capture a specific element in your scripts.

Note: Always check your ID spelling in your scripts, as a single typo will return null and break your code.
Warning: Do not start your ID names with numbers, as it can cause selector errors in your scripts.

Example: Targeting IDs in JavaScript

markup 
<script>
  document.getElementById('intro');
</script>
<p id="intro">Targeted by script</p>

Class vs. ID - When to Use Which

Choosing between classes and IDs is easy when you remember this rule: use classes for styles you want to repeat across several elements, and use IDs to identify a single, unique element on the page.

Note: Apply class attributes for styling, and save ID attributes for anchors and scripting.
Warning: Avoid using IDs as your primary CSS styling selectors, as it makes your stylesheets difficult to reuse.

Example: Class vs. ID - When to Use Which

markup 
<p class="highlight">Repeated style via class</p>
<p id="main-title">Unique element via id</p>
Live Example
Related Topics

HTML Classes · HTML Iframes · HTML Project · HTML JavaScript

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
Common Mistakes
  1. Using the same ID attribute on multiple elements within a single HTML page.
  2. Writing a hash symbol (#) inside the HTML id attribute itself.
  3. Misspelling or mismatching uppercase and lowercase letters in your jump links or scripts.
Chapter Summary
  • The id attribute assigns a completely unique identifier to a single HTML element on a webpage.
  • Style individual IDs inside CSS using a hash prefix followed by the exact ID name.
  • Use IDs to create convenient on-page jump links and to quickly target specific elements with JavaScript.
Browser Support

The id attribute is fully supported across all modern and legacy web browsers natively.

🔒

Chapter Quiz — Complete all 12 topics to unlock

0/12 topics done

Complete these topics first:

← Previous Lesson HTML Classes Next Lesson → HTML Iframes

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.