The small text-and-status pieces that fill a page — definition lists, callouts, alerts, notifications, badges, tags, and labels. Each with a live demo and the HTML & CSS.
01 · Definition Lists
Pair terms with descriptions
A <dl> holds term/description pairs — perfect for glossaries, metadata, or FAQs. <dt> is the term, <dd> is its description.
HTML
The structure and content of a page.
CSS
The presentation — colors, layout, type.
JavaScript
The behavior and interactivity.
HTML
<dl>
<dt>HTML</dt>
<dd>The structure and content of a page.</dd>
<dt>CSS</dt>
<dd>The presentation — colors, layout, type.</dd>
</dl>
Alerts confirm success, flag errors, or warn. Pair color with an icon and text so meaning never depends on color alone, and use role="alert" for important ones.
Your changes were saved.
Something went wrong — please try again.
Your session expires in 5 minutes.
HTML
<div class="alert success" role="alert">
<i class="icon-check"></i> Your changes were saved.
<button class="close" aria-label="Dismiss">×</button>
</div>
<div class="alert error" role="alert">
<i class="icon-x"></i> Something went wrong.
<button class="close" aria-label="Dismiss">×</button>
</div>
<div class="alert warn">
<i class="icon-warning"></i> Your session expires in 5 minutes.
<button class="close" aria-label="Dismiss">×</button>
</div>
// Dismiss an alert when its close button is clicked
document.querySelectorAll('.alert .close').forEach(function (btn) {
btn.addEventListener('click', function () {
btn.closest('.alert').remove();
});
});
Accessibility: the icon + words carry the meaning, so it still reads for color-blind users. Use role="alert" only for messages that should interrupt and be announced.
04 · Notification
A dismissible toast
A notification (toast) is a small floating card confirming an action, usually with a title, message, and a close button. In a real app it appears in a corner and fades after a few seconds.
Saved to your library
“Header Patterns” was added.
HTML
<div class="toast" role="status">
<i class="icon"></i>
<div>
<p class="title">Saved to your library</p>
<p>"Header Patterns" was added.</p>
</div>
<button class="close" aria-label="Dismiss">×</button>
</div>
// Dismiss the toast: fade out, then remove from the DOM
document.querySelectorAll('.toast .close').forEach(function (btn) {
btn.addEventListener('click', function () {
var toast = btn.closest('.toast');
toast.classList.add('dismissing');
setTimeout(function () { toast.remove(); }, 250);
});
});
05 · Badge
A small count or status dot
Badges show a count (unread messages) or a quick status (“New”). Position a count over an icon with relative/absolute positioning.
Badge vs. tag vs. label: a badge is a count/indicator, a tag classifies content (often removable), and a label shows a status. Small differences, but using the right one keeps your UI consistent.
08 · Heading
A clear type hierarchy
Headings (<h1>–<h6>) give a page structure and rank. A display face like Poppins from Google Fonts makes them stand out from the body text.
Browse and grab fonts on the Google Fonts page — copy its <link> into your <head>, then set font-family.
09 · Paragraph
Readable body text
Body copy wants a comfortable line-height and a measure of ~50–75 characters. A humanist sans like Inter from Google Fonts reads cleanly at small sizes.
Good paragraphs are easy on the eyes: enough line-height to separate lines, and a width that keeps the eye from getting lost on the way back to the start.
Capping the measure around 65 characters does most of the work — longer lines are surprisingly tiring to read.
HTML
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
<p>Good paragraphs are easy on the eyes…</p>
CSS
p {
font-family: 'Inter', sans-serif;
font-size: 1rem;
line-height: 1.7; /* breathing room between lines */
max-width: 65ch; /* ~65 characters per line */
}
10 · Pull Quote
Pull a line out to grab attention
A pull quote lifts a striking sentence from the article and sets it large. An elegant serif like Playfair Display from Google Fonts gives it editorial flair.
“Good design is invisible — you only notice it when it's missing.”
HTML
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital@1&display=swap" rel="stylesheet">
<p class="pull-quote">“Good design is invisible…”</p>
Use a <ul> when order doesn't matter (bulleted) and an <ol> when it does (numbered, like steps). The browser handles the markers; CSS can restyle them.
Unordered (ul)
Apples
Oranges
Pears
Ordered (ol)
Preheat the oven
Mix the batter
Bake 20 minutes
HTML
<ul> <!-- unordered: bullets -->
<li>Apples</li>
<li>Oranges</li>
</ul>
<ol> <!-- ordered: numbers -->
<li>Preheat the oven</li>
<li>Mix the batter</li>
</ol>
CSS
ul { list-style: disc; } /* • bullets */
ol { list-style: decimal; } /* 1. 2. 3. numbers */
li { margin: 4px 0; } /* space out items */
ul, ol { padding-left: 22px; }/* room for the markers */
13 · Figure
Group media with its caption
A <figure> wraps an image (or chart, code, video) together with its <figcaption>, so the two are linked semantically rather than just sitting near each other.
Figure 1. A figure groups an image with its caption.
The <figcaption> is the caption itself — a short description or photo credit tied to the figure. Keep it small, muted, and just below the media.
Sunrise over the bay. Photo: J. Parker / Unsplash.
HTML
<figure>
<img src="bay.jpg" alt="Sunrise over the bay">
<figcaption><b>Sunrise over the bay.</b> Photo: J. Parker.</figcaption>
</figure>
CSS
figcaption {
font-size: .8rem;
color: #6b7280; /* muted, secondary to the image */
margin-top: 6px;
}
figcaption b { color: #374151; } /* lead phrase stands out */
15 · Article
A self-contained piece of content
An <article> wraps content that stands on its own — a blog post, news story, or comment — so it makes sense if syndicated or read in isolation. It usually opens with a heading.
Why semantic HTML matters
By Dr. G · May 2026
An <article> tells browsers and screen readers that this block is a complete, standalone unit — not just a generic <div>.
That structure powers reader modes, search snippets, and assistive tech with no extra work.
HTML
<article>
<h2>Why semantic HTML matters</h2>
<p class="byline">By Dr. G · May 2026</p>
<p>An <article> is a complete, standalone unit…</p>
</article>
A testimonial pairs a short quote with the person's name, role, and (often) a rating and avatar. Keep the quote brief and the attribution clear so it reads as credible.
“The live demos made everything click — I shipped my first site the same week.”
Jamie L.
Front-end student
HTML
<figure class="testimonial">
<div class="stars" aria-label="5 out of 5">★★★★★</div>
<blockquote>“The live demos made everything click.”</blockquote>
<figcaption class="who">
<img class="avatar" src="jamie.jpg" alt="">
<div><b>Jamie L.</b><span>Front-end student</span></div>
</figcaption>
</figure>
The native <details> / <summary> elements give you an accordion FAQ with zero JavaScript — click a question to expand it. Try it below.
Do I need to know how to code?
No — start with the Get Started pages and follow along. You'll pick up HTML and CSS as you go.
Is the Playground free?
Yes. Every page, demo, and code snippet is free to use and learn from.
Can I use these snippets in my project?
Absolutely — copy any HTML/CSS and adapt it to your own work.
HTML
<details>
<summary>Do I need to know how to code?</summary>
<p>No — start with the Get Started pages.</p>
</details>
<details>
<summary>Is the Playground free?</summary>
<p>Yes, completely.</p>
</details>
// Single-open accordion: opening one closes the others.
// Native <details> already toggles on its own without JS.
document.querySelectorAll('.cp-faq details').forEach(function (d) {
d.addEventListener('toggle', function () {
if (!d.open) return;
document.querySelectorAll('.cp-faq details').forEach(function (other) {
if (other !== d) other.open = false;
});
});
});
<details> is built into the browser — accessible, keyboard-friendly, and open/closes with no script. The JavaScript above just adds single-open accordion behavior.