class
Reusable names for components, states and styling groups.
Platform under construction
HTML Class and ID Attributes
Learn class, id as part of the HTML attribute system: what they configure, where they belong and which mistakes to avoid.
Class and ID
Class and id are the two most common hooks in HTML.
The class attribute groups elements. The id attribute identifies one exact element. They look similar in HTML, but they are used very differently in CSS, JavaScript, anchors, labels and automated tests.
A strong project uses class names for repeatable patterns and ids only when uniqueness matters. That keeps the page flexible as the design grows.
Attribute group:
class, id. Reusable CSS hooks, unique anchors and label targets. What belongs here
Learn attributes by purpose, not by memorizing random names.
id
One unique name for a section, form field, anchor or script target.
for + id
A label uses for to point to the matching input id.
href="#id"
A link can jump to an element with a matching id.
Syntax in context
Classes can repeat; ids should not.
Use class for shared styling. Use id when one element must be targeted directly or when a label or anchor needs a destination.
<section id="contact" class="content-panel"> <h2>Contact</h2> <label for="email">Email address</label> <input id="email" class="field" name="email" type="email"> </section>
Good versus weak
Small attribute choices can change behavior, accessibility and security.
Good
<section id="contact" class="content-panel"> <h2>Contact</h2> <label for="email">Email address</label> <input id="email" class="field" name="email" type="email"> </section>
Weak
<section id="box"> <input id="box" type="email"> <p class="blue large shadow margin-top">Email</p> </section>
Rules that matter
Use these rules before publishing real HTML.
One id per page
If you need the same styling on many elements, use class instead.
Name by purpose
Prefer names such as card, lesson-title or nav-link over color-only names.
Labels need ids
A label with for="email" must match an input with id="email".
Anchors need stable ids
Changing an id can break bookmarks and internal links.
Production thinking
Attributes are tiny pieces of HTML with real product impact.
Why does this matter?
Attributes are small, but they change how an element works. A good attribute can make a link usable, an image understandable, a form easier to complete or a script safer to load.
Accessibility
A correct label/id relationship makes form fields easier to use with screen readers and larger click targets.
Production note
Class and id names become part of your frontend contract. Choose names that can survive design changes.
Live code lab
Change the code and run the example.
Edit the HTML or CSS, then use Run to refresh the preview. The preview is isolated, so links and forms stay inside this practice area.
Mini assignment
Try this now.
- Change one tag, attribute or text value in the example.
- Run the preview and describe exactly what changed.
- Reset the lab and repeat the same change without looking at the original.
Practice assignment
Do this before moving to the next lesson.
- Change one meaningful part of the HTML, not only the visible text.
- Run the preview and check whether the result still makes semantic sense.
- Explain why the element or attribute you changed belongs in this exact place.
Try it yourself
Class for style, id for target
Self-check
Before you continue, prove that you own this lesson.
Do not only read this page. Answer these questions out loud or write the answers in your own notes. If one answer feels vague, revisit the examples before moving on.
- Can you explain what problem this lesson solves in a real website?
- Can you identify the most important tag or attribute from this lesson?
- Can you name one accessibility mistake this lesson helps prevent?
- Can you write one good example and one weak example without copying the page?
- Can you explain when you would use this in production and when you would avoid it?