Paragraphs in HTML - ProgrammerTech


Paragraphs in HTML

  • Share this:
Paragraphs in HTML


Paragraph is a space defined by the <p> tag.

And this space is allocated in order to display the text we put in it on a new line and browsers are only able to add a white margin before and after the paragraph.

We will discuss the tags for paragraphs in particular and their formatting in general.

The use of colors and graphics on the page to give it a kind of vitality and that the fonts give the page a rune and beauty.

To get a better page layout, you have to deal with paragraphs and lists on the page to get a well organized page.

Ranking is the first step to getting visitors to your site.

Example 1

<p>Programmer Tech</p>

The p tag is a single tag, but it is also used as a double tag. This tag can also specify the direction of paragraphs and texts through some properties that are used with the P tag, namely align, dir.

Example 2

<p>Programmer Tech   website   learn     programming</p>

In this example we created a paragraph but left spaces between words in that paragraph.

And when we run the code in the browser, we will find it like this.

Paragraphs are marked with p and the spaces are ignored


As we noticed when we ran the code, the spaces were ignored and not counted.

Example 3

<p>Learn the basics of programming
computer science  information security
scripts - linux - computer programs</p>

We created a paragraph but it was multiple lines under one tag.

When we run this code in the browser.

p paragraph in html with multiple lines ignored


We note from the previous result that all the lines were merged into one line and the text was not printed as it is.


Paragraph direction control

An alignment property that specifies the direction of a paragraph. It takes a set of values: left, right, center, right, left.

<p align="right">Programmer Tech</p>

In the previous example, the text direction will be on the right of the page instead of the default position, which is the left of the page.

What if we want the text or paragraph to be in the middle here we have to use the other value which is center.

<p align="center">Programmer Tech</p>

Likewise, if we want the value to the left of the page, we put left .


Go down on a new line in a paragraph

The <br> tag is a single tag that is used to tell the browser to go down from the current line and start a new line within the paragraph as if we pressed the Enter button.

And the meaning of br means break, i.e. to stop, stop displaying on the same line and start on a new line.

<p>Programmer Tech website. <br> learn programming.</p>

We used the <br> tag to drop a new line in this paragraph and start a new line with the text after the tag.

When you run this code, the result will be that it has downloaded a new line.


Display more than one space between words

use &nbsp; Replace the spaces in the line, and this tag is special to give spaces in the html line in the paragraphs.

It gives one space per line and we write this tag as many spaces as we want in order to inform the browser that there is a space.

<p>Programmer Tech website.&nbsp;&nbsp;&nbsp; learn programming.</p>

In this paragraph we have used three times, which will leave us three spaces in this paragraph.


Display text as is

The function of the <pre> tag is to display the text as it is in the preformatted code editor, the meaning of this term in English is Preformatted Text and its translation is preformatted text.

	<pre>A    B    C    D</pre>
	<pre>E    F    G    H</pre>
	<pre>I    J    K    L</pre>
	<pre>M    N    O    P</pre>
	<pre>Q    R    S    T</pre>
	<pre>U    V    W    X</pre>

As we can see, thanks to the <pre> tag, we have shown the result of the code as it is in the editor with spaces.

Unlike the p tag, if we leave spaces in the p tag, it will not be displayed in the browser, but when using <pre> this problem is solved.

The result of the previous code in the browser.

Preserve spaces in paragraphs with the pre . tag


We note that there was a uniform spacing between the letters. If we had not used this hashtag, you would have expected that we used a large number of hashtags and .


Display a code on the page to appear as text

We have to think about making the browser consider the code written on the page as plain text and not read as code.

In order to make the browser consider the code written as plain text:

  1. We convert each < sign in the code to the < symbol.
  2. We convert each & sign in the code to the & symbol.


Display a horizontal line on a web page

To display a horizontal line on the page we put the <hr> tag only, and the meaning of <hr> is an abbreviation of the word Horizontal Rule, which means a horizontal ruler, and it is a single tag that does not have an end tag to close it.

<p>Learn the basics of programming<br>
computer science  information security<br><hr>
scripts - linux - computer programs</p>

In our example, we used <hr> to draw a horizontal line in the result of the code page.

When running the above code in the browser.

hr tag to draw a horizontal line in an html paragraph


We also noticed that a horizontal line was drawn for us in the result of the previous code because we used <hr>.

Muhammad Alush

Muhammad Alush

إسمي محمد تركي العلوش من سورية من ريف حلب الشرقي 1994, محب للتقنية و التعلم الذاتي, و جميع خبراتي تعلمتها ذاتياً, و اللغات البرمجية التي أتقنها هي html, css, javascript, php, c, python بالإضافة إلى حبي الكبير لمجال الشبكات.