When are <br> elements ignored when within a paragraph?

Question

I have found out that sometimes, <br> elements are not rendered in the browsers I use (Firefox and Chrome).

<p>Hello<br></p>
<p>Hello<br></p>

will be rendered the same as :

<p>Hello</p>
<p>Hello</p>

In the same way,

<p>Hello <a href="https://ddg.gg">ddg<br></a></p>
<p>Hello</p>

and :

<p>Hello <a href="https://ddg.gg">ddg</a></p>
<p>Hello</p>

will also be rendered without any linebreaks when opened in the browser.

I couldn't find the section in the HTML spec that specifies this behavior, do you know where to find the spec for this or could you phrase this behavior in a simple way ?

I would also be interested in reasons for having this behavior if you know them.

EDIT : I know it is quite "incorrect" to place br elements at this position in the HTML, I'm not the one who generates this HTML, but I need to convert this HTML to another format so I'm interested in understanding how browsers handle this case.

Answer 1

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>&lt;p&gt;&lt;br&gt;&lt;/p&gt;</code>
<p><br></p>
<b>2. example:</b>
<code>&lt;p&gt;I am a line&lt;br&gt;&lt;br&gt;&lt;/p&gt;</code>
<p>I am a line<br><br></p>
<b>3. example:</b>
<code>&lt;p&gt;&lt;/p&gt;</code>
<p></p>

The case in first example means that this represents a placeholder blank line. And this is not empty! Why? Because a placeholder blank line has some font size properties. In other case it would be like in third example – empty.

The case in the second example shows us two br elements on the end of block element and we can see that last br element was ignored, but the second br element from the end has his own line.

The user kalkronline has done the research again, but he has found wrong explanation wih misinterpretation from user Rei. The explanation from user Rei is only at the first look logical, but if we read what I wrote than we will see that he has done logical mistakes. My second example shows us user's Rei mistake because according to his description we would have to have an empty line. The cite from user's Rei misinterpretation:

Because the line has zero characters, it is rendered as an empty line.

But it is because no elements follows after it in this block element!

Conclusion

I would like to write some rules for your converter:

1. If a paragraph consists of nothing but a single br element, it represents a placeholder blank line (from WHATWG recommendations)
2. All br elements at the end of block elements if after them is nothing coming should be ignored.
3. Only the last br element from two or more br elements on the end of block elements has to be ignored. But previous br elements have to have an own line with font size height.
4. You have to follow all WHATWG recommendations.

---

Usefull links:

• WHATWG: The br element
• <br>: The Line Break element (MDN)
• WHATWG: HTML Living Standard. The definition of '<p>' in that specification.
• <p>: The Paragraph element (MDN)
• Me and others. 1971 USSR (very good documentary film about logical mistakes and mind manipulations with english subtitles(turn them on))

Answer 2

The <br> element has a single, well-defined purpose — to create a line break in a block of text.

A line break is defined to be a carriage return (
), a line feed (
), or a carriage return/line feed pair. All line breaks constitute white space.

https://www.w3.org/TR/REC-html40/struct/text.html#line-breaks

---

Let's brute force a test, to see which tags render the <br/> at the end, and which do not. https://jsfiddle.net/t7bnokzc/1/

We can see that these tags completely ignore the last <br/> as in they do not go to the next line, and show the text right next to them.

<button>
<canvas>
<img>
<iframe>
<input>
<ruby>
<meter>
<progress>
<select>
<svg>
<textarea>
<video>

Meanwhile these tags ignore the last <br/> :

<address>
<article>
<aside>
<audio> // Has a default height and width, differs from browser to browser
<blockquote>
<center>
<datalist>
<dd>
<details>
<dir>
<div>
<dl>
<dt>
<fieldset>
<figcaption>
<figure>
<footer>
<form>
<h1>
<header>
<legend>
<li>
<main>
<nav>
<ol>
<optgroup>
<option>
<p>
<pre>
<section>
<summary>
<ul>

What do these above have in common? They've got either a display:block or a display:list-item.

Conclusion :

If you put a line break at the end of an element that doesn't render line breaks (list above) or an element that at it's end there's an element that doesn't render line breaks it gets ignored.

Another example :

<address>Hello
  <b>ddg<br></b>
  <b>ddg<br></b>
</address>

Knowing that address tag is a block element, it behaves exactly as the p tag, knowing that the b tag behaves like the a tag : they render the last line break unless it ends inside a block element.