Learn HTML and CSS: Headings and paragraphs

Headings and paragraphs

Maggie has typed out the chalkboard: one long wall of text. "Could it look a bit tidier? Even I get lost in my flavours."

Six levels of headings

HTML has six levels of headings: <h1> to <h6>. <h1> is the title of the whole page, <h2> a chapter, <h3> a section of that chapter, and so on.

Choose a heading for what it means, not for how big it is: you set the size later with CSS. Search engines and screen readers use the headings as a table of contents.

So: one <h1> per page, and never skip a level. Under an <h2> comes an <h3>, not an <h4>.

index.html

1<main>2  <h1>Cold Comfort</h1>3  <h2>Our flavours</h2>4  <h3>Fruity</h3>5  <p>Strawberry, lemon and mango.</p>6  <h3>Creamy</h3>7  <p>Vanilla, pistachio and honeycomb.</p>8  <h2>Opening hours</h2>9  <p>Every day from 1 pm to 10 pm.</p>10</main>

ijssalon.example

Paragraphs and white space

Ordinary text goes in a paragraph: <p>. Each <p> starts on a new line, with some space above and below.

Careful: the browser ignores how you type your code. Line breaks and extra spaces all become one space. Look at the first paragraph below: in the code it's on two lines, on the page it's on one.

So if you want a new paragraph, you need a new <p>.

index.html

1<main>2  <h2>About us</h2>3  <p>Maggie has been making ice cream on the seafront4     for twenty summers.</p>5  <p>Fresh every morning,    with milk from a farm on the Downs.</p>6</main>

ijssalon.example

Try it yourself

Maggie typed the text without tags. Make Opening hours and Ice cream cakes chapters, and the two sentences below them paragraphs.

1<main>2  <h1>Cold Comfort</h1>3  Opening hours4  Every day from 1 pm to 10 pm, Sundays too.5  Ice cream cakes6  Order your cake two days in advance.7</main>

1body {2  margin: 0;3  font-family: system-ui, sans-serif;4  background: #fff8f0;5  color: #3b2a1a;6}7header {8  padding: 24px 16px;9  background: #ffd6e0;10}11.logo {12  display: inline-block;13  margin: 8px 0 0;14  padding: 6px 18px;15  border-radius: 999px;16  background: #ffffff;17  font-size: 28px;18}19.slogan {20  margin: 8px 0 0;21}22main {23  padding: 8px 16px 24px;24}

ijssalon.example

Ready for more?

The full lesson has 6 exercises, from easy to challenging, with hints, points and a streak you can build.

Start the lesson

Six levels of headings

HTML has six levels of headings: <h1> to <h6>. <h1> is the title of the whole page, <h2> a chapter, <h3> a section of that chapter, and so on.

Choose a heading for what it means, not for how big it is: you set the size later with CSS. Search engines and screen readers use the headings as a table of contents.

So: one <h1> per page, and never skip a level. Under an <h2> comes an <h3>, not an <h4>.

index.html

1<main>2  <h1>Cold Comfort</h1>3  <h2>Our flavours</h2>4  <h3>Fruity</h3>5  <p>Strawberry, lemon and mango.</p>6  <h3>Creamy</h3>7  <p>Vanilla, pistachio and honeycomb.</p>8  <h2>Opening hours</h2>9  <p>Every day from 1 pm to 10 pm.</p>10</main>

ijssalon.example

Paragraphs and white space

Ordinary text goes in a paragraph: <p>. Each <p> starts on a new line, with some space above and below.

Careful: the browser ignores how you type your code. Line breaks and extra spaces all become one space. Look at the first paragraph below: in the code it's on two lines, on the page it's on one.

So if you want a new paragraph, you need a new <p>.

index.html

1<main>2  <h2>About us</h2>3  <p>Maggie has been making ice cream on the seafront4     for twenty summers.</p>5  <p>Fresh every morning,    with milk from a farm on the Downs.</p>6</main>

ijssalon.example

Try it yourself

Maggie typed the text without tags. Make Opening hours and Ice cream cakes chapters, and the two sentences below them paragraphs.

1<main>2  <h1>Cold Comfort</h1>3  Opening hours4  Every day from 1 pm to 10 pm, Sundays too.5  Ice cream cakes6  Order your cake two days in advance.7</main>

1body {2  margin: 0;3  font-family: system-ui, sans-serif;4  background: #fff8f0;5  color: #3b2a1a;6}7header {8  padding: 24px 16px;9  background: #ffd6e0;10}11.logo {12  display: inline-block;13  margin: 8px 0 0;14  padding: 6px 18px;15  border-radius: 999px;16  background: #ffffff;17  font-size: 28px;18}19.slogan {20  margin: 8px 0 0;21}22main {23  padding: 8px 16px 24px;24}

ijssalon.example