Learning objectives
Write a useful heading hierarchy; distinguish importance from stress emphasis; mark quotations, code, and machine-readable dates.
Prerequisites
Understand elements and attributes. Be able to create a page with a heading and paragraph.
Create an outline a reader can navigate
Headings identify the structure of an explanation. Use a main h1 for the page’s subject, h2 for its major sections, and h3 for subsections within an h2. Choose the level by the relationship between topics rather than by its default font size. CSS can change size without changing the outline.
A heading should summarize the content that follows. Specific labels such as Compare monthly plans are easier to scan than vague labels such as More information. A page is not necessarily improved by adding many headings: each one should introduce a meaningful unit. Paragraphs group sentences that develop one idea. Start a new paragraph when the purpose or topic changes, not after every line on your screen.
Use text semantics deliberately
Strong indicates importance, seriousness, or urgency. Em marks stress emphasis that can change how a sentence is interpreted. Bold and italic styling alone do not establish either meaning. The b and i elements have other uses, such as drawing attention without added importance or marking an alternative voice, but neither should be a default styling wrapper.
Use blockquote for a longer quotation and q for an inline quotation. A cite attribute can carry a source URL; it is not displayed automatically. Add a normal visible link when readers need to visit that source. The cite element identifies a work’s title, not an arbitrary person’s name. Mark code with code, keyboard input with kbd, sample output with samp, and variables with var.
The time element can associate human-readable wording with a machine-readable datetime. This matters when the visible wording is ambiguous, such as Next Monday. The datetime must still describe the actual date or time. Do not invent structured meaning merely to decorate prose.
Preserve text across different presentations
HTML normally collapses sequences of ordinary whitespace. Inserting several spaces in source is not a layout technique. A pre element preserves whitespace for content where alignment is meaningful, such as source code; long lines still need an overflow strategy. Use br for a meaningful line break within content, such as an address, rather than to manufacture vertical spacing between paragraphs.
Working example
<article>
<h1>Workshop preparation</h1>
<h2>Before you arrive</h2>
<p><strong>Bring your booking confirmation.</strong> You can show it on your phone.</p>
<h3>Using your own laptop</h3>
<p>Install the editor <em>before</em> the session.</p>
</article>Another example
<p>The next workshop is <time datetime="2026-11-07">7 November 2026</time>.</p>
<p>Save the file with <kbd>Ctrl</kbd> + <kbd>S</kbd>.</p>
<pre><code><h1>Hello</h1></code></pre>Expected output
The first example produces a three-level outline with a strongly marked requirement and stress on before. The second displays a readable date, key names, and literal HTML source rather than a live heading.
Common mistakes
Avoid skipping to h4 because h2 looks too large. Do not wrap an entire article in strong or put block-level paragraphs inside a heading. Escape < and & when teaching markup inside code so the browser does not interpret the example as page structure.
Accessibility and browser notes
Screen reader users often navigate by headings. Clear hierarchy and descriptive text improve that route. Do not rely on voice software to announce every formatting distinction in a particular way; essential meaning must remain understandable in the words themselves.
Practice
Write a workshop notice with a main heading, two section headings, an important deadline, and a machine-readable date.
Review the solution and reasoning
<h1>Community workshop</h1>
<h2>Registration</h2>
<p><strong>Register by <time datetime="2026-11-01">1 November 2026</time>.</strong></p>
<h2>What to bring</h2>
<p>A notebook and a reusable bottle.</p>The two h2 headings are peers under the h1. Strong marks the deadline’s importance, and time supplies an unambiguous calendar value. Styling can be added without altering those relationships.