Preformatted text in HTML - Mini Project: Build & Apply

Using Preformatted Text in HTML

📖 Scenario: You are creating a simple webpage to show a poem exactly as it is typed, preserving spaces and line breaks.

🎯 Goal: Build an HTML page that uses the <pre> tag to display text with all spaces and line breaks preserved.

📋 What You'll Learn

Create a basic HTML5 page structure

Add a <pre> element containing the exact poem text

Ensure the page uses semantic HTML with <main> and <header>

Include a page title in the <title> tag

Use UTF-8 charset and responsive viewport meta tags

💡 Why This Matters

🌍 Real World

Showing code snippets, poems, or any text where exact spacing and line breaks matter is common in blogs, documentation, and educational sites.

💼 Career

Understanding how to preserve text formatting with <pre> is important for web developers creating readable code examples or formatted text content.

1

Create the basic HTML5 page structure

Write the basic HTML5 skeleton with lang="en", <head> containing <meta charset="UTF-8">, <meta name="viewport" content="width=device-width, initial-scale=1.0">, and a <title> with the text Preformatted Text Example. Also add an empty <body> tag.

HTML

    
    
    Preformatted Text Example


    

Hint

Start by typing the standard HTML5 page structure with the required meta tags and title.

2

Add semantic structure with header and main

Inside the <body>, add a <header> containing an <h1> with the text Poem Display. Below the header, add a <main> element. Leave the <main> empty for now.

HTML

    
    
    Preformatted Text Example


    
        Poem Display
    
    
        
    

Hint

Use semantic tags to organize your page content clearly.

3

Add the poem text inside a preformatted block

Inside the <main> element, add a <pre> tag containing the exact text below, preserving spaces and line breaks:

Roses are red, Violets are blue, Sugar is sweet, And so are you.

HTML

    
    
    Preformatted Text Example


    
        Poem Display
    
    
        
    

Hint

The <pre> tag keeps all spaces and line breaks exactly as typed.

4

Add a footer with a copyright notice

Below the <main> element, add a <footer> containing a <p> with the text © 2024 Poetry Inc.

HTML

    
    
    Preformatted Text Example


    
        Poem Display
    
    
        Roses are red,
    Violets are blue,
Sugar is sweet,
    And so are you.
    
    

Hint

Use the <footer> tag for page footers and add a paragraph inside it.

Practice

1. What does the <pre> tag do in HTML?

easy

A. Creates a paragraph with bold text

B. Displays text exactly as typed, preserving spaces and line breaks

C. Adds a hyperlink to another page

D. Inserts an image into the page

Solution

1. Step 1: Understand the purpose of <pre> tag

   The <pre> tag is used to display preformatted text, meaning it keeps all spaces and line breaks exactly as typed.

2. Step 2: Compare with other options

   Other options describe different HTML tags or functions unrelated to <pre>.

3. Final Answer:

   Displays text exactly as typed, preserving spaces and line breaks -> Option B

4. Quick Check:

   <pre> preserves spacing = A [OK]

Hint: Remember: <pre> keeps spaces and line breaks as typed [OK]

Common Mistakes:

• Thinking <pre> formats text like <p>
• Confusing <pre> with <code> tag
• Assuming <pre> adds styling like bold or links

2. Which of the following is the correct syntax to create preformatted text in HTML?

easy

A. This is preformatted text

B. This is preformatted text

C. This is preformatted text

D. This is preformatted text

Solution

1. Step 1: Identify the correct HTML tag for preformatted text

   The correct tag is <pre> to show text exactly as typed.

2. Step 2: Check other options for validity

   <preformatted> is not a valid tag, <code> is for code but does not preserve spaces, <p> is for paragraphs without preserving spaces.

3. Final Answer:

   <pre>This is preformatted text</pre> -> Option C

4. Quick Check:

   Correct tag for preformatted text = B [OK]

Hint: Use <pre> tag exactly, no extra letters [OK]

Common Mistakes:

• Using <preformatted> which is invalid
• Confusing <code> with <pre>
• Using <p> which does not preserve spaces

3. What will be the visual output in the browser for this HTML code?

Line 1
  Line 2 indented
Line 3

medium

A. Line 1
Line 2 indented
Line 3 (with spaces and line breaks preserved)

B. Line 1 Line 2 indented Line 3 (all in one line)

C. Line 1
Line 2 indented
Line 3 (spaces removed)

D. Line 1 Line 2 indented Line 3 (spaces replaced by single spaces)

Solution

1. Step 1: Understand <pre> tag behavior

   The <pre> tag preserves all spaces and line breaks exactly as typed in the code.

2. Step 2: Analyze the given code

   The text has line breaks and indentation spaces before 'Line 2 indented'. These will appear exactly as shown.

3. Final Answer:

   Line 1 Line 2 indented Line 3 (with spaces and line breaks preserved) -> Option A

4. Quick Check:

   <pre> preserves spaces and lines = D [OK]

Hint: Remember: <pre> shows text exactly as typed [OK]

Common Mistakes:

• Thinking spaces are collapsed like normal text
• Assuming line breaks are ignored
• Confusing <pre> with <p> or <div>

4. Identify the error in this HTML snippet:

  <pre>
  Hello World
  </pre>

medium

A. There is no error; this code is correct

B. The <pre> tags are not closed properly

C. The text inside <pre> should not have spaces

D. The <pre> tags are inside another <pre>, causing nested preformatted blocks

Solution

1. Step 1: Examine the code structure

   The code shows <pre> tags inside another <pre> block, which means nested preformatted text.

2. Step 2: Understand <pre> nesting effect

   Nested <pre> tags cause the inner tags to be shown as text, not as HTML tags, which is usually unintended.

3. Final Answer:

   The <pre> tags are inside another <pre>, causing nested preformatted blocks -> Option D

4. Quick Check:

   Nested <pre> shows tags as text = A [OK]

Hint: Avoid nesting <pre> tags; it shows tags as text [OK]

Common Mistakes:

• Thinking nested <pre> tags are valid HTML structure
• Assuming spaces inside <pre> are errors
• Ignoring that tags inside <pre> show as text

5. You want to display a poem with exact line breaks and spaces on your webpage. Which approach is best?

hard

A. Use the <pre> tag to wrap the poem text

B. Use multiple <p> tags for each line

C. Use <div> with CSS margin for spacing

D. Use <span> tags with line breaks

Solution

1. Step 1: Identify the requirement for exact spacing and line breaks

   Poetry needs spaces and line breaks preserved exactly as typed.

2. Step 2: Choose the HTML tag that preserves formatting

   The <pre> tag preserves all spaces and line breaks, making it ideal for poems.

3. Step 3: Evaluate other options

   Multiple <p> tags break text into paragraphs but don't preserve spaces; <div> and <span> need extra CSS and don't preserve spaces by default.

4. Final Answer:

   Use the <pre> tag to wrap the poem text -> Option A

5. Quick Check:

   Exact spacing needs <pre> = C [OK]

Hint: For exact text layout, always use <pre> [OK]

Common Mistakes:

• Using <p> which ignores extra spaces
• Relying on CSS alone without <pre>
• Using <span> which is inline and ignores line breaks