Preformatted text in HTML - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create preformatted text using the correct HTML tag.

HTML

<[1]>This text preserves    spaces and line breaks.</[1]>

Drag options to blanks, or click blank then click option'

Adiv

Bpre

Ccode

Dspan

Attempts:

3 left

💡 Hint

Common Mistakes

Using instead of

 does not preserve spaces and line breaks.

Using

or will not keep the formatting.

The <pre> tag preserves spaces and line breaks exactly as written.

2fill in blank

medium

Complete the code to show a block of code with preserved formatting.

HTML

<[1]>
function greet() {
    console.log('Hello!');
}
</[1]>

Drag options to blanks, or click blank then click option'

Apre

Bcode

Csamp

Dkbd

Attempts:

3 left

💡 Hint

Common Mistakes

Using alone does not preserve line breaks.

Tags like or are for sample output or keyboard input, not formatting.

The <pre> tag preserves the indentation and line breaks of the code block.

3fill in blank

hard

Fix the error in the code to properly preserve spaces and line breaks.

HTML

<pre>This    is [1] text.</pre>

Drag options to blanks, or click blank then click option'

Aformatted

Bnormal

Cpreformatted

Dplain

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing 'formatted' or 'plain' which do not describe the preserved spacing.

Using 'normal' which means default text flow.

The text inside a <pre> tag is called preformatted text because it keeps spaces and line breaks.

4fill in blank

hard

Fill both blanks to create a preformatted block with a CSS class.

HTML

<[1] class=[2]>
Line 1
  Line 2
</[1]>

Drag options to blanks, or click blank then click option'

Apre

B"highlight"

C"code-block"

Ddiv

Attempts:

3 left

💡 Hint

Common Mistakes

Using

instead of

 loses preformatted spacing.

Not putting the class name in quotes causes invalid HTML.

Use the <pre> tag for preformatted text and add a class name in quotes for styling.

5fill in blank

hard

Fill all three blanks to create a preformatted text block with an aria-label and a CSS class.

HTML

<[1] class=[2] aria-label=[3]>
Example:
  1  2  3
</[1]>

Drag options to blanks, or click blank then click option'

Apre

B"numbered"

C"Preformatted numbers"

Dcode

Attempts:

3 left

💡 Hint

Common Mistakes

Using instead of

 loses spacing.

Forgetting quotes around attribute values causes errors.

Not adding aria-label reduces accessibility.

The <pre> tag preserves formatting, the class attribute styles it, and aria-label improves accessibility by describing the block.