<br>

As the HTML standard evolved, new tags were added and obsolete ones were removed. In HTML5, a significant emphasis was placed on the semantic meaning of tags, while anything related to the visual aspect was left to CSS. This means that the use of certain tags is determined by their functional purpose rather than how a tag affects the appearance of an element.

With the transition to the HTML5 standard, almost all formatting tags were excluded from the list of tags (for example, <small> or <font>). However, the developers of the standard left a rather controversial tag <br>. Controversial because developers often do not have a complete understanding of when it should be used.

The standard clearly describes the purpose of this tag and the situations in which its use is appropriate: this tag indicates a line break and a forced transfer of text to a new line. It should be used only for these purposes. A vivid example is the division of a poem into lines:

        
          
          <p>  My uncle's the most honest of men,<br>  When he was not joking, he fell ill,<br>  He made himself respected<br>  And could think of nothing better.</p>
          <p>
  My uncle's the most honest of men,<br>
  When he was not joking, he fell ill,<br>
  He made himself respected<br>
  And could think of nothing better.
</p>

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

Another example could be typesetting a postal address when it is essential to separate parts of the address onto different lines:

        
          
          <address>  432000<br>  Ulyanovsk<br>  Lenin St., house 34</address>
          <address>
  432000<br>
  Ulyanovsk<br>
  Lenin St., house 34
</address>

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

Note: in both examples, the text is related. In other words, each new line meaningfully is part of the entire text.

Using <br> in this way would be incorrect because each line is fundamentally a separate group and should be highlighted in a separate paragraph:

Incorrect:

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

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

Correct:

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

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

Another example of incorrect use of the tag is using it for decorative purposes: to set vertical spacing between elements. Vertical spacing is part of the visual design of the page and should be set exclusively in CSS.

Incorrect:

        
          
          <article>  <h2>The container ship ran aground in the Suez Canal</h2>  <p>...</p></article><br><br><article>  <h2>There is a chip shortage worldwide</h2>  <p>...</p></article>
          <article>
  <h2>The container ship ran aground in the Suez Canal</h2>
  <p>...</p>
</article>
<br>
<br>
<article>
  <h2>There is a chip shortage worldwide</h2>
  <p>...</p>
</article>

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

Correct with CSS:

        
          
          <article>  <h2>The container ship ran aground in the Suez Canal</h2>  <p>...</p></article><article>  <h2>There is a chip shortage worldwide</h2>  <p>...</p></article>
          <article>
  <h2>The container ship ran aground in the Suez Canal</h2>
  <p>...</p>
</article>
<article>
  <h2>There is a chip shortage worldwide</h2>
  <p>...</p>
</article>

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

        
          
          article {  margin-bottom: 2em;}
          article {
  margin-bottom: 2em;
}

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

It is important to mention that when using <br> for vertical spacing between block elements, the size of the spacing directly depends on the font size of the parent.

Often typography comes with layouts in which a designer places text in headings in such a way that it looks good. They break words and balance line lengths so that the layout looks neat.

And the typesetter implements the designer's idea by adding <br> in the heading so that the layout looks precisely as it does in the mockup. This is generally standard practice, but one must remember that it may not always be appropriate.

For instance, when adapting the layout, words in the heading will rearrange, but the line break will not go anywhere. As a result, the heading will behave unnaturally: words will break in places they should not.

Try to change the window width in the example above. In the second block, we see that the heading unnaturally breaks lines at a small width. This is entirely because we cannot control the behavior of <br> through CSS, and this tag continues to break the line regardless.

Thus, <br> can be used, but with caution, with regard to the specification and common sense.

<br> affects how screen readers process the text. For example, they stop reading the text in reading mode after encountering <br>, either announcing it or not making the necessary pause after a sentence when it is needed.

So it's better to use <p> if you are not sure whether <br> is needed. And with decorative spacing, CSS will always help to handle it.