Is It Sometimes Bad to Use ≪Br /≫

Is it sometimes bad to use 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.

Is it out of date to use br / tag nowadays? If so, what should I use instead?

<br /> is meant to be used as to represent a break in said content, a common example would be an address:

<p>
    20 street name<br />
    City Name<br />
    etc.
</p>

As you can see in the above example, the address is all one group of content, the breaks are only for presentational purposes.

In short: <p> tags should be used to seperate content into blocks, and the <br /> tag should be used for any breaks needed in that content (for presentational purposes, as in the example above)

The <br /> tag is perfectly valid, it's in the current HTML5 spec too.

HTML/CSS: To use the br tag or to repeat styling

There are various factors that would define which one should be used.

For example, if you wish to retrieve this header text, how you want value. You want entire text or individual values. If individual values are expected, I'd suggest using multiple headers.

On the contrary, if you want to receive entire value together, use single header with brs. But using <br/> is not considered good practice and you should refer: Is it sometimes bad to use <BR />?

Another such case would be for adaptive design. On smaller screen how should they wrap? If you are fine with *location?.streeth* *location?. on one line and number* on next, you can use single header. But if you want *location?.number to wrap in next line, using multiple elements would suit better.

If values are not going to be retrieved and its just for view, then either one would do. But in such cases, I'd go for <p> (as suggested by apokryfos) and add custom styling for view.

It is worth noting that HTML 5 has put a great deal of effort into making web pages semantic by adding a number of tags which are visually identical but differ in name and therefore purpose. For that reason, you should use a header tag (like e.g. `) to contain a 5 level header, e.g., when you need to specify a 5 level subsection to a document. This means that you should not use a header at all for the elements in question because the sole purpose of the header being used is for styling rather than offering semantic significance.

Should br / and hr / be avoided at all costs in web design?

There is nothing wrong with using <br /> or <hr />. Neither of them are deprecated tags, even in the new HTML 5 draft spec (relevant spec info). In fact, it's hard to state correct usage of the <br /> tag better than the W3C itself:

The following example is correct usage of the br element:

<p>P. Sherman<br>

42 Wallaby Way<br>

Sydney</p>

br elements must not be used for separating thematic groups in a paragraph.

The following examples are non-conforming, as they abuse the br element:

<p><a ...>34 comments.</a><br>

<a ...>Add a comment.<a></p>

<p>Name: <input name="name"><br>

Address: <input name="address"></p>

Here are alternatives to the above, which are correct:

<p><a ...>34 comments.</a></p>

<p><a ...>Add a comment.<a></p>

<p>Name: <input name="name"></p>

<p>Address: <input name="address"></p>

<hr /> can very well be part of the content as well, and not just a display element. Use good judgement when it comes to what is content and what is not, and you'll know when to use these elements. They're both valid, useful elements in the current W3C specs. But with great power comes great responsibility, so use them correctly.

Edit 1:

Another thought I had after I first hit "post" - there's been a lot of anti-<table> sentiment among web developers in recent years, and with good reason. People were abusing the <table> tag, using it for site layout and formatting. That's not what it's for, so you shouldn't use it that way. But does that mean you should never use the <table> tag? What if you actually have an honest-to-goodness table in your code, for example, if you were writing a science article and you wanted to include the periodic table of the elements? In that case, the use of <table> is totally justified, it becomes semantic markup instead of formatting. It's the same situation with <br />. When it's part of your content (ie, text that should break at those points in order to be correct English), use it! When you're just doing it for formatting reasons, it's best to try another way.

What does br/ do exactly?

As mentioned, the br element introduces a line break. How exactly this element is implemented in CSS varies greatly across browsers, but as you're dealing with two block-level boxes, I'm not surprised the behavior is consistent here.

The difference in behavior between floating and absolute positioning is that floats never intersect with each other normally (unless you force them to, using negative margins), whereas absolutely positioned elements can intersect because they're not aware of one another (and neither is the rest of the layout).

But note that position: absolute by itself does not change an element's static position (i.e. where it would otherwise be if it wasn't absposed). See the following questions:

• Why is a div with "position: absolute" not by default relative to the document?
• What are the default top, left, botton or right values when position:absolute is used?

This is why the br affects the layout of the second absolutely positioned element. If you hide the first element, it becomes much clearer that the br is just starting on the first line of the document, unaware of the first element, but the second element is aware of the br:

.box {  position: absolute;  border: 1px solid black;  padding: 1em;}
.box:first-child {  visibility: hidden;}

<div class="box"></div><br><div class="box"></div>

<form method="post" action="/registration">
  <label for="alias">
    Alias: <input type="text" name="alias" id="alias">
  </label>    
  <label for="email">
    E-mail: <input type="text" name="email" id="email">
  </label>
  <input type="button" value="registger">
</form>

label[for], // just selects labels that have the "for" attribute.
input[type="button"] {
  display: block;
  // And a bottom margin for good measure :)
  margin: 0 0 10px; // shorthand for margin-bottom
}