Skip to content

HTML Headings, Paragraphs and Text Formatting (h1 to h6, strong, em)

Most of the web is text, and how you mark it up decides whether people can scan it, whether screen reader users can jump around it and whether search engines understand what the page is about. This lesson covers the elements you will use on every page: headings, paragraphs, line breaks and the small elements that give words meaning.

Quick answer

Use <h1> to <h6> for headings in order (one main h1, then h2 sections, h3 inside those), <p> for paragraphs, <strong> for importance and <em> for stress. Choose elements for meaning, not for size: size and colour are CSS jobs.

15 min read and practice · Content checked on 20 October 2026

In this lesson you will

  • Build a clear heading outline for any page
  • Choose between strong, em, b and i correctly
  • Show quotes, code and abbreviations with the right elements

Headings make the outline

HTML has six heading levels, <h1> to <h6>. They work like the outline of a report: h1 is the title of the page, h2 starts a main section, h3 a subsection inside it, and so on. Screen reader users often move through a page by headings, and many open a list of all headings first to decide where to go.

Do not skip levels to get a smaller font: going from h2 straight to h4 leaves a hole in the outline. If a heading looks too big, keep the right level and change its size with CSS. Most pages need one h1 that says what the page is about, matching its <title> in spirit.

Try it: A heading outline
Code
ResultUpdates as you type
Console
  1. Console messages, errors, form data and clicked links appear here.

Read only the headings: they should tell you the shape of the page without the paragraphs.

Paragraphs, line breaks and white space

Wrap each paragraph in <p>. The browser collapses white space: several spaces or new lines in your code become a single space on the page. That means you can indent your code freely, but it also means pressing Enter in your code does not create a new line on the page.

Use <br> only where the line break is part of the content, such as an address or a poem. Do not use several <br> tags to make space between blocks; use separate paragraphs and CSS margins. <hr> marks a change of topic between paragraphs and shows as a line by default.

When spacing must be kept exactly, such as code or ASCII art, use <pre>: it keeps every space and line break. For code, put <code> inside <pre>.

Try it: White space, br and pre
Code
ResultUpdates as you type
Console
  1. Console messages, errors, form data and clicked links appear here.

Words with meaning

<strong> marks something as important, serious or urgent, such as a warning. <em> marks stress that changes the meaning of a sentence, the way you would say a word louder. Both look bold and italic by default, but the point is meaning: screen readers and search engines get information from them.

<b> and <i> still exist, for text that is styled differently without extra importance: <b> for keywords or product names in a review, <i> for a technical term, a thought or a phrase in another language. When unsure, ask "is this more important?" (strong) or "is this just set apart?" (b or i).

A few more you will meet often: <code> for code inside a sentence, <blockquote> for a long quotation with <cite> for the source title, <q> for a short inline quote, <abbr title="..."> for an abbreviation with its full form, <mark> for highlighted text and <small> for side comments such as legal notes.

Try it: Meaningful inline elements
Code
ResultUpdates as you type
Console
  1. Console messages, errors, form data and clicked links appear here.

Hover over "UAE" in the result to see the full form from the title attribute.

Common mistakes

  • Choosing headings by size

    Using <h4> because it "looks right" breaks the outline. Pick the level by position in the page, then style it with CSS.

  • Making text bold with a heading

    A bold sentence inside a paragraph is not a heading. Use <strong> (or CSS) instead, or screen readers will list it as a section.

  • Stacking br tags for spacing

    <br><br><br> creates empty lines that screen readers may announce and that break on small screens. Separate paragraphs and CSS margins do it properly.

Exercise

Write a short article: one h1, at least two h2 sections with a paragraph each, one strong warning and one abbreviation with a title that gives its full form.

Code
ResultUpdates as you type
Console
  1. Console messages, errors, form data and clicked links appear here.
  • There is an h1 with text
  • There are at least two h2 headings
  • There are at least three paragraphs
  • A strong element marks something important
  • An abbr has a title with the full form
Show one possible solution
<h1>My city</h1>
<p>A short guide to Sharjah.</p>

<h2>Food</h2>
<p>Try the fish market. <strong>Go early:</strong> it gets busy after 10 am.</p>

<h2>Getting there</h2>
<p>Sharjah is in the <abbr title="United Arab Emirates">UAE</abbr>, next to Dubai.</p>

Quick quiz

  1. 1. A page has h1, then h2, and you need a subsection inside that h2. Which heading do you use?
  2. 2. What happens to five spaces typed between two words inside <p>?
  3. 3. Which element fits "Do not share your OTP with anyone"?
  4. 4. Which element keeps all spaces and line breaks exactly as typed?
Answer every question to check.

Finished the lesson?

Questions people ask

Can a page have more than one h1?

HTML allows it, but the browser does not build a smarter outline from it, so screen reader users just hear several top-level headings. One h1 per page is the clear, widely recommended choice.

What is the difference between strong and b?

<strong> means the content is important. <b> only draws attention without adding importance, such as keywords in a summary. They look the same by default; the difference is what they tell software and readers.

Do headings help SEO?

Clear headings help search engines and people understand what each part of a page covers. They are not a trick: a heading stuffed with keywords helps nobody. Write headings that describe the section honestly.

How do I add a blank line between paragraphs?

Do not add one in HTML. Paragraphs already get a margin from the browser, and you control the exact space with the CSS margin property, which you learn in the CSS course.

How do I write the less-than sign in text without starting a tag?

Use the character reference &lt; for < and &amp; for &. So 5 &lt; 10 shows "5 < 10". In most other places, such as > in text, the plain character is fine.

Sources

Facts in this lesson were checked against these official pages on 20 October 2026.

Code examples stay in English and run in a sandbox on your device. Arabic text is pending native review. If you spot a mistake, tell us through the contact page.