When to Use <Br> Line Breaks Vs CSS Positioning

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.

How to line-break from css, without using br /?

Impossible with the same HTML structure, you must have something to distinguish between Hello and How are you.

I suggest using spans that you will then display as blocks (just like a <div> actually).

p span {  display: block;}

<p><span>hello</span><span>How are you</span></p>

Prescribing line break positions in CSS or HTML

The key is to put line breaks (<br> tags) in the text, and then manipulate the display property of said <br> tags with media queries.

For example, you can put <br> tags with classes like this:

Lorem ipsum <br class="md" /> dolor sit <br class="sm" /> amet

And use media queries to enable them

br {display:none;/*Initially disable line breaks*/}

@media(max-width:1200px) {
    br.md {display:inline;/*Enable br tags in screen width<=1200*/}
}

@media(max-width:767px) {
    br.sm {display:inline;/*Enable br tags in screen width<=767*/}
}

You will have to find the optimal position for placing <br> tags manually. (by emulating all media query breakpoints) But you get the idea.

Using br/ versus p/p versus CSS for form fields, what is the current accepted best practice for desktop, mobile, and accessibility?

In HTML5, the br element must only be used if the line break is "actually part of the content". Typical examples where br is appropriate: in postal addresses and in poems.

As the line break in your example is not meaningful (it seems to be needed only for layout reasons; see also the example below), you must not use br. You should use CSS instead (display:block).

The div element typically comes with this CSS declaration by default, and using it (or more specific elements, like p, if appropriate) allows user-agents without CSS support (e.g., text browsers) to display the content in a more comprehensible manner (they’d typically also display line breaks if a so-called "block-level" element is used).

The spec explicitly mentions a similar case in an example:

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

[…]
<p><label>Name: <input name="name"></label><br>
<label>Address: <input name="address"></label></p>

When are br elements ignored when within a paragraph?

In my opinion most browsers follow the WHATWG specification and I would do it also. World Wide Web Consortium (W3C) has On 28 May 2019 announced that WHATWG would be the sole publisher of the HTML and DOM standards. If we have in this specification following rules only, then I would follow those rules.

WHATWG has following recommendations for br element:

The br element represents a line break.
Note: While line breaks are usually represented in visual media by physically moving subsequent text to a new line, a style sheet or
user agent would be equally justified in causing line breaks to be
rendered in a different manner, for instance as green dots, or as
extra spacing.
br elements must be used only for line breaks that are actually part
of the content, as in poems or addresses.
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><label>Name: <input name="name"></label><br>
<label>Address: <input name="address"></label></p>
Here are alternatives to the above, which are correct:
<p><a ...>34 comments.</a></p>
<p><a ...>Add a comment.</a></p>
<p><label>Name: <input name="name"></label></p>
<p><label>Address: <input name="address"></label></p>
If a paragraph consists of nothing but a single br element, it
represents a placeholder blank line (e.g. as in a template). Such
blank lines must not be used for presentation purposes.
Any content inside br elements must not be considered part of the
surrounding text.
Note: This element has rendering requirements involving the bidirectional algorithm.
Source: WHATWG: The br element

In your examples you have br elements in <br></p> and in <br></a></p> on the end of <p> element. The new line on the end of this element does nothing, but only in this case. In such of this cases you can ignore it. It is also the same in the case of br elements in <br></a></div> and in <br></div> on the end of <div> element.

Cite from WHATWG recommendations (see above): If a paragraph consists of nothing but a single br element, it represents a placeholder blank line. Also it is not empty (like user kalkronline wrote). And in case of W3C and WHATWG opinions conflict user agents have to follow WHATWG recomandations (see above).

Do not forget about style possibility (for ex. clear) for br element.

Update from 25/06/2020

I want to post and explain the cite from WHATWG recommendations again(see above):

If a paragraph consists of nothing but a single br element, it represents a placeholder blank line.

This is showed like:

p{border:1px dashed red}

<b>1. example:</b>
<code><p><br></p></code>
<p><br></p>
<b>2. example:</b>
<code><p>I am a line<br><br></p></code>
<p>I am a line<br><br></p>
<b>3. example:</b>
<code><p></p></code>
<p></p>

Spaces and new lines with HTML and CSS

Use <br> to represent a linebreak inside a block element and use to represent a non-breaking space inside an inline element. Nothing more. For the remnant just use CSS the smart way with help of under each the display, float, padding and/or margin properties.

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>