Lesson 3 — Fundamentals

Text Elements

HTML provides specific elements for headings, paragraphs, and emphasised text, letting you communicate the meaning of your content, not just its appearance.

Headings and Paragraphs

HTML has six heading levels, <h1> through <h6>, in decreasing order of importance. A page should have exactly one <h1> describing its main topic, with <h2> and below used for subsections.

HTML — Headings and text formatting 
<h1>Web Development Basics</h1>
<h2>What You'll Learn</h2>
<p>This course covers <strong>HTML</strong>, <em>CSS</em>, and basic layout techniques.</p>
<p>Line one<br>Line two on a new line</p>
<hr>
<p>Content below a horizontal rule.</p>

Emphasis and Meaning

<strong> marks text as important (typically bold), while <em> marks text with stress emphasis (typically italic). Both carry semantic meaning that screen readers announce differently, unlike the purely visual <b> and <i> tags.

Common Mistakes

  • Skipping heading levels (e.g. jumping from <h1> straight to <h4>) purely to get a smaller font, which breaks the document's logical outline.
  • Using multiple <h1> tags on one page instead of one main heading with <h2> subsections.
  • Using <br> repeatedly to create paragraph spacing instead of using actual <p> elements.
  • Choosing <b>/<i> for meaning when <strong>/<em> better reflect semantic importance.

Professional Tip

Think of headings as an outline, the way you'd structure a document in a word processor. Search engines and screen reader users rely heavily on correct heading order to understand your page's structure.

Your Turn

Write a short "recipe" page with one h1 title, two h2 section headings ("Ingredients" and "Instructions"), and paragraphs under each using strong for key ingredient names.

Mini Quiz

How many h1 elements should a well-structured page typically have?