Text, Headings, and Paragraphs

Welcome back.

In the previous lesson, you learned the structure of an HTML document.

Now we move into the content itself.

Text.

Headings.

Paragraphs.

The things people actually read.

Because a web page without organized text is just a wall of words.

And nobody wants to fight a wall of words before breakfast.

What You’ll Learn

In this lesson, you’ll learn:

• how headings work in HTML;
• the difference between h1, h2, h3, and other heading levels;
• how to write paragraphs with p;
• how to emphasize text with strong and em;
• when to use br;
• when to use hr;
• how to make text structure clear and readable.

Headings in HTML

HTML has six heading levels:

<h1>Main Heading</h1>
<h2>Section Heading</h2>
<h3>Subsection Heading</h3>
<h4>Smaller Heading</h4>
<h5>Even Smaller Heading</h5>
<h6>The Smallest Heading</h6>

The most important heading is h1.

Usually, a page should have one main h1.

Think of it as the title of the page.

Then you use h2 for major sections, h3 for subsections, and so on.

Like a book:

Book Title
  Chapter
    Section
      Smaller part

HTML headings are not just about size.

They describe structure.

This is important for:

• readers;
• screen readers;
• search engines;
• page organization;
• your future self trying to understand the page later.

A Good Heading Structure

Example:

<h1>My Travel Blog</h1>

<h2>Trip to Rome</h2>
<p>Rome is full of history, food, and people crossing the street like they have diplomatic immunity.</p>

<h2>Trip to Milan</h2>
<p>Milan is elegant, fast, and somehow always wearing better shoes than you.</p>

<h3>Favorite Places in Milan</h3>
<p>The cathedral, the galleries, and every place where coffee appears quickly.</p>

This structure makes sense.

The h1 is the page topic.

The h2 elements are major sections.

The h3 is a smaller section inside one of those topics.

Good structure is calm.

Bad structure is a shopping bag full of tags.

Avoid Skipping Heading Levels

Try not to jump from h1 directly to h4.

This is not ideal:

<h1>My Page</h1>
<h4>Small Section</h4>

Better:

<h1>My Page</h1>
<h2>Small Section</h2>

Heading levels should follow a logical order.

Not because the browser will explode.

It will not.

But because your content becomes easier to understand.

And we like content that does not behave like a puzzle designed by a tired raccoon.

Paragraphs

Paragraphs are created with the p tag:

<p>This is a paragraph.</p>

A paragraph is a block of text.

Example:

<p>HTML helps us structure web pages clearly.</p>
<p>Each paragraph should contain one idea or a small group of related ideas.</p>

Do not put all text into one huge paragraph.

This is painful:

<p>This is a very long text with many ideas and no breaks and the reader is now trapped inside a tunnel of words with no exit and no coffee.</p>

Better:

<p>This is the first idea.</p>
<p>This is the second idea.</p>
<p>This is the third idea.</p>

Readable text is friendly text.

Strong Text

Use strong for important text:

<p>This is <strong>very important</strong>.</p>

The browser usually shows strong text in bold.

But the meaning is more important than the appearance.

strong means the text has strong importance.

Use it when something really matters.

Not every three words.

If everything is important, nothing is important.

Also the page starts shouting.

Emphasized Text

Use em for emphasis:

<p>I <em>really</em> like clean HTML.</p>

The browser usually shows em text in italics.

But again, the meaning matters.

em changes the stress of the sentence.

Example:

<p>I said I like HTML.</p>
<p>I said I <em>like</em> HTML.</p>

The second sentence emphasizes the word “like”.

Tiny tag.

Different feeling.

HTML is sneaky like that.

Line Breaks

The br tag creates a line break:

<p>First line<br>Second line</p>

br does not need a closing tag.

It can be useful for:

• addresses;
• poems;
• short line breaks where the break has meaning.

Example:

<p>
  Viktor Holovin<br>
  Vigevano, Italy<br>
  Web Developer
</p>

Do not use br just to create space between sections.

This is not good:

<p>First paragraph.</p>
<br>
<br>
<p>Second paragraph.</p>

For spacing, CSS is better.

HTML is for structure.

CSS is for appearance.

Do not make HTML do CSS work.

It already has a job.

Horizontal Rule

The hr tag creates a thematic break:

<hr>

It represents a shift or separation in content.

Example:

<h2>About Me</h2>
<p>I build websites and learn technologies step by step.</p>

<hr>

<h2>Contact</h2>
<p>You can contact me by email.</p>

Use hr when there is a real content separation.

Do not use it only because the page looks empty.

That is decoration.

CSS will handle decoration later.

Let HTML remain dignified.

Create a Text Practice Page

Create a new file:

touch text.html

Add this:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Text Practice</title>
</head>
<body>
  <h1>Text Practice</h1>

  <h2>About This Page</h2>
  <p>This page helps me practice headings and paragraphs in HTML.</p>
  <p>Good text structure makes a page easier to read.</p>

  <h2>Important Note</h2>
  <p>HTML is about <strong>structure</strong>, not decoration.</p>
  <p>I am learning it <em>step by step</em>.</p>

  <hr>

  <h2>Contact</h2>
  <p>
    Viktor Holovin<br>
    Web Developer<br>
    Italy
  </p>
</body>
</html>

Open it in the browser.

You now have a page with headings, paragraphs, emphasis, a line break, and a horizontal rule.

A small page.

A properly structured page.

Very respectable.

Common Mistakes

Using headings only for size

This is wrong thinking:

<h1>Big text</h1>
<h6>Small text</h6>

Headings are not just font sizes.

They are structure.

Use them to organize content.

Too many h1 elements

Usually, one page should have one main h1.

This is better:

<h1>My Page</h1>
<h2>About</h2>
<h2>Contact</h2>

Not this:

<h1>My Page</h1>
<h1>About</h1>
<h1>Contact</h1>

The page does not need three kings.

One is enough.

Using br for layout

Do not use many br tags to create space.

Bad:

<br>
<br>
<br>

Use CSS later for visual spacing.

HTML should describe meaning.

Practice

Create a page about a hobby.

It should include:

• one h1;
• at least two h2 sections;
• one h3 subsection;
• four paragraphs;
• one strong element;
• one em element;
• one hr;
• one example using br.

Example topics:

• karate;
• programming;
• yoga;
• travel;
• cooking;
• learning languages.

Choose something real if possible.

Real text is better than fake text.

Fake text has no soul.

Mini Challenge

Create a file:

article.html

Build a simple article page.

It should include:

• page title in the browser tab;
• article title as h1;
• introduction paragraph;
• three sections with h2;
• one subsection with h3;
• emphasized words;
• important words;
• a final horizontal rule;
• a short author/contact block using br.

No CSS.

No JavaScript.

Only clean HTML text structure.

Summary

Today you learned:

• HTML has six heading levels from h1 to h6;
• h1 is usually the main page heading;
• heading levels should follow a logical order;
• p creates paragraphs;
• strong marks important text;
• em marks emphasized text;
• br creates a meaningful line break;
• hr creates a thematic break;
• HTML text should be organized, readable, and meaningful.

Text is the heart of most web pages.

If the structure is clear, the page feels better immediately.

Even before CSS arrives wearing sunglasses.

Next Lesson

In the next lesson, we’ll learn lists and organization.

Because sometimes content needs order.

And sometimes it needs bullets.

Very dramatic bullets.