When to use <p> vs. <br> [closed]
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?
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>
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
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
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.