When to use <p> vs. <br>

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

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>

Tags:

Html

Recent Posts