HTML5: How to define preformatted text?

Last update on February 12 2024 12:52:39 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!DOCTYPE html><!-- Define document type as HTML5 -->
<html><!-- Start of HTML document -->
<head><!-- Start of head section -->
<meta charset="utf-8"><!-- Define character encoding -->
<title>How to define preformatted 
text</title><!-- Title of the document -->
</head><!-- End of head section -->
<body><!-- Start of body section -->
<pre><!-- Start of preformatted text section -->
this  is  a   <!-- Text content with multiple spaces preserved -->
pre   
     formatted   
                  text <!-- Additional text with varying indentation -->
</pre><!-- End of preformatted text section -->
</body><!-- End of body section -->
</html><!-- End of HTML document -->

Explanation:

This HTML code demonstrates how to define preformatted text using the <pre> element.
The <pre> element is used to display text exactly as it is written in the HTML code, preserving spaces, line breaks, and indentation.
Inside the <pre> element, there is a block of text with multiple spaces between words, demonstrating how the <pre> element maintains the spacing.
The text within the <pre> element is displayed exactly as it appears in the HTML code, including the varying indentation levels.
Preformatted text is commonly used for displaying code snippets, preserving their formatting and layout.

Live Demo:

See the Pen pre-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page