Heading Level 1

This is a paragraph under an h1. Your framework should define a clear visual hierarchy for headings and paragraphs, with readable line height and spacing.

Heading Level 2

Strong text should stand out, while emphasized text should be noticeable but not obnoxious. Small text is often used for fine print or secondary information.

Heading Level 3

You can use the mark element to highlight text, and the del element or ins element to indicate changes.

Heading Level 4

API is an important term in web development. The November 16, 2025 date element can represent times and dates.

Heading Level 5

Make sure lower-level headings like h5 and h6 are still readable and obviously “smaller” in the hierarchy.

Heading Level 6

Body copy should be comfortable to read on both mobile and desktop, without tiny fonts or giant walls of text.

“Good defaults are invisible until they’re not there.”

Inline quotes with q elements should also look reasonable.

Unordered List

A basic unordered list:

• Learn HTML & CSS
• Practice JavaScript
• Build projects

Nested Unordered List

• Frontend
  • HTML
  • CSS
  • JavaScript
• Backend
  • Node.js
  • Databases

Ordered List

1. Fork the repo.
2. Link the framework.
3. Style all the things.

Description List

Accessibility

Designing for all users, including keyboard and screen-reader users.

Performance

Ensuring pages load quickly and efficiently.

Maintainability

Code that future you does not hate.

This paragraph contains a normal external link, an internal jump link to the forms section, and a placeholder link.

Make sure you style a:link, a:hover, a:active, a:visited, and a:focus-visible in a way that is both attractive and accessible.

The horizontal rule above is an hr element. Don’t forget it.

Inline code looks like const answer = 42; inside a sentence.

// Preformatted code block
function greet(name) {
  console.log(`Hello, ${name}!`);
}

greet("world");

The kbd element indicates user input from the keyboard, e.g. Ctrl + S. The samp element represents sample program output.

Images should not overflow the container. Use sensible defaults for img and figure.

This section exists mostly to remind you to test selection styles: try selecting this text to see how ::selection looks with your colors.