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?
The <p> tag is used to indicate paragraphs. The <br> tag is used to insert line breaks, not to create paragraphs.
In HTML, the <br> tag is used for line break. It is an empty tag i.e. no need to add an end tag. Writing <br> tag is perfectly fine.
The <p> element is used to identify blocks of paragraph text. The closing <p> tag is optional and is implied by the opening tag of the next HTML element encountered in an HTML document after an opening <p> tag.
Using <br> to change the length of a text line: Using the break tag in an attempt to force the text to appear or break in a specific way ensures that your pages look great on your browser but not necessarily on another browser and certainly not on all devices.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With