Structural Text Elements 📝¶

Prerequisites: Document Skeleton (Structure)

Mentor's Note: Think of structural text tags like formatting a newspaper article. You need a big headline (<h1>), section subtitles (<h2>), paragraphs of text (<p>), divider lines (<hr>), and spacing rules. Let's learn how to organize text on a webpage! 📰

📚 Educational Content: This guide covers block-level elements that organize and format text layout.

What You'll Learn

By the end of this tutorial, you'll know: - How to use headings (<h1> to <h6>) hierarchically - How paragraphs work and how they collapse extra whitespaces - The difference between <br> (line break) and paragraphs - When to use <pre> (preformatted text) for code and poems - How to use <hr> to separate sections visually

🌟 The Scenario: The Newspaper Layout 📰¶

Mental Model: Arranging a front page. Imagine you are laying out the front page of a school newspaper:

The Headline (<h1>): The single most important text.
Section Headers (<h2>): Categorizing news by type (Sports, Tech).
The Article Body (<p>): Standard paragraphs of text.
Separation Lines (<hr>): Thin ink lines dividing columns.
Formatting Preservation (<pre>): A block of text containing code where spaces must stay exactly as typed. ✅

📖 HTML Text Elements¶

HTML handles text using distinct block elements. Let's look at each.

1. Headings (`<h1>` to `<h6>`)¶

HTML has six levels of headings, ranging from <h1> (most important) to <h6> (least important).

<h1>Class 10 IT Syllabus</h1>     <!-- Huge headline -->
<h2>Unit 1: Documentation</h2>   <!-- Subtitle -->
<h3>Mail Merge Basics</h3>       <!-- Minor subtitle -->

- SEO Rule: You should only have one <h1> tag per page (the main title). - Accessibility: Never skip levels (e.g., don't jump from <h1> to <h3> just because you want smaller text). Use CSS for size!

2. Paragraphs (`<p>`)¶

The <p> tag defines a paragraph of text.

<p>This is a paragraph of text. Browsers automatically add blank margin space before and after paragraphs.</p>

- White-space Collapsing: Browsers collapse multiple spaces or line breaks into a single space:

<p>Hello      World!
This is  on a new line.</p>

Renders as: Hello World! This is on a new line.

3. Spacing: Line Breaks (`<br>`) and Rules (`<hr>`)¶

<br> (Line Break): A void tag that forces a line break without starting a new paragraph (no margin space).
<hr> (Horizontal Rule): A void tag that creates a horizontal dividing line to separate sections.
```
<p>First Line<br>Second Line</p>
<hr>
<p>New Section</p>
```

4. Preformatted Text (`<pre>`)¶

What it does: Preserves spaces, tabs, and line breaks exactly as they are written in the code.
When to use: Great for displaying computer source code or poetry.
```
<pre>
def hello():
    print("Hello World")
</pre>
```

🎨 Visual Logic: Spacing Comparison¶

Below is the comparison of spacing between paragraphs vs. using line breaks:

      PARAGRAPH TAGS (<p>)                      LINE BREAKS (<br>)
 ┌─────────────────────────────┐         ┌─────────────────────────────┐
 │ Paragraph 1 Content         │         │ Line 1 Content              │
 │                             │         │ Line 2 Content              │
 │ Paragraph 2 Content         │         │ Line 3 Content              │
 └─────────────────────────────┘         └─────────────────────────────┘
   (Includes vertical margins)             (Tight spacing, no margins)

🧪 Interactive Elements¶

Try It Yourself¶

Hands-on Exercise

Task: Write the HTML code to display this poem, keeping the line breaks and indentation intact:

Roses are red,
  Violets are blue,
HTML is easy,
  And so are you!

- Try writing it with standard <p> and <br> tags. - Try writing it with a single <pre> tag. Which was easier?

Quick Quiz¶

Quick Quiz

What happens to multiple spaces typed inside a <p> tag? - [ ] They are displayed exactly as typed. - [x] They collapse into a single space. - [ ] They cause a rendering error. - [ ] They automatically convert to tabs.

Explanation: Browsers collapse multiple spaces and line breaks inside standard HTML text elements (like <p>, <h1>, <span>) into a single space. Use <pre> to preserve them.

📚 Best Practices & Common Mistakes¶

✅ Best Practices¶

Use headings for hierarchy: Pick heading levels (h1-h6) based on the structure of your content, not their font size.
Avoid empty paragraphs for spacing: Do not write <p></p> to add vertical space; use CSS margins instead.

❌ Common Mistakes ⚠️¶

Skipping heading levels: Jumping from <h1> to <h4>.
Misusing <pre>: Using <pre> for standard layout paragraphs.

💡 Board Focus & Exam Tips 👔¶

Common Board Questions (GSEB/CBSE/ICSE)¶

Q: What is the difference between the <p> tag and the <br> tag?
Answer:
<p> is a block container representing a paragraph, adding margin/blank space before and after the text.
<br> is an empty (void) tag that forces a line break inside a paragraph, starting a new line without adding vertical margins.
Q: Why is the <pre> tag used?
Answer: The <pre> tag is used to define preformatted text. It preserves both spaces and line breaks exactly as they appear in the source HTML document.

Next Steps¶

Inline Text Formatting — Learn how to format specific words (like bolding, italicizing, or highlighting) inside a paragraph.
Block vs Inline Layouts — Understand how headings and paragraphs stack vertically as block elements.