Question

I have a simple block with content:

<div>
    <img src="/img/sample.png" alt="Sample image">
    <span class="colored-text">Company name</span>
    <em>Address</em>
</div>

I want ‘Company name’ and ‘Address’ to be on separate lines.

And now I have several options available:

Make additional <div>s, add a <br/> tag between the <span> and <em> tags and maybe some other solutions.
What is the proper way to add such functionality?

Answer 1

You should do what semantically makes the most sense. In general, div tags are meant to represent some kind of DIVision in the page. If you are simply listing an address it doesn’t make sense to do this. I would personally use a <br /> at the end of the line which adds a line break without making any kind of semantic statement about your content.