Text is one of the most important parts of any website. HTML provides several tags to format and display text properly.

Headings in HTML

HTML headings are used to create titles and subtitles on a webpage. There are six heading tags in HTML:

<h1>This is Heading 1</h1>
<h2>This is Heading 2</h2>
<h3>This is Heading 3</h3>
<h4>This is Heading 4</h4>
<h5>This is Heading 5</h5>
<h6>This is Heading 6</h6>
HTML Headings
HTML Headings
  • <h1> is used for the main heading of the page.
  • <h2> is used for subheadings.
  • If further sections exist under <h2>, use <h3>, and so on.
  • Headings also help with SEO (Search Engine Optimization) by making web pages easier to find on Google.

<h1> (Main Heading)

  • <h1> is the largest and most important heading on a webpage.
  • It should be used only once per page for better SEO.
  • Using multiple <h1> tags can confuse both users and search engines about the page’s structure.

<h2> (Subheadings)

  • <h2> is used for major sections under the main heading.
  • It helps break content into well-defined sections.

<h3> to <h6> (Smaller Headings)

  • These headings are used for further subdivisions.
  • <h3> is for sections under <h2>, while <h4>, <h5>, and <h6> are for smaller, less important subsections.
  • <h6> is the smallest heading.
  • Follow a logical hierarchy (<h1> → <h2> → <h3>) instead of jumping levels (e.g., <h1> to <h4>), as it improves readability and accessibility.

Paragraphs in HTML

The <p> tag is used to create paragraphs:

<p>This is a paragraph of text. It provides information to users.</p>
  • By default, paragraphs have automatic spacing above and below them.
  • They make content easier to read.
  • Even if you add multiple spaces inside <p>, the browser will display only one space between words.
  • Extra spaces and line breaks are automatically removed when the page is displayed.
  • Paragraphs cannot be nested inside each other—each <p> tag should contain only one block of text.

Line Breaks and Horizontal Rules

<p>This is the first line.<br />This is the second line.</p>
<hr />
<p>This is a new paragraph.</p>
Line Breaks and Horizontal Rules
Line Breaks and Horizontal Rules
  • <br /> (line break): It is used to add line breaks inside the middle of a paragraph.
  • <hr /> (horizontal rule): Inserts a visual divider to separate sections. It is used to indicate a change in theme, such as a new topic in a book or a new scene in a play.

The Preformatted Text element

The <pre> tag is used for pre-formatted text:

<pre>
    This is a pre-formatted text.
    It preserves spaces and line breaks.
</pre>
  • Unlike <p>, text inside <pre> keeps its original formatting, including spaces and line breaks.
  • The content is displayed in a monospace font (e.g., Courier).
  • It is useful for displaying poems, lyrics, code snippets, or text that needs exact spacing.

Paragraph vs Preformatted Text Element

The following example shows the difference between paragraph and preformatted text elements.

<p>
    Twinkle, twinkle, little star,
    How I wonder what you are!
    Up above the world so high,
    Like a diamond in the sky.
</p>
<pre>
    Twinkle, twinkle, little star,
    How I wonder what you are!
    Up above the world so high,
    Like a diamond in the sky.
</pre>
Paragraph vs Preformatted Text Element
Paragraph vs Preformatted Text Element

Run these code snippets in an online HTML playground to see how it works!

Fun Fact 🎉

The first-ever web page only had text and links—no images, no colors, and no styles!

❮ Previous
Next ❯