Headings & Paragraphs

Headings and paragraphs are the backbone of most web page content.

Headings

HTML provides six heading levels: <h1> through <h6>. <h1> is the most important; <h6> is the least.

<h1>Page title</h1>
<h2>Major section</h2>
<h3>Subsection</h3>
<h4>Sub-subsection</h4>
<h5>Minor heading</h5>
<h6>Smallest heading</h6>

Headings are not just “bigger text”

Browsers render headings in larger, bolder type by default — but that is a side effect, not the purpose. Headings communicate document structure to browsers, search engines, and assistive technologies like screen readers.

A screen reader user can jump between headings to navigate a page without reading everything. If you use headings just to make text bigger, that navigation breaks.

Use CSS to control size. Use headings to communicate structure.

Heading hierarchy rules

Use only one <h1> per page — it represents the page’s main topic.
Do not skip levels. An <h3> should follow an <h2>, not jump from <h1>.

Correct hierarchy:

<h1>My Recipes</h1>
<h2>Pasta Dishes</h2>
<h3>Spaghetti Carbonara</h3>
<h2>Salads</h2>
<h3>Caesar Salad</h3>

Incorrect — skipping a level:

<h1>My Recipes</h1>
<h3>Spaghetti Carbonara</h3>

<h3> with no <h2> before it implies a structure that does not exist.

Paragraphs

The <p> element creates a paragraph. Each <p> gets a blank line of space above and below it by default.

<p>This is the first paragraph. It can be as long as needed.</p>

<p>This is the second paragraph. The browser handles the spacing.</p>

Do not fake paragraphs with `<br>`

A common beginner mistake is using <br> repeatedly to create visual gaps:

This is some text.<br><br><br>
This looks like a new paragraph.

This is fragile and has no semantic meaning. Use separate <p> elements instead:

<p>This is some text.</p>
<p>This is a new paragraph.</p>

<br> is for line breaks within a paragraph — like the lines of a postal address or a poem — not for spacing between blocks of content.

Exercise

Open index.html in VS Code. You already have an <h1> and a <p> in the body. Expand the page:

Below your first <p>, add an <h2> for a subtopic of your <h1> subject.
Add a <p> below that <h2> with a sentence or two about the subtopic.
Add a second <h2> for a different subtopic, with its own <p>.

Your <body> should look something like this (with your own content):

<body>
  <h1>Mountain Hiking</h1>
  <p>Hiking is one of the best ways to explore the outdoors.</p>
  <h2>Gear</h2>
  <p>Good boots and a reliable pack are the two most important pieces of gear.</p>
  <h2>Trail difficulty</h2>
  <p>Trails are rated from easy to strenuous based on elevation gain and distance.</p>
</body>

Save and open (or refresh) index.html in your browser. Notice how the browser gives each heading a different default size — that is styling, not structure. The structure is the hierarchy you created.

Recap

<h1>–<h6> create headings. Use them for structure, not visual size.
Use one <h1> per page and do not skip heading levels.
<p> creates a paragraph. Use one <p> per logical block of text.
Do not use <br> to create spacing between paragraphs — use separate <p> elements.