Hello everyone!!! Welcome to Flower Brackets. In this post we are going to learn html paragraphs and line breaks.
Learn Html Paragraphs And Line Breaks
Let us understand html paragraphs and line breaks with an example,
<!DOCTYPE html> <html> <head> <title>Line Breaks and Paragraphs Example</title> </head> <body> <p>First Paragraph.</p> <p>Second Paragraph.</p> </body> </html>
As you can see above the title of the above example or web page is “Line breaks and paragraphs example” and in the body section i have two paragraphs and i’ve used the paragraph tag and this is something that we discussed in the previous post.
Also Read – HTML Attributes
So to have a paragraph in html you need to use the ‘p’ tag within the body section and you write text between the opening ‘p’ tag which is just the alphabet ‘p’ and the closing ‘p’ tag which is alphabet ‘p’ you know preceded with a forward slash.
This is how the web page would look,
If you would open it in a web browser; you have “Paragraph 1” and then some break and then you have the “Paragraph 2”.
Now let’s say you know you do not have a separate paragraph for the “Paragraph 2”. So what i’m going to do is i’m going to get rid of opening paragraph tag and also the closing paragraph tag like this,
<!DOCTYPE html> <html> <head> <title>Line Breaks and Paragraphs Example</title> </head> <body> <p>Paragraph 1 Paragraph 2</p> </body> </html>
I will save this file and i just have one paragraph and as i said html is wide space insensitive so you know all the white space between the “Paragraph 1” and “Paragraph 2” is not going to show up in the browser. Like this,
There you go. You see that you have “Paragraph 1” and then “Paragraph 2” displayed on the same line.
Now let’s say we want these two paragraphs appear on different lines but you also do not want to have a separate paragraph. So the way you do that is by using the line break tag or <br /> tag and it’s one of the most popular tags in html and it’s the endearing tag.
So all you have to do is have the lesser and greater than symbols and type in “br” between brackets, space and a forward slash. Like this,
<!DOCTYPE html> <html> <head> <title>Line Breaks and Paragraphs Example</title> </head> <body> <p>Paragraph 1 <br /> Paragraph 2</p> </body> </html>
When i refresh it in my browser,
I see that “Paragraph 2” is displayed on the next line and it doesn’t have as much space that had earlier when i used different paragraphs for the two statements.
So paragraph and line break are the two of the most used tag elements in html and we will be using them extensively in our posts. I hope you guys have understood the concept.