You can use the id attribute in HTML to organize your webpage. This is useful in identifying the elements uniquely making them get styled or scripted using CSS and JavaScript. It is important to know the standard rules to create a valid id attribute and best practices for using it. We discuss the valid id and how to use it properly in this blog.
Table of Contents:
What is the id Attribute?
It is the unique identifier in the HTML document. The id needs to be unique so that you can target the element easily without confusion. You can use this id attribute in any of the HTML elements for applying the styles through CSS, you can also apply JavaScript for the targetted element and other programming standards.
Syntax:
<div id="main-container">Welcome to My Website</div>
Rules for Valid id Attribute Values
To make sure the id attribute works correctly, you should follow the following rules:
- Uniqueness: You should provide the unique id for the targetted element, each id must be unique in the HTML document.
- No spaces: There should be no space in the id attribute.
- Start with a letter: All the id attributes must start with the letters (a-z) or (A-Z) and not with the numbers.
- Alphanumeric and special characters: The id may contain letters, numbers, hyphens (-), underscores (_), and periods (.) but no spaces
- Case-sensitive: The HTML id values are case-sensitive.
Valid syntax:
<div id="header"></div>
<div id="footer_1"></div>
<div id="main-content"></div>
Invalid syntax:
<div id="123header"></div> <!-- Starts with a number -->
<div id="main content"></div> <!-- Contains space -->
<div id="@special"></div> <!-- Contains invalid character -->
Methods for Assigning Valid id Values
You can give descriptive and camel case naming, use underscore or hyphen, avoid reserved keys and you can prefixes for namespacing. Let’s discuss these methods in the following section.
Method 1: Descriptive Naming
You can give a meaningful name to the id attribute, to make sure it is readable and maintainable. Therefore your code gets clarity and avoids confusion when dealing with multiple elements.
Example:
<section id="contact-form">
<h2>Contact Us</h2>
<form>
<input type="text" placeholder="Your Name">
<input type="email" placeholder="Your Email">
<button type="submit">Submit</button>
</form>
</section>
Output:
Explanation: You can create a form using this code with two input fields and a submit button. The id=”contact-form” is used to identify this section uniquely. You can use it when you want to style or script them.
Method 2: Camel Case Naming
This method improves readability by combining words without the space and special characters between them. It capitalizes every word except the first.
Example:
<div id="mainContainer">
<p>Intellipaat</p>
</div>
Output:
Explanation: You can use this code to create a div with the id=”mainContainer”. You can use this id when you want to style or script them.
Method 3: Using underscore( _ ) or hyphen( – )
You can use special characters such as underscore( _ ) or hyphen( – ) to make the id unique and it helps to easily distinguish from others.
Example:
<div id="user_profile">
<p>Intellipaat</p>
</div>
<div id="user-profile">
<p>Courses</p>
</div>
Output:D
Explanation: You can create two divs with two unique IDs such as user_profile and user-profile. You can use these IDs when you want to style or script them.
Method 4: Avoiding Reserved Keywords
You can avoid the reserved keywords in JavaScript or HTML while naming the unique ID. If you used the reserved keyword as the id that may lead to unexpected behavior in the script.
Example:
<button id="submitButton">Submit</button>
Output:
Explanation: The id=”submitButton” is used to uniquely identify the submit so that you can use these IDs to style or script them. You can avoid id=”submit”, because this may lead to conflict with JavaScript.
Method 5: Prefixing for Namespacing
You can prefix the group the elements in a logical way. It suits big projects and it stays organized.
Example:
<header id="nav-main">
<nav>
<ul>
<li><a href="#">Intellipaat</a></li>
<li><a href="#">Courses</a></li>
</ul>
</nav>
</header>
<footer id="footer-main">
<p>© 2025 My Website</p>
</footer>
Output:
Explanation: You can use unique ids such as id=”nav-main” and id=”footer-main” to style or script <header> and <footer> them separately. The header section has the navigation links and the footer has copyright notice.
Conclusion
You can use the id attribute in HTML to uniquely identify the elements so that you can style and script them separately. The id value should be without space, starting with a letter, case-sensitive, and unique. You can name the id attribute in HTML with a few methods such as descriptive naming, camel case, underscores or hyphens, avoiding reserved keywords, and prefixing. Therefore this allows you to handle large projects easily.
What are Valid Values For the id Attribute in HTML – FAQs
1. What is the purpose of the id attribute in HTML?
The id attribute is used to apply the CSS to style and JavaScript to script in the targetted element. Since the id is unique, you can access the specific section easily.
2. What are the basic rules for creating a valid id?
The id should be unique, without space, starting with the letter, and include special characters such as underscore and hyphen.
3. Why does the id need to be unique?
Uniqueness ensures that each id targets one specific element which prevents confusion during styling or scripting.
4. Can I use numbers or special characters at the start of an id?
No, an id must start with a letter. The unique id should start with letters.
5. Are id attributes case-sensitive?
Yes, id values are case-sensitive. For example, id=”header” and id=”Header” is considered as different.