Although the br tag is not a best practice, it is used often as a quick fix, such as for example, to display a poem in HTML. Other than quick HTML hacks, we should avoid the br tag because it does not work very well with screen readers. The br tag also contributes to spaghetti code. Another reason to avoid it.
Using the “br” tag is something you normally won't or shouldn't do, especially if you're just trying to add vertical spacing between paragraphs (the “p” tag is supposed to add that automatically) or other elements on the page.
The <br> HTML element produces a line break in text (carriage-return). It is useful for writing a poem or an address, where the division of lines is significant.
If you are outputting HTML on a regular website you can use <br> or <br/> , both are valid anytime you are serving HTML5 as text/html. If you are serving HTML5 as XHTML (i.e. content type application/xhtml+xml, with an XML declaration) then you must use a self closing tag like so: <br/> .
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.
There are cases where <br>
is semantically valid, i.e. cases where the line break is part of the data you're sending. This is really only limited to 2 use cases - poetry and mailing addresses.
I think your development team is refering to <br />
in place of margin spacing. To make empty space between elements, use padding / margin styling via CSS.
Bad use of <br />
:
<div>
Content
</div>
<br />
<br />
<br />
<br />
<div>
More content...
</div>
Good use of <br />
:
<style>
div {
margin-top:10px;
}
</style>
<div>
Content<br />
Line break
</div>
<div>
More content...
</div>
Generally, <br/>
is an indication of poor semantic HTML. The most common case is using <br/>
to declare paragraph separations, which there are much better ways to do it semantically. See Bed and BReakfast.
There are occasions where it is the proper tag to use, but it is abused often enough that people adopt a "do not use" mentality as to force better semantic thinking.
What was meant by your team was probably not to use <br>
s to split between paragraphs.
For example :
<p>I am a paragraph</p>
<p>I am a second paragraph</p>
is the better way to do that, because you can then easily adjust the spaces between paragraphs through CSS. Other than that, I can not think of anything speaking against line breaks as such.
Same concept applies to why we don't use tables for layout - use tables for tables and CSS for layout.
Use <br/>
for break lines in a block of text and CSS if you want to affect the layout.
Specifying the layout directly makes it difficult adapting the site for different page sizes or fonts for example.
I will generally always set appropriate margins and padding on elements using CSS - it's a lot less messy than loads of <br />
s all over the place apart from being more semantically correct.
Probably the only time I would use a <br />
in preference to the margins and padding set by CSS, even if it's not strictly technically correct, is if it was an isolated incident where slightly more space was needed. If I'd got quite a large stylesheet and it didn't seem worth setting up an additional style just for that one occurence, I may use a <br />
as a one-off.
Like most things, <br />
s aren't a bad thing providing they're used correctly.
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