Question

I’m using a <br> tag inside a heading (e.g. h1), and as part of my responsive design with progressive enhancement (would this be an exception?) — I would like to hide it on narrower viewports.

Naturally, the CSS rule is:

h1 br {
    display: none;
}

But what is the correct way to approach this in the HTML?

If it put it as this, then when the br is hidden, there is no space between “heading” and “with”:

1) <h1>Example heading<br>with a break right thurr</h1>

So is the following semantically correct?

2) <h1>Example heading <br>with a break right thurr</h1>

Or what about this?

3) <h1>Example heading<br> with a break right thurr</h1>

Very nit-picky, I know, but I’m curious to hear.

P.S. In this case, one absolutely must use a br because the words “Example heading” are shorter than “with a break right thurr” — using a fluid container would force the break in a place that isn’t desired.

Also, as David pointed out, both examples #2 and #3 will work — but are they semantically correct? While spaces around HTML tags are semantic and are ignored (that’s how we make markup nice to read)… but what about spaces inside element tags? Should they be there?

Answer 1

I think your use of the br element is not correct. It must only be used if the line break is meaningful, not for layout purposes:

br elements must be used only for line breaks that are actually part of the content, as in poems or addresses.

You should use the span element instead:

<h1>Example heading <span>with a break right thurr</span></h1>

resp.

<h1><span>Example heading</span> with a break right thurr</h1>

With CSS like:

h1 > span {display:block;}

So now there is also no question where to put the space. If br is used, there shouldn’t be a problem deciding where/if to use spaces, becauses it has to be a meaningful break (not necessarily a line break), so there would be always a separator of some kind (line break, delimiting character/graphics, spoken pause, etc.)