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.