CONTENT

Headings & Text

Structure readable content with headings, paragraphs and emphasis.

After this lessonUse heading levels in a logical hierarchy.

How it works

Headings create a document outline for people, search engines and assistive technology. Use one clear H1 for the page topic, then H2/H3 levels for nested sections.

Do not choose heading levels just for visual size. Style appearance with CSS while keeping semantic order meaningful.

REAL WORK

Structure a work instruction, dashboard explanation or public tutorial so readers can scan it quickly.

SYNTAX

The pattern

<h1>Main page title</h1>
<h2>Section</h2>
<p>Paragraph text.</p>

Example

<h1>Shift Report</h1>
<h2>Safety</h2>
<p>No open incidents.</p>

TRY IT

Edit and preview

Change the HTML on the left. The sandboxed preview updates on the right.

<h1>Shift Report</h1>
<h2>Safety</h2>
<p>No open incidents.</p>

QUICK CHECK

Which element is normally the main page heading?

Progress is stored only in this browser. No account required.