Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

When to use <p> vs. <br> [closed]

Tags:

html

What's the verdict on when you should use another <p>...</p> instead of a <br /> tag? What's are the best practices for this kind of thing?

I looked around for this question, but most of the writing seems a bit old, so I'm not sure whether opinions about this topic have evolved since.

EDIT: to clarify the question, here is the situation that I am dealing with. Would you use <br>'s or <p>'s for the following content (imagine it's contained in a div on a homepage):


Welcome to the home page.

Check out our stuff.

You really should.


Now, these lines are not technically 'paragraphs'. So would you mark this up by surrounding the whole block in a <p> tag with <br>'s in between, or instead use separate <p>'s for each line?

like image 238
willthefirst Avatar asked Dec 03 '12 17:12

willthefirst


People also ask

What's the difference between P and BR tags?

The <p> tag is used to indicate paragraphs. The <br> tag is used to insert line breaks, not to create paragraphs.

Does br need to be closed?

In HTML, the <br> tag is used for line break. It is an empty tag i.e. no need to add an end tag. Writing <br> tag is perfectly fine.

Should P tag be closed?

The <p> element is used to identify blocks of paragraph text. The closing <p> tag is optional and is implied by the opening tag of the next HTML element encountered in an HTML document after an opening <p> tag.

How do you use BR P?

Using <br> to change the length of a text line: Using the break tag in an attempt to force the text to appear or break in a specific way ensures that your pages look great on your browser but not necessarily on another browser and certainly not on all devices.


2 Answers

They serve two different functions.

<p> (paragraph) is a block element which is used to hold text. <br /> is used to force a line break within the <p> element.

Example

<p>Suspendisse sodales odio in felis sagittis hendrerit. Donec tempus laoreet est bibendum sollicitudin. Etiam tristique convallis<br />rutrum. Phasellus  id mi neque. Vivamus gravida aliquam condimentum.</p> 

Result

Suspendisse sodales odio in felis sagittis hendrerit. Donec tempus laoreet est bibendum sollicitudin. Etiam tristique convallis
rutrum. Phasellus id mi neque. Vivamus gravida aliquam condimentum.

Update

Based on the new requirements, I would personally use <p> to achieve the spacing as well as allow for styling. If in the future you wish to style one of these parts, it will be much easier to do so at the block level.

<p>Welcome to the home page.</p>  <p style="border: 1px solid #00ff00;">Check out our stuff.</p>  <p>You really should.</p> 
like image 164
Kermit Avatar answered Sep 23 '22 05:09

Kermit


You want to use the <p> tag when you need to break up two streams of information into separate thoughts.

<p> Now is the time for all good men to come to the aid of their country. </p>  <p>The quick brown fox jumped over the lazy sleeping dog.</p> 

The <br/> tag is used as a forced line break within the text flow of the web page. Use it when you want the text to continue on the next line, such as with poetry.

<p>  Now is the time for all good men to come to the aid of their country. <br/> The quick brown fox jumped over the lazy sleeping dog. </p> 

source

like image 33
Eric Goncalves Avatar answered Sep 22 '22 05:09

Eric Goncalves