When to use vs. [closed]

Answer 1

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. =)

Answer 2

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.

Answer 3

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.

Answer 4

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

Answer 5

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

Answer 6

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>