HTML Paragraphs

HTML Paragraphs

Paragraphs are fundamental blocks of text content on a web page.

Defining Paragraphs with <p>

The HTML <p> element defines a paragraph.

Browsers automatically add some vertical space (margin) before and after each <p> element, separating them visually.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Paragraph Example</title>
</head>
<body>

  <p>This is the first paragraph. It contains some text content.</p>

  <p>This is the second paragraph. Notice the space between this and the first one.</p>

</body>
</html>

HTML Display and Whitespace

How HTML appears can vary based on screen size, window resizing, and browser defaults. You cannot rely on extra spaces or line breaks in your HTML source code to control the visual output.

Browsers collapse multiple spaces and line breaks in the HTML source into a single space when rendering the page.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Whitespace Example</title>
</head>
<body>

  <p>
    This paragraph
    contains a lot     of lines
    and          extra spaces
    in the source code,
    but the browser ignores most of it.
  </p>

</body>
</html>

Result: The browser will display the text above as a continuous paragraph with single spaces between words.

Importance of Closing Tags

While some browsers might correctly display HTML even if you forget a closing tag like </p>, this is unreliable and considered bad practice.

Omitting closing tags can lead to:

• Unexpected rendering issues.
• Difficult debugging.
• Invalid HTML, which can cause problems with accessibility tools and other software.

Always include closing tags for non-void elements to ensure valid, predictable, and maintainable code.

<!-- Correct way -->
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

<!-- Avoid this (missing closing tags) -->
<!--
<p>This might render okay...
<p>...but can cause problems.
-->

HTML Line Breaks <br>

The HTML <br> element creates a line break (starts a new line) within an existing block of text, like a paragraph. It does not create a new paragraph with margins.

Use <br> when you specifically need a line break, such as in addresses or poetry.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Line Break Example</title>
</head>
<body>

  <p>123 Web Dev Street<br>
     Anytown, CA 90210<br>
     USA</p>

</body>
</html>

The <br> tag is a void element, meaning it has no content and no closing tag. In standard HTML5, you write it simply as <br>.

Preformatted Text <pre>

The HTML <pre> element defines preformatted text. Text within a <pre> tag preserves both spaces and line breaks exactly as they appear in the source code.

It’s typically displayed in a fixed-width (monospace) font, making it suitable for displaying code snippets or text where formatting is significant.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Preformatted Text Example</title>
</head>
<body>

<pre>
  function greet(name) {
    console.log(`Hello, ${name}!`);
  }

  greet('World');
</pre>

<p>Compare the above code block with this poem snippet, where `<pre>` maintains the line structure:</p>

<pre>
  My Bonnie lies over the ocean.
  My Bonnie lies over the sea.
  My Bonnie lies over the ocean.
  Oh, bring back my Bonnie to me.
</pre>

</body>
</html>

Note: For styling preformatted text, CSS properties like white-space and font-family offer more flexibility than relying solely on <pre>.

HTML Tag Reference Summary

Key elements discussed in this section:

Tag	Description
<p>	Defines a paragraph of text.
<br>	Inserts a single line break within text.
<pre>	Defines preformatted text, preserving whitespace and line breaks.

For more details on these and other HTML elements, consult the MDN Web Docs HTML element reference.