When to use <p> vs. <br>

Html

Html Problem Overview


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?

Html Solutions


Solution 1 - Html

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>

Solution 2 - Html

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

Solution 3 - Html

I may be breaking rules of etiquette when answering a question in this thread —as most of the answers thus far have been great —but here's how I approach this argument:

While I agree that a 'p' is element which is used to hold text and a 'br' tag is used to break text, in many occasions one may want to manipulate a 'block' of text that have actual line spaces between them;

Ex:
[my block of text]
Hello World!
--------this is a blank line------
You are so full of life!
[/my block of text]

Now many would argue that you can just place two 'p' elements in a 'div' and then manipulate that 'div', however I feel this is more time consuming (aka I'm lazy), and thus I stick with a double 'br' method —leaving me to manipulate just that one 'p.'

The issue with my unorthodox method is that if there is a specific styling applied to line-height, then there will definitely be a noticeable difference between the line-space created by a double 'br' vs. a 'p'.

I guess in when deciding which technique to follow, consider:

  • code readability
  • best practices
  • time
  • effects of shortcuts on the rest of your code

Solution 4 - Html

You should use <p> when you want to separate two paragraphs. From Wikipedia:

> A paragraph (from the Greek paragraphos, "to write beside" or "written > beside") is a self-contained unit of a discourse in writing dealing > with a particular point or idea.

Use the <br> tag when you want to force a new line inside your paragraphs.

Solution 5 - Html

I wouldn't use <p> unless you intend to put content within it. Of course, this is merely an opinion (as I assume most answers will be).

However, it may be easier to style a <p> tag (there are more options at least) which may lend itself to be used more often. My only problem is that this is not very easy to read (when reading code) and I feel like those styles could be applied elsewhere (possibly to the tags that would surround the <p> tag.

Also, as other have stated, a <br /> tag should be used to separate content within a block element (such as the <p> tag). If you are using the following:

<p class="a">some content...</p>
<p class="break"></p>
<p class="b">some other content...</p>

Then I would argue that you should use styles on one or both of the tags surrounding the p.break tag to do any spacing that is required.

Solution 6 - Html

The p tag is a block level element, and is mainly used to add content, whereas the br tag is used to force a line-break within the element. That is, if you're going to follow semantics. A lot of people are doing that these days to add specific meaning to tags and whatnot. I hope that helps. Good luck, though. =)

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionwillthefirstView Question on Stackoverflow
Solution 1 - HtmlKermitView Answer on Stackoverflow
Solution 2 - HtmlEric GoncalvesView Answer on Stackoverflow
Solution 3 - HtmlbrooklynswebView Answer on Stackoverflow
Solution 4 - Htmldan_sView Answer on Stackoverflow
Solution 5 - Htmluser131441View Answer on Stackoverflow
Solution 6 - HtmlTonyView Answer on Stackoverflow