When to use <p> versus <br>

Question

What is the verdict when you should use a different <p>...</p> instead of the <br /> tag? What are the best methods for this kind of thing?

I looked around on this subject, but most of the writing seems a bit old, so I'm not sure if opinions on this topic have developed since then.

EDIT: to clarify the issue, here is the situation I'm dealing with. Do you use <br> or <p> for the following content (imagine that it is contained in a div on the home page):

---

Welcome to the homepage.

Check out our materials.

You really have to.

---

Now these lines are not technically “paragraphs”. So, would you mark this by surrounding the entire block with a <p> tag using <br> between them, or instead use a separate <p> for each line?

Answer 1

They serve two different functions.

<p> (paragraph) is a block element that is used to store text. <br /> used to force a line break inside 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

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

Update

In accordance with the new requirements, I personally would use <p> to achieve the interval, as well as for styling. If in the future you want to create one of these parts, it will be much easier to do 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> 

Answer 2

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

It is time for allddddddddddddddddddddddd good people to come to the rescue of their country b.

 <p>**The quick** brown fox jumped over the lazy sleeping dog.</p> 

The <br/> tag is used as a forced line break in the text stream of a web page. Use it when you want the text to continue on the next line, for example, using poetry.

It is time for all good people to come to the rescue of their country booooooooo.
A quick brown fox jumped over a lazy sleeping dog.

strong text source

Answer 3

I can violate the rules of etiquette when answering a question in this thread, since most of the answers so far have been wonderful, but here is how I approach this argument:

Although I agree that “p” is an element that is used to store text, and the “br” tag is used to break text, in many cases you can manipulate a “block” of text that has actual line spaces between them;

Example:
[my block of text]
Hello World!
-------- This is an empty line ------
You are so full of life! [/ my block of text]

Now many argue that you can just put two "p" elements in a "div" and then manipulate that "div", however I feel it takes longer (aka, I'm lazy), and thus I stick with the double br method allowing me to manipulate only one p.

The problem with my unorthodox method is that if a certain style is applied to the height line, then there is a certain difference between the line space created by the double 'br' vs. a 'p' will be noticeable.

I assume that when deciding which method to follow, consider:

• code readability
• best practics
• Time
• shortcut effects on the rest of your code.

Answer 4

You must use <p> if you want to separate two paragraphs. Material from Wikipedia:

A paragraph (from a Greek paragraph, “write side by side” or “written“ in addition to ”) is an autonomous unit of discourse in writing with a specific point or idea.

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

Answer 5

I would not use <p> if you do not intend to post content to it. Of course, this is just an opinion (as I believe most answers will be).

However, it may be easier to style the <p> (at least more parameters), which can be used more often. My only problem is that reading is not so easy (when reading the code), and it seems to me that these styles can be applied elsewhere (perhaps to the tags that surround the <p> .

In addition, as others have indicated, the <br /> tag should be used to separate content within a block element (for example, the <p> ). If you use the following:

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

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

Answer 6

The p tag is a block level element and is mainly used to add content, while the br tag is used to force line breaks inside an element. That is, if you are going to follow semantics. Many people do this these days to add a specific meaning to tags and much more. Hope this helps. Good luck, however. =)