Should we use spaces around <br> tag when inside a <p> or heading?

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.)

Answer 2

I make it a habit always to put a return after a <br>

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

Then you have your whitespace.

However, unor has a point: if you don't want to break there under some circumstances, you shouldn't put in the <br> if you're concerned about semantics.

Answer 3

It feels slightly odd to be breaking a heading - although I understand your logic.

Would you perhaps consider having the heading in a discrete column of a certain width?

Also, if you are having this read by smaller screen devices, I'm assuming that you have this in @media only screen sections or the like.

It's slightly better practice to write <br> as <br /> (self closing tag), but <br> will work if in a transitional or html5 doc.

1. and 3. ; semantic correctness doesn't really come into it. The semantic meaning of the section is 'this is a top heading'; so minute in terms of whitespace or even carriage return does not come into it in particular. Any whitespace greater than a single space is ignored, spaces inside element tags are generally undesireable. The parser will always try its best (bless 'em... well, except IE), but can nonetheless be still completely baffled if you take space inside a tag to the fair. < p > will be interpreted as a left bracket, the letter 'p' and a right bracket, instead of paragraph tag, for instance

Consider also using <wbr> which provides an optional wordbreak for longer words.