Should you EVER use the <br> tag?

HTML-CSS
#1

I am making a codepen to take notes/make sure I comprehend what I’m learning as I go through the JS curriculum, and I have a question about the HTML formatting. I am using the
tag when writing out the example code. Sometimes I see people say to never use
and if that’s true, what’s the best way to do that instead? If I make a new paragraph, it will add an extra space between lines that I don’t necessarily want–I just want it to be on the line directly below it. Should I make a class for all my examples and format it in CSS? I’m currently using to add the white background behind examples and key words, and I’m not even sure if that’s the correct way to handle it? Thank you for any input, about my specific situation as well as the bigger question of: is there any good reason to use
in the “real world”?
Here is an example of the HTML, and the link to my codepen:

<p><span>function pizzaTotal(order1, order2) {<br>
  console.log(order1 + order2);<br>
  }<br>
 pizzaTotal(4, 3);
  </span></p>

JavaScript practice codepen

#2

Hey there,

For formatting blocks of code, I recommend looking at both the <code> tags and the <pre> tags - the <pre> tags will preserve your white-space (such as line breaks).

In general, <br> tags are used where line breaks are syntactically relevant, such as poetry (where a line break determines the structure/flow of the actual content, vs the appearance).

1 Like
#3

Yes as mentioned above, you normally want to use either the “code” or “pre” tags for source code. Using the “br” tag is something you normally won’t or shouldn’t do, especially if you’re just trying to add vertical spacing between paragraphs (the “p” tag is supposed to add that automatically) or other elements on the page. It should never be used to add vertical spacing - that’s what you should use CSS for (i.e. margin or padding).

Here’s an example of when it would make sense to use the “br” tag semantically:

<h2>"The Old Pond" by Matsuo Bashō</h2>
<p>An old silent pond<br>
A frog jumps into the pond -<br>
Splash! Silence again.
</p>

Btw, you’re also mis-using the “span” tag in your example. “span” is an inline element, as opposed to block-level. If you don’t know what that means yet, it basically means you shouldn’t be using it to enclose multiple lines of text. You can use it to enclose single words, or a few/several words at most, but never text that goes across multiple line breaks. That’s just not what “span” is used for. If you need to apply CSS to all of the text in a “p” tag, then add a class or ID to the “p” tag to target from CSS. This page has a good example of how to properly use “span” tags: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span

2 Likes
#4

Ok, thanks so much! I am not sure I’ve heard of either of those tags but sounds like just what I’m looking for here, I’ll go learn about them. Appreciate your help!

#5

Thank you, that’s extremely helpful. I felt like “span” was not the right way to do this, but I didn’t know what to do instead. I was not quite sure even how to research this, but now I have some direction, and I will check out “code” and “pre” tags. And I’ll check out the link about proper use of the span tag as well.
I try to research things myself, but sometimes I don’t even know what to google, and I just wish I could raise my hand and ask a question. I appreciate your taking the time to help me out! This forum is the best.

#6

I often read that, too, and frankly I don’t understand it. You should certainly never use it only for vertical spacing, but I don’t see why you shouldn’t use it in a <p> tag. Apparently, there’s accessibility concerns, but I found it difficult to find reliable information as to why. I’d really like some enlightenment about this, because I admit that I often use it to force a line break. Sometimes I have a button click here and I want both words on separate lines. What exactly is the issue with screen readers there?

What if I use the tag only like this: <br aria-hidden="true"> ?

1 Like
#7

I’m not sure, but when I looked up how to make a button have two lines of text, some of the examples said to use the break tag. Others used sizing/styling to force part of the text to a second line. Often there are multiple ways to do something, I’m just always curious about which is the preferred way.

#8

SO much better now. I ended up taking out all the break tags, then changed all the <span> tags to <code> because that was the most descriptive option. By default <code> changed the font, then in the CSS I styled it to have the same font size as the rest of the <p> elements, as well as a white background, and since <code> is inline (a new thing I learned about today) the background doesn’t go all the way across the page but just behind the actual words, which is what I wanted. Also because it’s an inline element, <code>like <span> is used more for use just for a word or a few lines, but if you wrap it in <pre> tags, like this: <pre><code>text goes here</code></pre> then it will display the way you’ve typed it with all spacing and returns.
And I’ve learned a lot, and now have a ton of browser tabs open to explore further…
Thank you again for teaching and pointing me in the right direction!

1 Like