You are currently viewing HTML Paragraph | Lesson 08 HTML tutorial
Paragraph lesson image

HTML Paragraph | Lesson 08 HTML tutorial

In this lesson you will understand how to create paragraph in html and how to add text to that paragraph and will know how to print the edited text as it is in the editor with out any browser interfering.

IF you prefer visual Explain! watch this video:

HTML Paragraphs Video

HTML Paragraphs

First of all the HTML <p> element defines a paragraph:

Example:

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

HTML Display

You cannot be sure how HTML will be displayed in browser. Large or small screens, and resized windows will create different results, even if, your editor styling could not be the same in browser. With HTML, you cannot change the output by adding extra spaces or extra lines in your HTML code. So,the browser will remove any extra spaces and extra lines when the page is displayed:

Example

<p>
This is 5 spaces     and her is new line

the previous text will be displayed in the same line without the break line or 5 spaces.
</p>

so to solve that issue we could use some other html tag which could keep the text as it is in the editor. which is:

The HTML <pre> Element

The HTML <pre> element defines preformatted text. The text inside a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks.

Example:

 <pre>
  This is 5 spaces     and her is new line

This code will be viewed in the browser as it is.
</pre> 

HTML Line Breaks

The HTML <br> element defines a line break. Use <br> if you want a line break (a new line) without starting a new paragraph.

Example:

<p>This is an example of how to write <br/> break line </p>


This post is one of the HTML5 for deep understanding course. where we will learn every common elements from basic to the advanced element.

In addition each lesson has a video which you could visit and watch for more practicing and for deep understanding.

We hope that we could give the best for you and for the deep and easy understanding.

You could follow the series from our website SAFHATECH.com and go to categories and then programming and then Choose the course you want then just click next post to go step by step.

Finally we hope every thing is works as you suspect.


Consequently You could follow us at :

Website URL: https://www.safhatech.com/

Youtube: https://www.youtube.com/channel/UCIVzh6iykNowNcOUT5Gfasw

Twitter: http:// https://twitter.com/safhatech

Instegram: https://www.instagram.com/safhatech

Facebook: http:// https://www.facebook.com/Safhatech-487171875443687

Phone:967772223681

Leave a Reply