Text & Content Elements

Text is the primary content of most web pages. HTML provides a rich set of elements for structuring and formatting text meaningfully.

Headings: <h1> to <h6>

Headings create a hierarchical structure for your content, like chapters in a book.

1
<h1>Main Page Title</h1>
2
<h2>Section Heading</h2>
3
<h3>Sub-section Heading</h3>
4
<h4>Sub-sub-section Heading</h4>
5
<h5>Minor Heading</h5>
6
<h6>Smallest Heading</h6>

Heading Rules

1
<!-- ❌ Wrong: skipping levels for visual size -->
2
<h1>My Site</h1>
3
<h3>Contact</h3>
4

5
<!-- ✅ Correct: proper hierarchy -->
6
<h1>My Site</h1>
7
<h2>Contact</h2>

Paragraphs: <p>

Paragraphs wrap blocks of text:

1
<p>This is a paragraph of text. Browsers automatically add space before and after paragraphs.</p>
2
<p>This is another paragraph. Notice the vertical gap between them.</p>

• Browsers collapse multiple whitespace characters into a single space
• Line breaks in your HTML source do not create new lines in the browser

1
<p>
2
  This text is on
3
  multiple lines in the editor
4
  but appears as one line in the browser.
5
</p>

Bold and Italic: Semantic vs Presentational

HTML provides both semantic (meaningful) and presentational (visual) elements:

1
<!-- Semantic (recommended) -->
2
<strong>This text is important</strong>  <!-- Bold + indicates importance -->
3
<em>This text is emphasized</em>          <!-- Italic + indicates emphasis -->
4

5
<!-- Presentational (avoid unless purely stylistic) -->
6
<b>This is just bold</b>                 <!-- Bold, no meaning -->
7
<i>This is just italic</i>               <!-- Italic, no meaning -->

Line Breaks: <br>

Use <br> for line breaks inside a paragraph:

1
<p>
2
  123 Main Street<br>
3
  Springfield, IL 62701<br>
4
  USA
5
</p>

• <br> is a void element (no closing tag)
• Do NOT use <br> to create spacing between paragraphs — use <p> for that

Horizontal Rule: <hr>

<hr> creates a thematic break (visual line):

1
<h2>Section One</h2>
2
<p>Content for section one.</p>
3

4
<hr>
5

6
<h2>Section Two</h2>
7
<p>Content for section two.</p>

• <hr> represents a thematic shift, not just a decorative line
• Can be styled with CSS for different appearances

Subscript and Superscript

1
<p>H<sub>2</sub>O is water.</p>
2
<p>Einstein's famous equation: E = mc<sup>2</sup></p>

<sub> for subscripts (chemical formulas, footnotes) <sup> for superscripts (exponents, ordinal numbers like 1st).

Blockquotes

For quoted content from another source:

1
<blockquote cite="https://example.com/source">
2
  <p>The only way to do great work is to love what you do.</p>
3
  <footer>— Steve Jobs</footer>
4
</blockquote>

• Browsers typically indent blockquotes
• The cite attribute tells the source URL (not visible to users but machine-readable)
• Short inline quotes use <q>:

1
<p>As they say, <q>knowledge is power</q>.</p>

Preformatted Text: <pre>

<pre> preserves whitespace and uses a monospace font:

1
<pre>
2
  function hello() {
3
    console.log("Hello, world!");
4
  }
5
</pre>

Perfect for code snippets, ASCII art, or any text where spacing matters.

Code Elements

1
<p>Use the <code>console.log()</code> function to print to the console.</p>
2

3
<p>When saving, press <kbd>Ctrl+S</kbd> (or <kbd>Cmd+S</kbd> on Mac).</p>
4

5
<p>The <var>x</var> variable represents the user's age.</p>
6

7
<p>Program output: <samp>Hello, World!</samp></p>

HTML Entities (Special Characters)

Some characters have special meaning in HTML and must be written as entities:

1
<p>HTML tags use &lt;angle brackets&gt;.</p>
2
<p>At the store, buy bread &amp; milk.</p>
3
<p>Copyright &copy; 2026 My Company</p>
4
<p>Price: $1,500 &nbsp;— &nbsp; Limited time offer</p>

Common named entities: © (©), ® (®), ™ (™), — (—), → (→).

Try It Yourself

Create a page that uses:

1. An <h1> for the page title and <h2> for at least two sections
2. Two paragraphs of text in each section
3. A <strong> and an <em> within your paragraphs
4. An address with <br> line breaks
5. A <hr> between sections
6. A <blockquote> from a famous person
7. A code example inside <pre> and <code> tags
8. At least two HTML entities

Key Takeaways

• Headings create a structural hierarchy — one <h1> per page, don’t skip levels
• Use <strong> and <em> for semantic bold/italic instead of <b>/<i>
• <br> creates line breaks inside paragraphs; <hr> creates section dividers
• <pre> preserves whitespace — use it for code or formatted text
• HTML entities (<, &, etc.) represent special characters that would otherwise be interpreted as code
• Semantic elements help search engines and screen readers understand your content