Text Elements & Formatting

Text is the most fundamental type of content on the web. HTML provides a rich set of elements for structuring and formatting text — from headings and paragraphs to emphasis, quotations, and code snippets. Choosing the right element is not just about appearance; it conveys meaning to browsers, screen readers, and search engines.

---

Headings

HTML provides six levels of headings, from <h1> (most important) to <h6> (least important):

<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Sub-subheading</h3>
<h4>Fourth Level</h4>
<h5>Fifth Level</h5>
<h6>Sixth Level</h6>

Heading Best Practices

Rule	Reason
Use only one <h1> per page	It represents the main topic — important for SEO and accessibility
Do not skip levels	Go from <h1> to <h2> to <h3>, not <h1> to <h3>
Use headings for structure, not size	Use CSS to change size; use headings for meaning

---

Paragraphs

The <p> element represents a paragraph of text:

<p>This is a paragraph. It is the most common element for body text on the web.</p>

<p>Each paragraph creates a block of text with space above and below it by default.</p>

Note: Browsers collapse multiple spaces and line breaks inside a <p> into a single space. To force a line break, use the <br> element.

---

Text Formatting Elements

Emphasis and Importance

Element	Purpose	Default Style	Example
<strong>	Strong importance	Bold	<strong>Warning:</strong> Do not delete this file.
<em>	Emphasis (stress)	Italic	This is <em>very</em> important.
<b>	Bring to attention (no extra importance)	Bold	<b>Product Name</b>
<i>	Alternate voice or mood	Italic	<i>Homo sapiens</i>
<mark>	Highlighted/marked text	Highlighted	<mark>Search result</mark>
<small>	Side comments, fine print	Smaller text	<small>Terms and conditions apply.</small>

<p><strong>Important:</strong> Always save your work before closing the editor.</p>
<p>The species <i>Tyrannosaurus rex</i> lived during the late Cretaceous period.</p>
<p>Search results: We found <mark>HTML</mark> in 42 documents.</p>

Key distinction: <strong> and <em> convey meaning (importance and emphasis). <b> and <i> are purely stylistic. Screen readers will change their tone for <strong> and <em> but not for <b> and <i>.

---

Subscript and Superscript

<p>Water is H<sub>2</sub>O.</p>
<p>E = mc<sup>2</sup></p>
<p>Footnote reference<sup><a href="#note1">1</a></sup></p>

---

Line Breaks and Horizontal Rules

<!-- Line break (void element) -->
<p>Line one<br>Line two<br>Line three</p>