📝 Text Elements and Headings

Why Text Structure Matters

Modern sites are full of images, video, and interactivity — yet the words are still what carry the meaning. HTML's job is to describe what each piece of text is: this is the main title, that is a paragraph, this is a quotation. That description is called semantics, and it is invisible to sighted readers but essential to everyone (and everything) else.

💡 A useful analogy: Think of an HTML document like a book. Headings are the chapter and section titles in the table of contents, paragraphs are the running prose, and quotations are the pull-quotes set apart from the body. If you scrambled those roles — printed a chapter title in body text and a footnote in giant bold — the book would still be readable, but nobody could navigate it. Screen readers and search engines navigate by structure, so getting the roles right is what makes your page usable.

HTML gives us two broad families of text elements. Block-level elements (headings, paragraphs, blockquotes) each start on a new line and stack vertically. Inline elements (emphasis, code, links) flow within a line of text. This lesson focuses on the block-level structure; the next two lessons cover lists and inline formatting in depth.

The Heading Hierarchy

HTML offers six levels of heading, from <h1> (most important) down to <h6>. Together they form the document's outline — the same nested structure you would see in a well-organized report.

Writing headings in HTML

<h1>Baking Sourdough at Home</h1>
<p>An introduction to the craft of naturally leavened bread.</p>

<h2>Building Your Starter</h2>
<p>A starter is a living culture of wild yeast and bacteria.</p>

  <h3>Day One: Flour and Water</h3>
  <p>Combine equal parts flour and water…</p>

  <h3>Days Two to Seven: Feeding</h3>
  <p>Discard half and refresh daily…</p>

<h2>Mixing the Dough</h2>
<p>Once your starter is bubbly and active…</p>

Paragraphs & Whitespace

The paragraph element, <p>, is the workhorse of body text. It is a block-level element: each paragraph starts on a new line, spans the full available width, and gets a margin above and below it by default.

<p>This is a paragraph. It groups one coherent thought.</p>
<p>This is a second paragraph. The browser adds space between them.</p>

How HTML treats whitespace

One rule surprises nearly every beginner: HTML collapses whitespace. Multiple spaces, tabs, and newlines in your source are rendered as a single space. This lets you indent your markup for readability without affecting the output.

<p>This      has      many      spaces      in the source.</p>

When you genuinely need a space that will not collapse and will not wrap to a new line — for example, keeping a number and its unit together — use the non-breaking space entity  :

<p>The car reached 10&nbsp;km/h before stalling.</p>

Line Breaks & Preformatted Text

The line break: <br>

Use <br> only where a line break is part of the content itself — postal addresses, poetry, and song lyrics are the classic cases.

<address>
  Ada Lovelace<br>
  12 Analytical Way<br>
  London, EC1A 1BB<br>
  United Kingdom
</address>

Do not use line breaks to create vertical spacing (that is CSS margin/padding) or to build lists (use <ul>/<ol>, covered in the next lesson).

Preformatted text: <pre>

The <pre> element is the exception to the whitespace-collapsing rule: it preserves every space and newline exactly as written, and renders in a monospace font. It is ideal for code, ASCII diagrams, and any text where alignment matters. The common pattern pairs it with <code>:

<pre><code>function greet(name) {
  console.log(`Hello, ${name}!`);
}

greet('World'); // Hello, World!
</code></pre>

Quotations

HTML distinguishes short inline quotes from longer block quotes.

Inline quotes: <q>

For a short quotation that sits inside a sentence, use <q>. The browser adds the correct quotation marks for the document's language automatically — so you don't type them yourself.

<p>As the sign warned, <q>mind the gap</q> before stepping aboard.</p>

Block quotes: <blockquote>

For a longer quotation set apart as its own block, use <blockquote>. The optional cite attribute records the source URL (machine-readable, usually not displayed), and a visible attribution belongs in a <footer> with a <cite> element naming the work or author.

<blockquote cite="https://www.w3.org/People/Berners-Lee/">
  <p>The power of the Web is in its universality. Access by
  everyone regardless of disability is an essential aspect.</p>
  <footer>— <cite>Tim Berners-Lee</cite></footer>
</blockquote>

Accessibility & SEO

A correct heading outline is one of the highest-leverage accessibility wins you can make. Screen-reader users routinely pull up a list of a page's headings and jump straight to the section they want — the same way a sighted reader skims. If your headings are out of order or faked with styled <div>s, that navigation collapses.

Search engines lean on the same structure. They give extra weight to text in headings — especially the <h1> — to understand what a page is about. So a clean outline helps humans and discoverability at the same time. A few durable rules:

• Exactly one <h1> per page, describing the whole page.
• Never skip levels going down (h2 → h4 is a bug).
• Set the document language with <html lang="en">, and mark passages in another language with lang so screen readers pronounce them correctly.
• Choose elements by meaning: <blockquote> for a quote, not merely to indent text.

Hands-on Exercise

<div class="page-title">Understanding HTML Elements</div>

<div class="section-title">Introduction</div>
<div class="paragraph">
  HTML is the standard language for creating web pages.
</div>

<div class="quote">
  The power of the Web is in its universality.
  <div class="quote-author">- Tim Berners-Lee</div>
</div>

<h1>Understanding HTML Elements</h1>

<h2>Introduction</h2>
<p>HTML is the standard language for creating web pages.</p>

<blockquote>
  <p>The power of the Web is in its universality.</p>
  <footer>— <cite>Tim Berners-Lee</cite></footer>
</blockquote>

Best Practices

Summary & Quiz

📚 Further Reading

• MDN — The heading elements
• W3C WAI — Headings tutorial
• web.dev — Headings and sections

🚀 What's Next?

You now have the block-level skeleton of a document. Next we add another way to organize content: lists. You'll learn when to reach for ordered, unordered, and definition lists, and how to nest them cleanly.