Preformatted text in HTML - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of the <pre> tag in HTML?

The <pre> tag is used to display text exactly as it is written, preserving spaces, line breaks, and indentation.

beginner

How does the <pre> tag affect white space in the browser?

The <pre> tag preserves all white space including spaces, tabs, and new lines, unlike normal HTML where white space is collapsed.

beginner

Which HTML tag would you use to show code snippets with exact formatting?

Use the <pre> tag to show code snippets with exact formatting, preserving indentation and line breaks.

intermediate

Can you nest other HTML tags inside <pre>? What happens?

Yes, you can nest tags like <code> inside <pre>. The <pre> preserves formatting, and nested tags can add semantic meaning or styling.

beginner

What is the difference between <pre> and normal paragraph (<p>) text?

Normal paragraphs collapse white space and ignore extra spaces or line breaks. <pre> shows text exactly as typed, including spaces and line breaks.

What does the <pre> tag do in HTML?

A Creates a hyperlink

B Makes text bold

C Preserves spaces and line breaks exactly as typed

D Centers the text

The <pre> tag preserves all white space and line breaks exactly as written.

Which tag is best for showing code with indentation in HTML?

A &lt;pre&gt;

B &lt;p&gt;

C &lt;span&gt;

D &lt;div&gt;

The <pre> tag preserves indentation and line breaks, ideal for code display.

What happens to multiple spaces inside a normal paragraph (<p>) tag?

A They are preserved exactly

B They turn into tabs

C They become line breaks

D They are collapsed into a single space

HTML collapses multiple spaces into one space inside normal text elements like <p>.

Can you use other tags inside <pre> to style text?

A No, &lt;pre&gt; cannot contain other tags

B Yes, you can nest tags like &lt;code&gt; or &lt;strong&gt;

C Only &lt;img&gt; tags are allowed

D Only text is allowed, no tags

You can nest other tags inside <pre> to add meaning or style while preserving formatting.

Which of these is NOT true about <pre>?

A It automatically wraps long lines

B It preserves spaces

C It preserves line breaks

D It displays text in a fixed-width font by default

By default, <pre> does not wrap long lines; text scrolls horizontally instead.

Explain how the <pre> tag affects text formatting in a web page.

Think about how text looks when you want to keep indentation and spacing.

Describe a real-life situation where using <pre> would be helpful on a website.

Consider when exact spacing and line breaks matter.

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