Is it sometimes bad to use <BR/>
tags?
I ask because some of the first advice my development team gave me was this: Don t use <BR/>
; instead, use styles. But why? Are there negative outcomes when using <BR/>
tags?
Is it sometimes bad to use <BR/>
tags?
I ask because some of the first advice my development team gave me was this: Don t use <BR/>
; instead, use styles. But why? Are there negative outcomes when using <BR/>
tags?
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.
If you do this: <BR/> <BR/>
You will get diffrent layout on different browsers.
Deeper:
If you use <BR/>
just for line breaks - ok.
If you use <BR/>
as a line spacer - not ok.
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.
I try to write my markup in a way that it s easily readable with CSS disabled. If you re just using BRs to add spacing, it s better to use margins and padding.
<br />
should be used for line breaks only, and not to apply style to a page. For example, if you need extra space between paragraphs, give them a class and apply the extra padding to the paragraphs. Don t spread out your paragraphs with <br /><br ><br />
They are to be used to represent newlines. Nothing more. Not to fill up space like as at the average geocities site. There is however only one case wherein they may be useful for other purposes than putting a newline: to clear the floats.
<br style="clear: both;">
Don t use three or more consecutive <br>
s, that s a signal you re using them for stylistic purposes and no, you shouldn t.
Some would say a single <br>
is enough and instead of two you should use <p></p>
, but there are situations (e.g. screenplays) in which you want to introduce a longer pause without implying a change of topic or a new period starting, like a paragraph usually does.
They re fine, if used appropriately. For instance, you shouldn t use them in lieu of <p>
tags or to create spacing between elements. You re probably doing something wrong if you ever have two in a row.
Here s an example how <br>
can negatively affect styling (run snippet for visuals)
(note the misaligned button and odd space on the right):
button {
width: 70px;
height: 70px;
}
#arrows {
border: solid thin red;
display: inline-block;
}
#arrows span:first-of-type {
text-align: center;
display: block;
}
#moveUp {
margin: 0;
}
/* In the current case instead of <br> use display */
/*
#arrows span:last-of-type {
display: block;
}
*/
<div id="arrows">
<span>
<button id="moveUp" value="üles">↑</button>
</span>
<button id="moveLeft" value="vasakule">←</button>
<button id="moveDown" value="alla">↓</button>
<button id="moveRight" value="paremale">→</button>
<br> <!-- note the shifted button and odd space on right -->
<span>or move with keyboard arrows</span>
</div>
I am trying to create a search text-field like on the Apple website. The HTML looks like this: <div class="frm-search"> <div> <input class="btn" type="image" src="http://www....
I have a div <div id="masterdiv"> which has several child <div>s. Example: <div id="masterdiv"> <div id="childdiv1" /> <div id="childdiv2" /> <div id="...
I m writing a php script to crop an image. The script overwrites the old image with the new one, but when I reload the page (which is supposed to pickup the new image) I still see the old one. ...
<form><input type="file" name="first" onchange="jsFunction(2);"> <input type="file" name="second" onchange="jsFunction(3);"</form> Possible to pass just numbers to the js ...
So I ve got a menu with a hover/selected state and it loads fine in IE6/IE7. However when I scroll down the page and put the element outside of the viewport and then back in I get a broken image! I ...
I am building some basic HTML code for a CMS. One of the page-related options in the CMS is "background image" and "stretch page width / height to background image width / height." so that with large ...
Is it possible to reload a form after file-input change? I have a form where the user can chose an image for upload. I also have a php script which displays that image resized. I only wonder if it ...
I d like to add a simple separator line in an aspx web form. Does anyone know how? It sounds easy enough, but still I can t manage to find how to do it.. 10x!