HTML/CSS: To use the tag or to repeat styling

Question

When you have to specify the same .css class for multiple headers <h3>, is it better to use the <br> tag or is it better to repeat the header while specifying the same style class over and over again? In this specific scenario, I can't put styling on the surrounding <div>

Which one is best practice and why?

Code example while using <br> tags:

    <div class="more_room_left | more_room_top">
        <h5 class="no_margin_top_bottom">
            *location?.streeth* *location?.number*
            <br> *location?.postcode* *location?.city*
            <br> *location?.country*
            <br>
        </h5>
    </div>

Code example using different headers:

    <div class="more_room_left | more_room_top">
        <h5 class="no_margin_top_bottom">*location?.streeth* *location?.number*</h5>
        <h5 class="no_margin_top_bottom">*location?.postcode* *location?.city*</h5>
        <h5 class="no_margin_top_bottom">*location?.country*</h5>
    </div>

Visual example:

EDIT:

After reading more about when to use the <br> tag, I've concluded that in my case the <br> tag has no value and is considered a hack. I reworked the way I'm styling the headers <h3>, which are now paragraphs <p>, to fit the styling I need without using the <br> tag. This solution was handed to me through an already removed answer, so I can't give credit.

HTML

    <div class="address_container | more_room_left | more_room_top">
        <p>*location?.streeth* *location?.number*</p>
        <p>*location?.postcode* *location?.city*</p>
        <p>*location?.country*</p>
    </div>

CSS

.address_container > p {
    margin-top: 0;
    margin-bottom: 0;
}

Answer 1

There are various factors that would define which one should be used.

For example, if you wish to retrieve this header text, how you want value. You want entire text or individual values. If individual values are expected, I'd suggest using multiple headers.

On the contrary, if you want to receive entire value together, use single header with brs. But using <br/> is not considered good practice and you should refer: Is it sometimes bad to use <BR />?

---

Another such case would be for adaptive design. On smaller screen how should they wrap? If you are fine with *location?.streeth* *location?. on one line and number* on next, you can use single header. But if you want *location?.number to wrap in next line, using multiple elements would suit better.

---

If values are not going to be retrieved and its just for view, then either one would do. But in such cases, I'd go for <p> (as suggested by apokryfos) and add custom styling for view.

---

It is worth noting that HTML 5 has put a great deal of effort into making web pages semantic by adding a number of tags which are visually identical but differ in name and therefore purpose. For that reason, you should use a header tag (like e.g. `) to contain a 5 level header, e.g., when you need to specify a 5 level subsection to a document. This means that you should not use a header at all for the elements in question because the sole purpose of the header being used is for styling rather than offering semantic significance.

Answer 2

Based on your code, I would personally use different header's or paragraph's to achieve the spacing as well as allow for styling. If in the future you wish to style one of these parts, it will be much easier to do so at the block level.

    <div class="more_room_left | more_room_top">
      <p class="no_margin_top_bottom">*location?.streeth* *location?.number*</p>
      <p class="no_margin_top_bottom">*location?.postcode* *location?.city*</p>
      <p class="no_margin_top_bottom">*location?.country*</p>
    </div>