Preformatted text in HTML - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

What is the visual output of this HTML snippet?

Consider the following HTML code using the

 tag. What will you see rendered in the browser?

HTML

<pre>
  Hello
    World!
  This is preformatted text.
</pre>

A The text appears in a single line, ignoring spaces and line breaks.

B The text appears with spaces preserved but line breaks are ignored.

C The text appears with line breaks but spaces are collapsed.

D The text appears exactly as typed, preserving spaces and line breaks.

💡 Hint

Think about how the

 tag treats spaces and new lines.

The

 tag preserves both spaces and line breaks exactly as typed, showing text in a fixed-width font.

🧠 Conceptual

intermediate

Why use

 instead of normal text tags?

Which reason best explains why a developer would use the

 tag in HTML?

A To make text bold and italic automatically.

B To display text exactly as typed, including spaces and line breaks.

C To add clickable links inside the text.

D To change the font color to red.

💡 Hint

Think about how code or poetry is shown on web pages.

The

 tag is used to show text exactly as typed, preserving formatting like spaces and line breaks.

📝 Syntax

advanced

Which HTML snippet correctly uses

 to show code with indentation?

Select the valid HTML code that will display the following code snippet with indentation preserved:

function greet() { console.log('Hi'); }

A

<pre>function greet() {
    console.log('Hi');
}</pre>

B <pre>function greet() {<br> console.log('Hi');<br>}</pre>

C <code>function greet() {\n console.log('Hi');\n}</code>

D <pre><code>function greet() {\n console.log('Hi');\n}</code></pre>

💡 Hint

Remember that

 preserves whitespace and line breaks, but 
 tags do not work inside 
 for line breaks.

Option A uses

 with newline characters correctly to preserve indentation and line breaks. Option A uses 
 inside 
, which breaks the preformatted behavior. Option A uses  which does not preserve whitespace. Option A nests  inside 
 but includes newline characters as text, which is redundant.

❓ accessibility

advanced

How to make preformatted text accessible?

Which practice improves accessibility when using

 to show code or text blocks?

A Use <pre> without any additional attributes; screen readers handle it automatically.

B Use only <div> tags instead of <pre> for better screen reader support.

C Add aria-label describing the content inside the <pre> tag.

D Avoid using <pre> because it is not accessible.

💡 Hint

Think about how screen readers understand the purpose of content.

Adding an aria-label helps screen readers understand what the preformatted text represents, improving accessibility.

❓ layout

expert

How does

 affect page layout and responsiveness?

Given a

 block with very long lines of text, what is the best CSS approach to keep the page layout responsive and readable?

A Use CSS property 'white-space: pre-wrap;' on the <pre> to allow line wrapping.

B Use 'overflow: hidden;' on the <pre> to cut off long lines.

C Use 'display: inline;' on the <pre> to make it flow with text.

D Use 'white-space: nowrap;' on the <pre> to prevent wrapping.

💡 Hint

Think about how to keep long lines from breaking the layout but still preserve formatting.

The 'white-space: pre-wrap;' CSS property preserves whitespace and line breaks but allows long lines to wrap, improving responsiveness.

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