Text Content Fundamentals

Master HTML's core text elements for organizing and structuring written content.

Headings & Structure

<h1>Main Title</h1>
<h2>Section Heading</h2>
<h3>Subsection</h3>
→
Main Title (Large)

Section Heading (Medium)

Subsection (Small)

Hierarchy rules:

  • Only one <h1> per page
  • Don't skip levels (e.g., h1 → h3)
  • Use for structure, not styling

Paragraphs & Spacing

<p>First paragraph</p>
<p>Line 1<br>Line 2</p>
<hr>
→
First paragraph
Line 1
Line 2

<br> creates line breaks within paragraphs
<hr> makes thematic breaks between sections

<hr> Thematic Break

<p>First section of text.</p>
<hr>
<p>Second section of text.</p>
→
First section of text.
Second section of text.

The <hr> element represents a thematic break or shift in topic between sections of content.

Text Formatting

<p>This is <strong>strong</strong> text.</p>
<p>This is <em>emphasized</em> text.</p>
<p>This is <u>underlined</u> text.</p>
→
This is strong text.
This is emphasized text.
This is underlined text.

Use <strong> for strong importance, <em> for emphasis, and <u> for underlined text.

Common Errors

<!-- Skipping heading levels -->
<h1>Title</h1>
<h3>Section</h3>  <!-- Missing h2 -->

<!-- Misusing br -->
<p>Text<br></p>  <!-- Empty break -->

Practical Use: News Article

<h1>Climate Summit 2023</h1>
<p>Global leaders gather<br>in Paris...</p>
<hr>
<h2>Key Agreements</h2>
<p>1. Emission reduction<br>2. Funding...</p>
→
Climate Summit 2023

Global leaders gather 
in Paris...
Key Agreements

1. Emissions reduction
2. Funding...

Your Task: Article Structure

Create a document with:

  1. Main <h1> heading
  2. <h2> and <h3> subheadings
  3. Paragraphs containing <br>
  4. Horizontal rule between sections
Section 1/7Headings & Structure

Headings & Structure

Hierarchy rules:Only one <h1> per pageDon't skip levels (e.g., h1 → h3)Use for structure, not styling

Text Content Fundamentals

Master HTML's core text elements for organizing and structuring written content.

Headings & Structure

<h1>Main Title</h1>
<h2>Section Heading</h2>
<h3>Subsection</h3>
→
Main Title (Large)

Section Heading (Medium)

Subsection (Small)

Hierarchy rules:

  • Only one <h1> per page
  • Don't skip levels (e.g., h1 → h3)
  • Use for structure, not styling

HTML Editor

Preview