Tutorials
THE WORLD'S LARGEST WEB DEVELOPER SITE

HTML Paragraphs

HTML Paragraphs

 

The HTML <p> element is used to define a paragraph:

Example

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
Try it Yourself

Note: Browsers will be adding some white space (a margin) before and after a paragraph automatically.

HTML Display

 

You cannot guess the way in which HTML will be displayed.

Different screen sizes such as Large or small screens, and resized windows will have different results.

Using HTML, you do not have the control to change the output by addition of extra spaces or extra lines in your HTML code.

The browser will be removing any extra spaces and extra lines that are added when the page is getting displayed:

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>
Try it Yourself

Don't Forget the End Tag

 

Most browsers will be displaying HTML correctly incase if you forget to write the end tag:

Example

<p>This is a paragraph.
<p>This is another paragraph.
Try it Yourself

The example above will be working in most browsers, but never rely on it.

Note: Not writing the end tag have the chance of producing unexpected results or errors.

HTML Line Breaks

 

The HTML <br> element is defined by a line break.

Use <br> incase if you want a line break (a new line), but it not needed to starting a new paragraph:

Example

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

The <br> tag is called an empty tag, because it does not have an end tag.

The Poem Problem

 

This poem will get displayed as one line:

Example

<p>
  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.
</p>
Try it Yourself

The HTML <pre> Element

 

The HTML <pre> element is used to define preformatted text.

The text inside a <pre> element will get displayed using a fixed-width font (usually Courier), and also it is known to preserve both spaces and line breaks:

Example

<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>
Try it Yourself

Test Yourself with Exercises

 

HTML Tag Reference

 

NGO tag reference is having additional information with respect to HTML elements and their attributes.

Tag Description
<p> Used to define a paragraph
<br> IUsed to inserts a single line break
<pre> Used to insert pre-formatted text