Headings, paragraphs and text

Structure your writing with headings and paragraphs, and add emphasis the right way.

Lesson 2 of 120% of the track complete

What you'll learn

How to write headings, paragraphs, line breaks and emphasised text.

Why it matters

Almost every page is mostly text. Using the right tag for each piece of text helps readers scan the page and helps search engines and screen readers understand it.

Explanation

HTML has six heading levels, from <h1> (most important) to <h6> (least important). Use one <h1> for the page title and the others for sub-sections.

Normal text goes in a paragraph, <p>. The browser adds space above and below each paragraph for you.

Some small tags change the meaning of a few words:

<strong> marks text as important (shown bold).
<em> marks text with emphasis (shown italic).
<br> forces a line break. It has no closing tag.
<hr> draws a horizontal line between sections.

Example

HTML

<h1>My Pet Rabbit</h1>
<p>Meet <strong>Biscuit</strong>, a very <em>curious</em> rabbit.</p>

<h2>What Biscuit eats</h2>
<p>Hay, carrots and the occasional leaf.</p>

<hr>

<p>Biscuit's address:<br>The Hutch<br>Back Garden</p>

Step-by-step walkthrough

<h1> sets the page title.
The first <p> contains two inline tags. <strong> makes "Biscuit" important, <em> stresses "curious".
<h2> starts a sub-section called "What Biscuit eats".
<hr> draws a line.
<br> inside the last paragraph breaks the address into three lines without starting a new paragraph.

Try it yourself

Add an <h2> section about your own hobby, and make one word <strong>.

Headings and textHTML / CSS

Ctrl+Enter to run

Common mistakes

Skipping heading levels such as going from <h1> straight to <h4>. Keep the order.
Using <br> to make space between paragraphs. Use separate <p> tags and CSS spacing instead.
Using <b> and <i> for meaning. They only change looks. Prefer <strong> and <em>.
Several <h1> tags on one page. Use one per page.

Quick quiz

Question 1 of 4

Which tag is the most important heading?

Question 2 of 4

Which tag marks text as important?

Question 3 of 4

How do you add a line break inside a paragraph?

</p><p><br><hr>

Question 4 of 4

Why choose heading levels carefully?

Because the browser refuses to show wrong onesBecause they describe the page outline to readers and screen readersBecause h3 loads faster than h2

Summary

<h1> to <h6> give your page an outline; use one <h1>.
<p> holds paragraphs; <strong> and <em> add meaning.
<br> and <hr> are tags with no closing tag.

Next: links, the "hyper" in HyperText.