Structuring Text with Paragraphs

In HTML, the  element is used to define a paragraph. Any text placed between  and  tags is treated as a distinct block of text. This is essential for organizing your content into readable chunks. When a browser renders a page, it automatically adds some vertical whitespace (a margin) above and below each paragraph, which visually separates them from each other.

How Browsers Handle Whitespace

One common point of confusion for beginners is how browsers treat whitespace in your HTML code. If you add extra spaces or multiple line breaks in your text editor, the browser will collapse them into a single space when it displays the page. This ensures that the layout remains consistent and responsive, regardless of how the source code is formatted.

This paragraph contains a lot of lines in the source code, but the browser ignores it.

This paragraph contains a lot of spaces in the source code, but the browser ignores it.

Creating Thematic Breaks with <hr>

To create a clear separation between sections of content, such as a change of topic, you can use the <hr> tag. This element stands for "Horizontal Rule" and is displayed as a horizontal line across the page. The <hr> tag is an "empty tag," which means it does not require a closing tag.

This is heading 1

This is some text.

This is heading 2

This is some other text.

Forcing Line Breaks with

Sometimes you need to start a new line without creating a whole new paragraph (which would add extra margin). The   (line break) element is perfect for this. It's commonly used for formatting addresses or poetry where the line structure is important.

This is
a paragraph
with line breaks.

The Poem Problem: Preserving Formatting with <pre>

What if you want to display text exactly as it's written in your editor, with all its spaces and line breaks intact? This is a common issue when trying to display poetry or code. The solution is the <pre> (preformatted text) element. Any text inside a <pre> tag is displayed in a fixed-width font (like Courier), and all whitespace is preserved, giving you complete control over the text's formatting.

HTML Paragraphs