Learn The Pre Tag And Horizontal Rule In HTML

Sharing is healthy !!

Hello guys!! Welcome to flower brackets. In this post we are going to learn the pre tag and horizontal rule in html.

Now i’ve got a very simple html document here and there is no tag in this document that we haven’t already seen before,

<!DOCTYPE html>
<html>
<head>
<title>Pre Tag And Horizontal Rule In HTML</title>
</head>
<body>
<p>This is a normal paragraph...........
used for example ..........................
in this post ............... </p>
</body>
</html>

In the body section we have the opening paragraph tag and closing paragraph tag and in between that we have some text. (as you can see above)

Now if we see this file in browser this is how the text would appear,

Learn The Pre Tag And Horizontal Rule In HTML

So this is how it looks. Now let’s say i want the text to appear just the way we have coded in text editor. That is, i want all the white space between as in the text editor.

What changes do i have to make to this file so that the entire paragraph text appears the way it is in the above file.

What i have to do is change this paragraph tag to “pre” instead of “p” and i’ll have to make changes to the opening and as well as the closing positions like this,

<!DOCTYPE html>
<html>
<head>
<title>Pre Tag And Horizontal Rule In HTML</title>
</head>
<body>
<pre>This is a normal paragraph...........
used for example ..........................
in this post ............... </pre>
</body>
</html>

I’ll save the file. When i execute it now in my web browser this is how it looks,

Learn The Pre Tag And Horizontal Rule In HTML

You can see the white space between the paragraph. So this is what the “pre” tag does and you must have also noticed that the font style has also changed.

Also Read – Learn Html Paragraphs And Line Breaks

You know that’s another effect it has. It copies everything it would just take text inside “pre” tag and it would put it on the website just the way it is in the editor.

And if you want there to be some space after opening “pre” tag then what you can do is you can add some space like this,

<pre>        This is a normal paragraph...........
used for example ..........................
in this post ............... </pre>

After saving this file and if i refresh it in the browser you can see that there is some space like this,

Learn The Pre Tag And Horizontal Rule In HTML

So that’s about pre tag and it’s not really used much.


The next thing that we’re going to check out in this post is how we can get a horizontal rule or a horizontal line in our web pages to separate two sections.

I have a paragraph of text here and let’s say i have another paragraph of text like this

<!DOCTYPE html>
<html>
<head>
<title>Pre Tag And Horizontal Rule In HTML</title>
</head>
<body>
<p>         This is a normal paragraph...........
used for example ..........................
in this post ............... </p>
<p>This is an another paragraph</p>
</body>
</html>

And refresh the web page in google chrome and this is what you see

 

Learn The Pre Tag And Horizontal Rule In HTML

You can see text and then second paragraph text. Now let’s say i want a horizontal line between above two paragraphs.

I will use the “hr” tag for that and it’s very simple. All you have to do is type in “hr” give a space, the forward slash and then the closing angular bracket like this,

<!DOCTYPE html>
<html>
<head>
<title>Pre Tag And Horizontal Rule In HTML</title>
</head>
<body>
<p>         This is a normal paragraph...........
used for example ..........................
in this post ............... </p>
<hr />
<p>This is an another paragraph</p>
</body>
</html>

I’ll save the file and when i refresh my web page this is what i see

Learn The Pre Tag And Horizontal Rule In HTML

You can see horizontal line.

conclusion:

So that’s how “pre” tag and “hr” tag is used in html. I hope you have understood above examples.

Sharing is healthy !!