Text

Course 1 · Ch 2
Text Basics
Headings, paragraphs, and the text formatting tags that give written content meaning, not just emphasis

Almost every web page is, at its core, structured text — and HTML provides a specific set of tags for exactly that. The key idea running through this entire chapter: HTML tags describe what a piece of text means semantically, while CSS (covered in the separate CSS courses) controls how it actually looks. Choosing the right tag matters even before any styling is applied.

Headings — h1 Through h6

Six levels of heading, from most important (<h1>) to least (<h6>) — used to create a logical outline of the page's content, similar to chapter and section headings in a book.

<h1>Page Title</h1> <h2>A Major Section</h2> <h3>A Subsection</h3>

Page Title

A Major Section

A Subsection

Never skip heading levels just to get a smaller default size
Using <h4> instead of <h2> purely because it renders smaller breaks the document's logical outline — screen readers and search engines both rely on heading levels reflecting genuine document structure. If a heading needs to look smaller, use CSS to style an <h2> rather than reaching for a lower heading number for purely visual reasons.

Paragraphs

<p>This is one paragraph of text. It can span multiple sentences and even multiple lines in the source code — the browser doesn't care about line breaks inside the tag itself.</p> <p>This is a separate paragraph.</p>

Browsers automatically add space between separate <p> elements — there's no need to manually insert <br> tags between paragraphs to create that visual gap.

Text Formatting Tags

<strong>
Marks text as having strong importance — typically rendered bold. Semantic: "this matters."
<em>
Marks text with emphasis — typically rendered italic. Semantic: "say this differently when read aloud."
<b>
Bold text with NO implied importance — purely visual. Rare to need this over <strong> in practice.
<i>
Italic text with NO implied emphasis — used for things like foreign words or technical terms, not for stressing a point.
<small>
Side comments, fine print, legal disclaimers — semantically "less important," not just visually smaller.
<mark>
Highlighted text, as if marked with a highlighter pen — often used to show search-match results.
<sub> / <sup>
Subscript and superscript — chemical formulas (H2O), footnote markers, mathematical notation.
<br>
A single line break WITHIN a block of text — a void element (Chapter 1). Should be rare; most spacing should come from proper paragraph/heading structure, not manual line breaks.
strong/em vs b/i — the distinction is meaning, not appearance
Visually, <strong> and <b> often look identical (bold), and the same goes for <em> and <i> (italic). The real difference is semantic: screen readers may change their tone of voice for <strong>/<em> content, and search engines weigh them differently — <b>/<i> carry no such meaning, purely visual styling with zero semantic weight.

Horizontal Rules and Line Breaks

<p>End of one section.</p> <hr> <p>Start of the next, visually separated section.</p>

<hr> represents a thematic break between sections of content — not just a decorative horizontal line, even though that's how it renders by default.

A Realistic Example, Combined

<h1>Product Review</h1> <p>This product is <strong>excellent value</strong> for the price, though I <em>really</em> wish the battery lasted longer.</p> <p><small>This review reflects my personal experience only.</small></p>

Chapter 2 Quick Reference

  • h1-h6 — logical document outline, never skip levels for visual sizing alone
  • p — paragraphs, with automatic spacing between them
  • strong/em — semantic importance/emphasis; b/i — purely visual, no semantic meaning
  • small — fine print/disclaimers; mark — highlighted text
  • sub/sup — subscript/superscript
  • br — a single line break within text, used sparingly
  • hr — a thematic break between sections, not just a decorative line
  • Next chapter: lists — ordered, unordered, and definition lists