📝 HTML Foundations

Headings & Paragraphs

⏱ 1 hr2 topicsLive playground
🎯 By the end: You can structure a page with a correct heading hierarchy, write paragraphs properly, and avoid the common 'using headings just to make text big' trap.

Text is the heart of the web, and HTML gives it shape with two everyday elements: headings and paragraphs. Used well, they make a page easy to scan for people and for search engines. Used carelessly, they quietly hurt both.

1Six levels of heading

HTML has six heading levels, from <h1> (most important) down to <h6> (least). Think of them like a document outline:

<h1>Cooking at Home</h1>        (the page title — only one)
  <h2>Breakfast</h2>            (a major section)
    <h3>Quick eggs</h3>        (a sub-topic)
  <h2>Lunch</h2>
One rule above all: use exactly one <h1> per page — it is the page's main title — and never skip levels (don't jump from <h2> straight to <h4>). Screen readers let users jump between headings, so a clean order is a real kindness.
Do not pick a heading just because it looks big. If you want big text, that is a job for CSS later. Headings are about meaning and structure, not size.
Key points
  • Headings run from <h1> (most important) to <h6> (least).
  • Use exactly one <h1> per page and never skip levels.
  • Choose a heading for its meaning, not its size — size is CSS's job.

2Paragraphs and line breaks

Body text goes in <p> (paragraph) elements. Each paragraph is a separate block with space around it. Pressing Enter in your code does not create a new paragraph — you must wrap each one in its own <p> tags.

For a soft line break within a paragraph — like lines of an address or a poem — use the void element <br>. But do not use a pile of <br> tags to fake spacing between paragraphs; that is what separate <p> elements are for.

Headings & paragraphs in action
HTML
CSS
Live preview
What's happening: Notice the outline: one h1, then h2 sections under it. The <br> inside the last paragraph makes a single line break without starting a new paragraph.
Key points
  • Each paragraph needs its own <p> tags — pressing Enter in code does nothing.
  • <br> makes a soft line break inside a paragraph.
  • Don't stack <br> tags to space things out — use separate paragraphs.

★ Practical: a structured mini-article

Build a small article in any playground:

  1. One <h1> with the article's title.
  2. Two <h2> sections, each followed by a <p> paragraph.
  3. Inside one paragraph, use a <br> for a single line break.
  4. Check you used exactly one <h1> and did not skip from h1 to h3.

Ready to test yourself?

Take the short quiz. Score 60% or more to mark this lesson complete.

Start the quiz →

💡 Log in to save your progress and earn the certificate.

← Previous
Attributes
Next →
Lists