Headings, Paragraphs and Text Formatting in HTML

by

In this post, you will learn how to use HTML to format your text just like chapters, paragraphs, and highlights in a book.

We will cover:

  • How to create headings for structure
  • How to write paragraphs for readable content
  • How to format text (bold, italic, underline, etc.)

Let’s begin!

HTML Headings

HTML headings are used to define titles and subtitles on a web page. They give structure to your content, making it easier for users and search engines to understand your page’s structure.

HTML offers six levels of headings

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Each one represents a different level of importance or hierarchy, so use them properly.

  • <h1> is the most important (usually the main title of a page)
  • <h6> is the least important (used for minor sub-sections)

Hierarchy Example

Here is how you might structure headings on a blog post:

<h1>How to Cook Pasta</h1>              <!-- Page Title -->

<h2>Ingredients</h2>                    <!-- Section -->
<h3>Main Ingredients</h3>               <!-- Sub-section -->
<h3>Optional Add-ons</h3>

<h2>Instructions</h2>
<h3>Boiling Water</h3>
<h3>Cooking Pasta</h3>

<h2>Serving Tips</h2>

Pro Tips

  • Use only one <h1> per page (usually the title or main topic).
  • Follow a logical order: Don’t jump from <h1> to <h4> – Keep a consistent structure.
  • Headings help accessibility: Screen readers use them for navigation.
  • Important for SEO: Search engines use headings to understand page content.

HTML Paragraphs

The <p> tag is used to create paragraphs.

<p>This is a paragraph of text. Paragraphs help in organizing content in readable blocks.</p>
  • Paragraphs automatically add spacing before and after.
  • They are best for longer pieces of text or descriptions.

Formatting Text in HTML

You can use different tags to style and emphasize parts of your text.

TagPurposeExample
<strong>Bold text<strong>Important!</strong>
<em>Italic text<em>Pay attention</em>
<u>Underline text<u>Underline this</u>
<br>Line breakLine one<br>Line two
<hr>Horizontal line<hr> adds a divider

Example:

<p>This is <strong>bold</strong> and this is <em>italic</em>.</p>
<p>This one is <u>underlined</u></p>
<p>Line one<br>Line two</p>
<hr>

Final Summary

TagUse
<h1> to <h6>Headings (title structure)
<p>Paragraphs
<strong>Bold important text
<em>Emphasize (italic)
<br>Line break
<hr>Horizontal divider

Practice Challenge

Write an HTML snippet that includes:

  • An <h1> heading
  • Two <p> paragraphs
  • One word in bold
  • One word in italic
  • A horizontal line between them

Sharing Is Caring...