HTMLmarkup~20 mins

Preformatted text in HTML - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

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.

Progress0 / 4 steps

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

Need a hint?

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

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

Need a hint?

Use semantic tags to organize your page content clearly.

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

Need a hint?

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

Add a footer with a copyright notice

HTML




    
    
    Preformatted Text Example


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

Need a hint?

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