Nearby lessons
4 of 24📑 HTML Paragraphs & Preformatted Text
📌 What are HTML Paragraphs & Preformatted Text?
Learn how to use the
<p> and <pre> elements to format text on web pages. These tags help define regular blocks of text and preserve spacing when needed.📝 The <p> Tag
The
<p> tag is used to define a paragraph. It is a block-level element and creates automatic space above and below the content.- Browsers add space before and after paragraphs automatically.
- Extra spaces or new lines inside a paragraph are ignored.
- Use CSS for spacing and layout instead of adding multiple
<br>tags.
Code Example
PREVIEW READY
🧾 The <pre> Tag
The
<pre> tag displays preformatted text. It keeps all spaces, tabs, and line breaks exactly as they appear in your HTML file.- Great for displaying code blocks.
- Useful for showing ASCII art, poetry, or logs.
- Text uses a monospace (fixed-width) font by default.
- Formatting is not altered by the browser.
Code Example
PREVIEW READY
✅ Best Practices
- Use
<p>for normal blocks of readable content. - Only use
<pre>when you need to keep spacing or alignment. - Use
<pre>+<code>when showing programming code. - Use semantic tags to help screen readers and accessibility tools.
- Style your
<p>and<pre>with CSS for a clean look.
🧠 Test Your Knowledge
3 QuestionsProgress: 0 / 3
Keep Going!HTML Headings