When should you use id instead of class?

[HTMLCodeRunner Editorial]

Several cards need the same visual style, but only one contact section should be a jump target.

[HTMLCodeRunner Editorial]

Detailed answer

An id identifies one element in the document, such as a fragment destination or label target.

A class groups elements for styling or scripting. Multiple elements can share a class; duplicate IDs make references ambiguous. Use descriptive names that remain meaningful when the layout changes.

Example

<section id="contact" class="panel"><h2>Contact</h2></section>
<a href="#contact">Jump to contact</a>

Understanding the behavior

An id identifies one element within a document and can be used by fragment links, labels and scripts. Classes are reusable groups. Repeating an id in a component can make a label or selector reach the wrong instance.

Practical implementation notes

Render the component twice and test every label and fragment link. Reusable templates should generate distinct IDs and update all matching references, rather than only renaming the input.

How to check it

Reuse the panel class on another section but keep contact as a unique id.

Expected result

All panels can share styling while #contact identifies just one destination.

Watch out: Repeated cards normally share classes rather than IDs.

Read the reference ↗

[Author]

Posts