HTML Paragraphs

HTML Paragraphs: A paragraph consistently begins on a new line, and is typically a block of text.

In this article, you will learn-

1 HTML Paragraphs
2 HTML Display
3 HTML Horizontal Rules
4 HTML Line Breaks
5 The Poem Problem
6 Solution – The HTML <pre> Element

An HTML paragraph or HTML p tag is used to define a paragraph in a webpage. Let’s take a straightforward example to perceive how it works. It is a striking point that a browser itself add an unfilled line before and after a paragraph. An HTML tag shows the beginning of the new paragraph.

Note: If we are using different tags in a single HTML file then the browser automatically adds a single clear line between the two paragraphs.

The HTML element characterizes a paragraph.

A paragraph consistently begins on a new line, and browsers consequently add some white area (a margin) before and after a paragraph.

Example

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

HTML Display

You can’t be certain how HTML will be shown.

Huge or small screens, and resized windows will create various outcomes.

With HTML, you can’t change the display by adding additional spaces or additional lines in your HTML code.

The browser will consequently eliminate any additional spaces and lines when the page is shown:

Example

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

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

HTML Horizontal Rules

The <hr> tag defines a thematic break in a HTML page, and is most often shown as a horizontal rule.

The <hr> element is used to separate content (or define a change) in an HTML page:

Example

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

The <hr> tag is an unfilled tag, which means that it has no end tag.

HTML Line Breaks

The HTML element defines a line break.

Use on the off chance that you need a line break (a new line) without beginning a new paragraph:

Example

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

The tag is an unfilled tag, which means that it has no end tag.

The Poem Problem

This poem will show on a single line:

Example

<p>
  Twinkle, twinkle, little star.
  How I wonder what you are.
  Up above the world so high.
  Like a diamond in the sky.
</p>

Solution – The HTML <pre> Element

The HTML <pre> element defines preformatted text.

The content inside an <pre> element is shown in a fixed-width text style (normally Courier), and it preserves the two spaces and line breaks:

Example

<pre>
  Twinkle, twinkle, little star.
  How I wonder what you are.
  Up above the world so high.
  Like a diamond in the sky.
</pre>

Previous Tutorial

Next Tutorial

Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your photos and creative projects with us.