HTML Headings, Paragraphs, and Text Formatting

Learn all HTML text elements — h1 through h6 headings, paragraphs, line breaks, strong, em, span, div, blockquote, code, pre, and inline vs block elements with practical examples.

Text is the core of most webpages. HTML provides a rich set of elements for structuring and formatting text — from main headings to inline code snippets to blockquotes. Understanding when to use each element correctly matters for both presentation and meaning.

Paragraphs

The <p> element defines a paragraph of text. Browsers automatically add margin above and below each paragraph.

html example

<p>This is the first paragraph. It can be as long as needed and will wrap automatically.</p>

<p>This is the second paragraph. Browsers add spacing between paragraphs by default.</p>

Important: Extra spaces and line breaks inside HTML source code are ignored by browsers. The browser collapses multiple spaces into one, and newlines into spaces.

Example

<p>Hello World How are you?</p>  Hello World How are you?

To create visual line breaks, you need explicit elements.

Line Breaks and Horizontal Rules

`<br>` — Line Break

Forces a line break within a block of text. Use sparingly — for addresses or poetry where line breaks carry meaning:

html example

<address>
  WoHoTech<br>
  123 Main Street<br>
  Bengaluru, Karnataka 560001<br>
  India
</address>

Do not use <br> to add vertical spacing between paragraphs — that's what CSS margin is for.

`<hr>` — Horizontal Rule

Creates a thematic break between content sections:

html example

<p>Section one content here.</p>

<hr>

<p>Section two begins here — a topic shift.</p>

The <hr> is a semantic element (not just visual) — it signals a thematic change in content.

Text Formatting Elements

Bold and Strong

Example

<p>Remember: <strong>never share your password</strong> with anyone.</p>  <p>Product name: <b>WoHoTech Pro</b></p>

When to use which:

<strong> — the text is genuinely important (affects accessibility: screen readers may announce it differently)
<b> — bold for stylistic reasons with no added importance

Italic and Emphasis

Example

<p>I said I <em>might</em> attend, not that I <em>would</em>.</p>  <p>The Latin phrase <i>carpe diem</i> means "seize the day".</p> <p>Read <i>Harry Potter</i> before watching the films.</p>

Other Inline Formatting

Example

<u>Underlined text</u>  <del>Original price: ₹999</del> <ins>Sale price: ₹599</ins>  <p>Water is H<sub>2</sub>O</p> <p>Area = πr<sup>2</sup></p>  <p>Main content <small>(footnote or disclaimer text)</small></p>  <p>Search result with <mark>highlighted term</mark> in context.</p>  <p>The <abbr title="HyperText Markup Language">HTML</abbr> specification.</p>  <p>As stated in <cite>The Design of Everyday Things</cite>.</p>  <p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy.</p>  <p>The result is stored in variable <var>x</var>.</p>

Code Elements

Inline Code

html example

<p>Use the <code>console.log()</code> function to print output.</p>
<p>The <code>font-size</code> property controls text size in CSS.</p>

Preformatted Text and Code Blocks

The <pre> element preserves whitespace and line breaks exactly as written:

html example

<pre>
  Name: John Doe
  Age:  28
  City: Mumbai
</pre>

Combine <pre> and <code> for multi-line code samples:

html example

<pre><code>function greet(name) {
  return "Hello, " + name + "!";
}

console.log(greet("World"));
</code></pre>

Block vs Inline Elements

This distinction is fundamental to understanding HTML layout.

Block Elements

Take up the full width available
Start on a new line
Can contain other block or inline elements

html example

<h1>Heading (block)</h1>
<p>Paragraph (block)</p>
<div>Division (block container)</div>
<ul>, <ol>, <li>, <table>, <form>, <section>, <article>

Inline Elements

Take up only as much width as their content
Flow within a line of text
Should only contain other inline elements (not block elements)

html example

<a href="#">Link (inline)</a>
<strong>Bold (inline)</strong>
<em>Italic (inline)</em>
<span>Generic inline container</span>
<img>, <input>, <button>, <code>, <label>

The div and span Containers

<div> and <span> are generic containers with no semantic meaning — used purely for grouping and styling:

Example

<div class="card"> <h2>Card Title</h2> <p>Card description text.</p> </div>  <p>My favourite colour is <span class="highlight">blue</span>.</p>

Rule: Prefer semantic elements (<section>, <article>, <nav>) over <div> when the content has meaning. Use <div> only when no semantic element fits.

Blockquote and Quote Elements

Example

<blockquote cite="https://example.com/source"> <p>The web is more a social creation than a technical one. I designed it for a social effect — to help people work together — and not as a technical toy.</p> <footer>— Tim Berners-Lee</footer> </blockquote>  <p>Einstein said <q>Imagination is more important than knowledge.</q></p>

Practical Text Example

A real-world article section using proper HTML text elements:

html example

