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.