Introduction to HTML Paragraphs - Line Breaks - Horizontal line - pre tags

Introduction to HTML Paragraphs - Line Breaks - Horizontal line - pre tags | Learn HTML5

Defining Paragraphs with <p>

The <p> element defines a paragraph.

A paragraph always starts on a new line, with automatic margins before and after the text.

Source Code:

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
    

Example:

This is a paragraph.

This is another paragraph.

Rendering HTML Content

HTML displays content according to the browser's rendering, not based on extra spaces or line breaks in the source code.

Source Code:

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

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

Example:

This paragraph
contains a lot of lines
in the source code,
but the browser
ignores extra spaces and line breaks.

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

Creating Horizontal Rules with <hr>

The <hr> tag defines a thematic break and is typically rendered as a horizontal line.

Source Code:

<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>
    

Example:

This is heading 1

This is some text.

---

This is heading 2

This is some other text.

---

Using Line Breaks with <br>

The <br> tag defines a line break, inserting a new line without starting a new paragraph.

Source Code:

<p>This is<br>a paragraph<br>with line breaks.</p>
    

Example:

This is
a paragraph
with line breaks.

Preserving Line Breaks with <pre>

Without additional tags, HTML will not preserve line breaks in text.

Source Code:

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

Example:

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.

Using the <pre> Element for Preformatted Text

The <pre> element preserves spaces and line breaks, displaying text in a fixed-width font.

Source Code:

<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>
    

Example:

  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.

Exercise: Adding a Paragraph

Use the correct HTML tag to add a paragraph with the text "Hello World!".

Source Code:

<p>Hello World!</p>
    

Example:

Hello World!

HTML Tag Reference

• <p>: Defines a paragraph
• <hr>: Defines a thematic break
• <br>: Inserts a single line break
• <pre>: Defines preformatted text

Ashraf Learn Modern HTML