What's the semantically correct way to break headings into lines?

There is nothing wrong with <br />.

If you want to insert a line break on a unusual place, and you actually mean a line break, then use a line break.


The usual HTML flow?

What seems to be wrong with the normal HTML flow? If your lines are too long and would like to make them shorter, you can always define width of your H1 in CSS so you don't add markup to accommodate your design. Markup should be semantic, and CSS should provide the necessary visual appearance. Hence you can add width to your H1 element and make it break the line as per set width.

h1
{
    width: 40em;
}

Also consider using text size related dimensions so you'll get better results (not too narrow not too wide) when using different head text sizes on different pages.

When <br/> is fine?

Whenever you actually need to break your heading into a new line it's of course correct to use <br/>. Don't be afraid of using it if that's what it needs to be done on your heading. But for the purposes of head line overflows breaks are not used.


You shouldn't use <br />'s in the tag probably, the best way would be to contain it in a div that will wrap the H1 text:

<div style="width:50px;">
    <h1>My multiline header wraps now without br tags!</h1>
</div>

See this related question:

Can CSS force a line break after each word in an element?

It's impossible in pure CSS, but with JavaScript it's possible. I'd just go for the wrapping div though.

Tags:

Html