HTML Paragraphs

A paragraph in HTML is a block of text that is separated from other content with some space above and below it. Paragraphs are the most commonly used element for writing readable content on web pages.

The <p> Tag

The <p> tag defines a paragraph. The browser automatically adds a blank line before and after each paragraph, so content stays well separated without any extra spacing manually added.

<p>This is the first paragraph. It contains some text.</p>
<p>This is the second paragraph. It appears on a new line with space above.</p>
<p>This is the third paragraph.</p>

How HTML Handles Spaces and New Lines

An important thing to understand is that HTML ignores extra spaces and line breaks written in the code. No matter how many spaces or blank lines are added in the code, the browser renders it as a single space.

<p>
  This    text       has
  many spaces and
  line breaks in the code.
</p>

<!-- Browser Output:
  This text has many spaces and line breaks in the code.
-->

The browser collapses all extra whitespace and treats it as a single space. This is normal and expected behavior in HTML.

The <br> Tag – Line Break

To force text to move to the next line within the same paragraph, the <br> tag is used. It is a self-closing tag that inserts a single line break.

<p>
  123 Main Street,<br>
  Springfield,<br>
  United States.
</p>

The <pre> Tag – Preformatted Text

The <pre> tag displays text exactly as it is written in the code, preserving all spaces and line breaks. It uses a fixed-width (monospace) font. This is useful for showing code snippets or text that must maintain its exact format.

<pre>
  Name:    John Smith
  Age:     30
  City:    New York
</pre>

Paragraph with Inline Formatting

Inline elements such as <strong> and <em> can be used inside a paragraph to emphasize parts of the text.

<p>
  The exam is on <strong>Monday, 10th March</strong>.
  Please make sure to <em>arrive 15 minutes early</em>.
</p>

Long Paragraph Example

<h2>About Our School</h2>

<p>
  Our school was founded in 1990 and has been serving the community for over three decades.
  We focus on quality education and overall development of students.
</p>

<p>
  The school offers a wide range of subjects including science, arts, and commerce.
  Students from all backgrounds are welcome.
</p>

<p>
  For admissions, please visit our office between 9 AM and 4 PM on weekdays.<br>
  Contact us at: info@school.edu
</p>

Differences: <p> vs <br> vs <pre>

Key Points to Remember

• The <p> tag defines a paragraph and adds automatic spacing around it
• HTML ignores extra spaces and blank lines written in code
• Use <br> to break a line without starting a new paragraph
• Use <pre> when the exact spacing and line breaks in code must be preserved
• Do not use multiple <br> tags to create spacing — that is not a good practice
• Paragraphs are block-level elements, meaning each one starts on a new line