<article>
  <h1>Understanding HTTP Status Codes</h1>

  <p>
    When a browser requests a webpage, the server responds with an 
    <abbr title="HyperText Transfer Protocol">HTTP</abbr> status code 
    that indicates the outcome of the request.
  </p>

  <h2>Common Status Codes</h2>

  <p>
    The most common code you encounter is <strong>200 OK</strong> — 
    meaning the request succeeded. Here are the key categories:
  </p>

  <ul>
    <li><code>2xx</code> — <em>Success</em>: request was received and processed</li>
    <li><code>3xx</code> — <em>Redirection</em>: further action needed</li>
    <li><code>4xx</code> — <em>Client error</em>: problem with the request</li>
    <li><code>5xx</code> — <em>Server error</em>: problem on the server side</li>
  </ul>

  <h3>The Infamous 404</h3>

  <p>
    A <mark>404 Not Found</mark> response means the requested resource 
    does not exist on the server. As Tim Berners-Lee wrote in 
    <cite>Weaving the Web</cite>:
  </p>

  <blockquote>
    <p>The 404 error is not a failure of the user — it is a failure of 
    the web designer to maintain working links.</p>
  </blockquote>

  <p>To check a URL manually, press <kbd>F12</kbd> to open DevTools, 
  navigate to the <b>Network</b> tab, and reload the page.</p>
</article>

Summary

Element	Type	Purpose
`<h1>`–`<h6>`	Block	Headings hierarchy
`<p>`	Block	Paragraph of text
`<br>`	Inline	Force line break
`<hr>`	Block	Thematic section break
`<strong>`	Inline	Important text (semantic bold)
`<b>`	Inline	Visual bold (no semantic weight)
`<em>`	Inline	Stressed emphasis (semantic italic)
`<i>`	Inline	Visual italic (technical terms, etc.)
`<code>`	Inline	Inline code snippet
`<pre>`	Block	Preformatted text preserving whitespace
`<blockquote>`	Block	Extended quotation
`<q>`	Inline	Short inline quotation
`<mark>`	Inline	Highlighted/relevant text
`<del>` / `<ins>`	Inline	Deleted / inserted content
`<sub>` / `<sup>`	Inline	Subscript / superscript
`<div>`	Block	Generic block container
`<span>`	Inline	Generic inline container
`<abbr>`	Inline	Abbreviation with tooltip

*Next: Links and Navigation*

Paragraphs

The <p> element defines a paragraph of text. Browsers automatically add margin above and below each paragraph.

html example

<p>This is the first paragraph. It can be as long as needed and will wrap automatically.</p>

<p>This is the second paragraph. Browsers add spacing between paragraphs by default.</p>

Important: Extra spaces and line breaks inside HTML source code are ignored by browsers. The browser collapses multiple spaces into one, and newlines into spaces.

Example

<p>Hello World How are you?</p>  Hello World How are you?

To create visual line breaks, you need explicit elements.

Line Breaks and Horizontal Rules

`<br>` — Line Break

Forces a line break within a block of text. Use sparingly — for addresses or poetry where line breaks carry meaning:

html example

<address>
  WoHoTech<br>
  123 Main Street<br>
  Bengaluru, Karnataka 560001<br>
  India
</address>

Do not use <br> to add vertical spacing between paragraphs — that's what CSS margin is for.

`<hr>` — Horizontal Rule

Creates a thematic break between content sections:

html example

<p>Section one content here.</p>

<hr>

<p>Section two begins here — a topic shift.</p>

The <hr> is a semantic element (not just visual) — it signals a thematic change in content.

Text Formatting Elements

Bold and Strong

Example

When to use which:

<strong> — the text is genuinely important (affects accessibility: screen readers may announce it differently)
<b> — bold for stylistic reasons with no added importance

Italic and Emphasis

Example

Other Inline Formatting

Example

Code Elements

Inline Code

html example

<p>Use the <code>console.log()</code> function to print output.</p>
<p>The <code>font-size</code> property controls text size in CSS.</p>

Preformatted Text and Code Blocks

The <pre> element preserves whitespace and line breaks exactly as written:

html example

<pre>
  Name: John Doe
  Age:  28
  City: Mumbai
</pre>

Combine <pre> and <code> for multi-line code samples:

html example

<pre><code>function greet(name) {
  return "Hello, " + name + "!";
}

console.log(greet("World"));
</code></pre>

Block vs Inline Elements

This distinction is fundamental to understanding HTML layout.

Block Elements

Take up the full width available
Start on a new line
Can contain other block or inline elements

html example

<h1>Heading (block)</h1>
<p>Paragraph (block)</p>
<div>Division (block container)</div>
<ul>, <ol>, <li>, <table>, <form>, <section>, <article>

Inline Elements

Take up only as much width as their content
Flow within a line of text
Should only contain other inline elements (not block elements)

html example

