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

Question

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>

Solution 1

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.

Solution 2

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.

Solution 3

I agree with the specification, br should be used to create new lines of text within a paragraph. Semantically it makes, sense- a paragraph is a block of text with some top or bottom margin, whereas br specifies no margin, just a newline a the same line-height / line-spacing.

Solution 4

I use line breaks when customers may be able to edit things - it's easier if they just use the return key rather than get confused as to why spaces appear around certain elements on the page. This is almost always within text areas though, there's no reason to position anything else using <br />

View more solutions