Duplicate IDs make links and scripts unpredictable, because an ID is meant to identify exactly one element in a document.
What You Need to Know
Use a class for repeated styles and an id only for a unique target. Inspect the page or validate it when a fragment link goes to the wrong place.
The goal is not to collect as many tags as possible. Pick the element that best describes what the content really is.
Example: See It in Action
Here is a simple example to experiment with. Type it, save the file, and check what the browser displays.
This is a short HTML fragment. To try it as a webpage, put it inside the body element of a complete HTML document.
<h2 id="faq">Questions</h2>
<p id="answer">Here is the answer.</p>
<a href="#faq">Back to questions</a>Let’s Understand the Example
- An h2 starts a major section beneath the page topic.
- A p groups a paragraph of related text. Start another paragraph for a new thought.
- An a element becomes a working link when it has an href. Its visible text should tell readers where they will go.
- Id gives one element a unique name within the page, so a link, label, or script can point to it.
- Href contains the destination of a link. A value starting with # points to an id on the same page.
The first example link points to #faq. Check whether that destination exists relative to the document. A link changes where readers go; it does not perform an action such as saving a form.
What Should You See?
The page should display “Questions” as a heading, followed by its related content. Change the heading text and refresh the browser to see the result.
Read only the headings, from top to bottom. Do they tell a sensible story? If not, move sections or choose levels that match the content.
Try It Yourself
- Add a second heading and give it an id different from faq and answer.
- Save your changes, open or refresh the page, and compare the result with the original example.
- Tell a friend what your change did. If you are not sure, undo it, refresh the page, and compare.
Common Beginner Mistakes
- Copying an HTML card with its id unchanged and creating two elements with the same ID.
- Avoid picking tags just for their default bold, italic or spaced appearance. Use CSS for presentation.
Key Takeaways
- Duplicate IDs make links and scripts unpredictable, because an ID is meant to identify exactly one element in a document.
- An h2 starts a major section beneath the page topic.
- Use a class for repeated styles and an id only for a unique target. Inspect the page or validate it when a fragment link goes to the wrong place.