class
Reusable hook for CSS and JavaScript.
Platform under construction
Classes & ID
Learn Classes & ID with practical examples for structure, layout semantics, metadata, embedded content, scripts, accessibility, SEO and live practice.
HTML structure and layout
Classes and IDs connect HTML to CSS, JavaScript and page navigation.
The class attribute is reusable. Many elements can share the same class, which makes it the normal hook for styling components and repeated patterns.
The id attribute should be unique on a page. It is useful for fragment links, labels, JavaScript targets and special one-off sections.
Professional HTML uses classes and IDs deliberately. Random names make CSS hard to maintain and JavaScript fragile.
id
Unique identifier for one element on the page.
fragment link
A link such as #pricing that jumps to an id.
naming
Clear names make components easier to understand.
Syntax and structure
Use classes for repeated patterns and IDs for unique targets.
A class can appear many times. An id should appear once per page.
Clear reusable classes and unique ID
<section id="pricing" class="section section--dark">
<article class="price-card">
<h2>Starter</h2>
</article>
</section>
<a href="#pricing">View pricing</a>
Confusing or duplicated IDs
<div id="card">First card</div> <div id="card">Second card</div> <p class="green-big-bold-left">Text</p>
Rules that matter
Structure should stay readable before the design layer is applied.
Layout-focused HTML is strongest when meaning, grouping, metadata and behavior hooks all have a clear reason to exist.
Reuse classes
Classes are perfect for repeated styling such as cards, buttons and sections.
Keep IDs unique
Duplicate IDs break anchors, labels and JavaScript assumptions.
Name by purpose
Prefer price-card over blue-box when the visual style may change.
Avoid over-specific names
A class should survive reasonable design changes.
Use IDs for anchors
Sections that need direct links can use stable IDs.
Do not depend on CSS only
A class name does not create semantic meaning by itself.
Production thinking
HTML structure affects design, accessibility, SEO and long-term maintenance.
Why does this matter?
This matters because classes and IDs are the contract between HTML, CSS, JavaScript, tests and analytics.
Accessibility
IDs often connect labels to inputs and controls to descriptions. Duplicate IDs can break those relationships.
Production note
Stable class naming is a team skill. A clean naming system prevents CSS from turning into an unsearchable pile of exceptions.
SEO note
Descriptive IDs can create useful section URLs. They also help internal links point directly to meaningful parts of a page.
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.
- Add a third card with the same class.
- Change the id and update the fragment link.
- Rename one visual class to a purpose-based class.
Practice assignment
Do this before moving to the next lesson.
- Create a section with one unique id.
- Create three repeated cards sharing one class.
- Explain why each class or id exists.
Try it yourself
Build reusable cards with classes
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?