Lesson 2: Structure & meaning

What you'll learn

• How to use headings and sections
• Why strong and em add meaning
• Simple spacing with CSS

Explanation:

Think of headings as chapter titles in a book.

<section>
  <h2>My section</h2>
  <p>Some text</p>
</section>

Try it

1. Add another section with a new heading.
2. Use <strong> on one important word.

Headings hierarchy

Use headings like chapters in a book. h1 is the main page title (one per page), h2 are top-level sections, and h3 and below are subsections. Keep the order logical: don't skip from h1 to h4 — follow a clear outline.

<h1>My Page Title</h1>
<h2>Section A</h2>
<h3>Subsection A.1</h3>
<h2>Section B</h2>

Semantic elements

Semantic elements give meaning to page regions and help browsers, search engines, and assistive tech understand your layout:

• <header> — page or article header (logo, title, nav).
• <nav> — navigation links.
• <main> — main content of the document.
• <article> — self-contained piece of content (blog post).
• <section> — thematic grouping within an article.
• <footer> — footer with metadata or links.

Using these elements improves semantics and accessibility.

Semantic article example

<article>
  <header>
    <h2>Article title</h2>
  </header>
  <section>
    <h3>Intro</h3>
    <p>Some opening text.</p>
  </section>
  <section>
    <h3>Details</h3>
    <p>More details here.</p>
  </section>
  <footer>Published date</footer>
</article>

Text emphasis — strong vs em

Use <strong> to mark important content (strong importance) and <em> to indicate emphasis (often read with intonation by screen readers). These tags carry meaning, not just visual style.

<p>This is <strong>important</strong> and this is <em>emphasized</em>.</p>

Page outline

Headings form a page outline. Each heading defines a new section which helps users scan the page and helps tools build a table of contents.

Accessibility basics

Meaningful, semantic structure helps screen readers and keyboard users navigate. Use headings, landmarks (nav, main), and descriptive link text. Keep content order logical.

Small CSS for readable typography

body { font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial; line-height: 1.6; padding: 20px; }