I think I found an appropriate use of the <br> element

https://codepen.io/gtrman97/pen/eYBQMwE

I want the 4 red borders at the bottom right to be squares and make up a larger square.
If “Product Landing Page” heading is on one line then it ends up being more of a rectangle, so to make it more of a square I have to use <br>. Please tell me if there is another way.

It’s not an uncommon usage of the br tag to force the end of a block of text to a new line.

You can also put the word Page inside a span and set it to be a block-level element so it’s on its own line. Or some times you can just limit the max-width of the text to have the line-break where needed.

1 Like

It’s just I keep hearing on here how using that element is bad practice and you should use CSS for stuff like that.

It all depends on how you use it.
The br tag isn’t bad you just have to use it properly.

Writing stuff like this would be considered bad

  <h1>Welcome to My Portfolio</h1> 
    <br>
    <br>
    <br>
  <h2>A Web Developer's Work</h2>

But the way you used it is fine.

1 Like

A lot of beginners use it instead of using margin, which isn’t the correct usage. However, forcing a line-break in text is pretty much what the br tag is meant for.