<a href="#">Link (inline)</a>
<strong>Bold (inline)</strong>
<em>Italic (inline)</em>
<span>Generic inline container</span>
<img>, <input>, <button>, <code>, <label>

The div and span Containers

<div> and <span> are generic containers with no semantic meaning — used purely for grouping and styling:

Example

Rule: Prefer semantic elements (<section>, <article>, <nav>) over <div> when the content has meaning. Use <div> only when no semantic element fits.

Blockquote and Quote Elements

Example

Practical Text Example

A real-world article section using proper HTML text elements:

html example

<article>
  <h1>Understanding HTTP Status Codes</h1>

  <p>
    When a browser requests a webpage, the server responds with an 
    <abbr title="HyperText Transfer Protocol">HTTP</abbr> status code 
    that indicates the outcome of the request.
  </p>

  <h2>Common Status Codes</h2>

  <p>
    The most common code you encounter is <strong>200 OK</strong> — 
    meaning the request succeeded. Here are the key categories:
  </p>

  <ul>
    <li><code>2xx</code> — <em>Success</em>: request was received and processed</li>
    <li><code>3xx</code> — <em>Redirection</em>: further action needed</li>
    <li><code>4xx</code> — <em>Client error</em>: problem with the request</li>
    <li><code>5xx</code> — <em>Server error</em>: problem on the server side</li>
  </ul>

  <h3>The Infamous 404</h3>

  <p>
    A <mark>404 Not Found</mark> response means the requested resource 
    does not exist on the server. As Tim Berners-Lee wrote in 
    <cite>Weaving the Web</cite>:
  </p>

  <blockquote>
    <p>The 404 error is not a failure of the user — it is a failure of 
    the web designer to maintain working links.</p>
  </blockquote>

  <p>To check a URL manually, press <kbd>F12</kbd> to open DevTools, 
  navigate to the <b>Network</b> tab, and reload the page.</p>
</article>

Summary

Element	Type	Purpose
`<h1>`–`<h6>`	Block	Headings hierarchy
`<p>`	Block	Paragraph of text
`<br>`	Inline	Force line break
`<hr>`	Block	Thematic section break
`<strong>`	Inline	Important text (semantic bold)
`<b>`	Inline	Visual bold (no semantic weight)
`<em>`	Inline	Stressed emphasis (semantic italic)
`<i>`	Inline	Visual italic (technical terms, etc.)
`<code>`	Inline	Inline code snippet
`<pre>`	Block	Preformatted text preserving whitespace
`<blockquote>`	Block	Extended quotation
`<q>`	Inline	Short inline quotation
`<mark>`	Inline	Highlighted/relevant text
`<del>` / `<ins>`	Inline	Deleted / inserted content
`<sub>` / `<sup>`	Inline	Subscript / superscript
`<div>`	Block	Generic block container
`<span>`	Inline	Generic inline container
`<abbr>`	Inline	Abbreviation with tooltip

*Next: Links and Navigation*

HTML Headings, Paragraphs, and Text Formatting

Paragraphs

Line Breaks and Horizontal Rules

`<br>` — Line Break

`<hr>` — Horizontal Rule

Text Formatting Elements

Bold and Strong

Italic and Emphasis

Other Inline Formatting

Code Elements

Inline Code

Preformatted Text and Code Blocks

Block vs Inline Elements

Block Elements

Inline Elements

The div and span Containers

Blockquote and Quote Elements

Practical Text Example

Summary

Continue learning this concept

HTML Headings, Paragraphs, and Text Formatting

Paragraphs

Line Breaks and Horizontal Rules

`<br>` — Line Break

`<hr>` — Horizontal Rule

Text Formatting Elements

Bold and Strong

Italic and Emphasis

Other Inline Formatting

Code Elements

Inline Code

Preformatted Text and Code Blocks

Block vs Inline Elements

Block Elements

Inline Elements

The div and span Containers

Blockquote and Quote Elements

Practical Text Example

Summary

Continue learning this concept

Paragraphs

Line Breaks and Horizontal Rules

<br> — Line Break

<hr> — Horizontal Rule

Text Formatting Elements

Bold and Strong

Italic and Emphasis

Other Inline Formatting

Code Elements

Inline Code

Preformatted Text and Code Blocks

Block vs Inline Elements

Block Elements

Inline Elements

The div and span Containers

Blockquote and Quote Elements

Practical Text Example

Summary

Continue learning this concept

Paragraphs

Line Breaks and Horizontal Rules

<br> — Line Break

<hr> — Horizontal Rule

Text Formatting Elements

Bold and Strong

Italic and Emphasis

Other Inline Formatting

Code Elements

Inline Code

Preformatted Text and Code Blocks

Block vs Inline Elements

Block Elements

Inline Elements

The div and span Containers

Blockquote and Quote Elements

Practical Text Example

Summary

Continue learning this concept

`<br>` — Line Break

`<hr>` — Horizontal Rule

`<br>` — Line Break

`<hr>` — Horizontal Rule