Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

When to use <br> line breaks vs CSS positioning?

I've often wondered about the proper use of a <br> line break. Seems that often they are incorrectly used for positioning or clearing content where CSS should instead be used.

W3schoools.org says to use <br> for blank lines, but not for creating or separating paragraphs. Looking over W3C HTML5 spec draft, it's a little clearer that the <br> would be used when content requires a line break such as lines of an address or blank lines in poetry, where intended by the author.

But I'm still interested in any further clarification or input anyone else may have. I often find myself opting not to use <br> tags but instead just styling elements with the desired clears, margins, paddings, etc. to create the space desired.

Not that it's supremely important, but here's the example that got me thinking about this where a popular ("authoritative") site used a <br> that I'm not sure is quite semantic. Here I would've just cleared the <a> from it's siblings via CSS:

<p>Lorem ipsum dolor sit amet, consectetur tempor laborum.</p> <br> <a href="#readmore">more &gt;&gt;</a> 
like image 917
brandonjp Avatar asked Oct 14 '10 20:10

brandonjp


People also ask

Should you use BR or CSS?

The main reason for not using <br> is that it's not semantic. If you want two items in different visual blocks, you probably want them in different logical blocks. In most cases this means just using different elements, for example <p>Stuff</p><p>Other stuff</p> , and then using CSS to space the blocks out properly.

Do line breaks matter in CSS?

You are completely right, you don't need comments or line breaks. As long as you use ; at the end of the property. Please look into PHP Minify where you can have full CSS, JS and HTML with line breaks or however you want them to be readable.

When should br be used?

br elements must be used only for line breaks that are actually part of the content, as in poems or addresses. br elements must not be used for separating thematic groups in a paragraph."

Why it is best to use paragraph tags P versus line breaks BR when separating blocks of text on a webpage?

You want to use the <p> tag when you need to break up two streams of information into separate thoughts. 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.


2 Answers

To me, linebreaks should only be used inside paragraphs to indicate a new line. Adding line-breaks between paragraphs was used back in the day, when HTML looked like Chop Suey and the semantics of the HTML document looked like someone from preschool used Dreamweaver.

I personally rely on margins and padding for content separation, if I have to use a <br /> it means I've done something wrong. I think lines of an address are a perfect example of proper usage and I would stick to only those scenarios.

like image 183
Marko Avatar answered Oct 11 '22 21:10

Marko


When the linebreak has semantic meaning within the unstyled document.

As someone said, poetry is a good example - conventionally, poetry is written with a linebreak between lines. As are addresses. It does not make sense to mark up a line of a poem or an address with a paragraph element, as these are better matches to the whole address or a stanza of the poem.

like image 22
Chris Cox Avatar answered Oct 11 '22 21:10

Chris Cox