Skip to content
UNWIND Code Lab Co-funded by the European Union
Headings, Paragraphs and Text Tags
Log In

Headings, Paragraphs and Text Tags

  • 5 min reading
  • 7 min activity
0 of 4 tasks doneup to 90 XP
  1. Which level?15 XPTo do
  2. Heading outline30 XPTo do
  3. Meaning or look?15 XPTo do
  4. Slide bug: the café sign30 XPTo do

Mission 1 continues. Today the body of your page gets its structure: headings, paragraphs and words with a special meaning.

In this lesson
  • Use <h1> to <h6> in order, with one <h1>.
  • Write paragraphs and add id, class and style.
  • Choose between <br>, <hr>, <strong>, <b>, <em>, <i> and <span>.
Remember

Last time you filled the head. Where does the text go that visitors read on the page? Think first, then open the answer.

Show the answer

Into the body. Today you give it a structure.

Headings

HTML has six heading levels, from <h1> to <h6>. They show how important a heading is, not how big it is: CSS sets the size later. Use one <h1> for the main topic of the page, <h2> for its sections and <h3> for parts of a section. Do not skip a level.

Worked example

The headings of this module, written as HTML:

<h1>Web Development with HTML, CSS and JavaScript</h1>
<h2>Unit 1: HTML Basics</h2>
<h3>Inside the Head</h3>
<h3>Headings, Paragraphs and Text Tags</h3>
<h2>Unit 2: Links, Media, Tables, Forms and Semantic HTML</h2>

Headings work like a table of contents. Visitors scan them, search engines read them, and people who use a screen reader, a program that reads the page aloud, can jump from heading to heading.

Grouping

Which level?

Required 15 XP

These seven headings come from a course slide about a web design training.

Now write the same outline in code. First a question from the last lesson.

Practice

Heading outline

Required 30 XP

The seven lines from the course slide are plain text. Put each line into the right heading tag: tap at the start of a line, tap an opening tag, then tap at the end of the line and tap the closing tag.

Paragraphs and attributes

<p> makes a paragraph. The browser adds space before and after it. Always close it with </p>.

Attributes add information to a tag. id is a unique name for one element. class is a group name: many elements can share it, and CSS and JavaScript use it. style holds CSS for this one element. The course slides show this example:

<h2 id="history">HTML then and now</h2>
<p id="par1" class="note" style="color: #043E74;">In HTML4, tags changed the
font, size and colour of text. HTML5 moved most of this work to CSS.</p>

Line breaks and lines

<br> breaks a line inside one block of text, like the lines of an address or a poem. Do not use it to make space between paragraphs. <hr> marks a change of topic and shows a line across the page. Both have no closing tag.

<p>Monday to Friday: 9 to 18<br>Saturday: 10 to 14</p>
<hr>
<p>A new topic starts here.</p>

One course slide puts <br> between paragraphs. That is a small slide bug, and you fix it below.

Meaning or look?

<strong>

Important text, like a warning. Shown in bold.

<em>

Stress: you would say these words differently. Shown in italics.

<b>

Draws attention without extra importance, like key words or a product name. Bold.

<i>

A different voice: a foreign word, a technical term, the name of a ship. Italics.

The slides say that <b> and <i> have no meaning. That was true in old HTML. Today they have the small meanings above.

Grouping

Meaning or look?

Required 15 XP

Which tag fits each piece of text best?

<span> has no meaning at all. It marks a few words so that CSS or JavaScript can find them:

<p>This is a normal paragraph and <span>this part</span> has its own colour.</p>
span { color: #BE5527; }

Slide bug: the café sign

A fictional café used the slide's <br> pattern for its sign. Make the address one paragraph with a line break, and mark the opening days as important.

Practice

Slide bug: the café sign

Required 30 XP

This code follows a course slide that puts <br> between paragraphs. It has a small bug. Make the address one paragraph with a line break, and mark "Open every day" as important. Café Lumen is a fictional café.

Heading
A title for the page or a part of it: <h1> to <h6>.
Paragraph
A block of text: <p>.
Attribute
Extra information in an opening tag, like id="history".
Line break
A new line inside the same block: <br>.
Screen reader
A program that reads a page aloud.

In short

  • One <h1>, then <h2> and <h3> in order. Headings show importance, not size.
  • <br> breaks a line inside one paragraph. <hr> separates two topics.
  • <strong> and <em> add meaning. <span> only marks words for CSS and JavaScript.
Next time

Quotes, code, highlights, changes and three kinds of lists.

Sources

  1. MDN Web Docs (2026). <h1>-<h6>: The HTML Section Heading elements.
  2. MDN Web Docs (2026). Headings and paragraphs.
  3. MDN Web Docs (2026). id and class.
  4. MDN Web Docs (2026). <br>: The Line Break element.
  5. MDN Web Docs (2026). <hr>: The Thematic Break element.
  6. MDN Web Docs (2026). Emphasis and importance.
  7. MDN Web Docs (2026). <b> and <i>.
  8. MDN Web Docs (2026). <span>: The Content Span element.

End of the lesson

This lesson: 0 of 100 XP

Code Cards in this lesson: 9

  • <h1>-<h6>
  • <p>
  • <br>
  • <strong>
  • <em>
  • <span>
  • id
  • class
  • style
Next: Special Text and Lists