How to render a heading as two lines?

[Greg N.]

Suppose you need a heading <h1>Huddersfield Canal Society</h1> to be
rendered as two lines. The result you want to see is:

Huddersfield
Canal Society

It can be fudged by marking it up as

<h1>Huddersfield<br>Canal Society</h1>

or

<h1>Huddersfield</h1>
<h1>Canal Society</h1>

But what would you suggest, that complies with HTML 4.01 strict, and is
politically correct with respect to style/content separation?

 

[Mark Parnell]

Deciding to do something for the good of humanity, "Greg N."

Huddersfield
Canal Society

It can be fudged by marking it up as

<h1>Huddersfield<br>Canal Society</h1>

Why is that a fudge? You want a line break, so you put one in.

<h1>Huddersfield</h1>
<h1>Canal Society</h1>

Doesn't make sense. That's 2 headings - one says "Huddersfield" and the
other "Canal Society".

 

[Nick Theodorakis]

Suppose you need a heading <h1>Huddersfield Canal Society</h1> to be
rendered as two lines. The result you want to see is:

Huddersfield
Canal Society

It can be fudged by marking it up as

<h1>Huddersfield<br>Canal Society</h1>

or

<h1>Huddersfield</h1>
<h1>Canal Society</h1>

Yucky poo.

But what would you suggest, that complies with HTML 4.01 strict, and is
politically correct with respect to style/content separation?

How about:

<h1>Huddersfield <span>Canal Society</span></h1>

and in your css file:

h1 span
{
display: block;
}

(Substitute another element for <span> if one is more appropriate.)

 

[Blinky the Shark]

Suppose you need a heading <h1>Huddersfield Canal Society</h1> to be
rendered as two lines. The result you want to see is:

Huddersfield
Canal Society

It can be fudged by marking it up as

<h1>Huddersfield<br>Canal Society</h1>
Check.

or

<h1>Huddersfield</h1>
<h1>Canal Society</h1>

That's semantically wrong, because now you have two headers.

 

[dorayme]

Deciding to do something for the good of humanity, "Greg N."


Why is that a fudge? You want a line break, so you put one in.

Of course, one can do anything one likes! But OP surely means to
be drawing attention here to the ideal of separating style from
content and <br> is being used for presentational purposes.
Perhaps you don't like the word "fudge" to indicate this. But it
seems reasonable to me, given a certain context - ahem... lets
say, the strict mood around here lately! This is a sensitive
matter Mark, tread carefully. Spartanicus has greatly insulted a
bikie and when this happens, the world goes still...

Doesn't make sense. That's 2 headings - one says "Huddersfield" and the
other "Canal Society".

But on this, you are right.

 

[Jonathan N. Little]

Suppose you need a heading <h1>Huddersfield Canal Society</h1> to be
rendered as two lines. The result you want to see is:

Huddersfield
Canal Society

It can be fudged by marking it up as

<h1>Huddersfield<br>Canal Society</h1>

or

<h1>Huddersfield</h1>
<h1>Canal Society</h1>

But what would you suggest, that complies with HTML 4.01 strict, and is
politically correct with respect to style/content separation?

Since this refers back to the guy that with the heading in his banner

#banner { ... }
#banner IMG { vertical-align: middle; }
#banner H1 { display: inline; }
#banner #canal { float: right; }

<div id="banner">
<img id="canal" src="canal.jpg" alt="canal">
<img src="logoGfx.gif" alt="logo">
<h1>Huddersfield Canal Society</h1>
</div>

Would that not do what he wishes? If the H1 in the banner was inline it
it would wrap when compressed.

 

[Jim Moe]

Suppose you need a heading <h1>Huddersfield Canal Society</h1> to be
rendered as two lines. The result you want to see is:

Huddersfield
Canal Society

It can be fudged by marking it up as
<h1>Huddersfield<br>Canal Society</h1>

Not a "fudge" at all. <br>s are commonly abused to create
inter-paragraph space where <p> or padding/margin styles are more
appropriate. In this case, though, no problem.
Also
<h1><p>Huddersfield</p><p>Canal Society</p></h1>

Is it the two line appearance you actually want? The <br> is best for that.
Or are you just avoiding some messy text wrapping as the viewport width
narrows? Then you could put a &nbsp; in between Canal and Society. That
whole line of text would wrap as a unit.

 

[Toby Inkster]

<h1>Huddersfield<br>Canal Society</h1>

This is the way.

I often use a line break in a heading, combined with <small>, to mark up
subtitles. (That is, not a *subheading*, which is the heading of a
particular *part of the page, and should be marked up using <h2>; but a
subtitle, which is clearly still part of the main <h1> heading.)

e.g.

<h1>Overcoming Procrastination;<br>
<small>Or How to Think and Act Rationally in Spite of Life's Inevitable
Hassles</small></h1>

 

[Toby Inkster]

<h1><p>Huddersfield</p><p>Canal Society</p></h1>

Invalid. See:

http://www.w3.org/TR/html401/struct/global.html#h-7.5.5

where H1 through to H6 are defined as containing only inline content
-- that is, not block-level content such as paragraphs.

 

[Disco Octopus]

Suppose you need a heading <h1>Huddersfield Canal Society</h1> to be
rendered as two lines. The result you want to see is:

Huddersfield
Canal Society

It can be fudged by marking it up as

<h1>Huddersfield<br>Canal Society</h1>

or

<h1>Huddersfield</h1>
<h1>Canal Society</h1>

But what would you suggest, that complies with HTML 4.01 strict, and is
politically correct with respect to style/content separation?

Depending on your reasons for doing this, you may just be needing to do
this for the space restrictions you have? If this is your reason, you may
like to consider puting a style to your H1 element with a width

eg...
<h1 style="width:250px;">Huddersfield Canal Society</h1>

 

[dorayme]

.... OP surely means to
be drawing attention here to the ideal of separating style from
content and <br> is being used for presentational purposes.

Perhaps I am wrong on this, after all, considering later posts. One
<br> would be pc, two or more consequutive <br>s would be frowned on
even in the context of <h1></h1>

I need to know the details so that when i go around in a pickup truck
with fellow HTML/CSS police to round up the politically incorrect, i do
not overdo things...

 

[Jim Moe]

Invalid. See:

Arrrgghh!

 

[BootNic]

Suppose you need a heading <h1>Huddersfield Canal Society</h1> to be
rendered as two lines. The result you want to see is:

Huddersfield
Canal Society

It can be fudged by marking it up as

<h1>Huddersfield<br>Canal Society</h1>

or

<h1>Huddersfield</h1>
<h1>Canal Society</h1>

But what would you suggest, that complies with HTML 4.01 strict,
and is politically correct with respect to style/content separation?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
</head>
<body>
<h1 style="white-spacere;">Huddersfield
Canal Society</h1>
</body>
</html>

 

[Greg N.]

<h1 style="white-spacere;">Huddersfield
Canal Society</h1>

I like it! Seems to fit the bill exactly.

 

[Martin Clark]

Jim Moe wrote...

Suppose you need a heading <h1>Huddersfield Canal Society</h1> to be
rendered as two lines. The result you want to see is:
Huddersfield
Canal Society
It can be fudged by marking it up as
<h1>Huddersfield<br>Canal Society</h1>

[snip]

Is it the two line appearance you actually want? The <br> is best for that.
Or are you just avoiding some messy text wrapping as the viewport width
narrows? Then you could put a &nbsp; in between Canal and Society. That
whole line of text would wrap as a unit.

Sorry folks - I hadn't noticed that the discussion of this had moved to
a new thread!

Initially, the white text stayed on one line, so that at 800x600 it
overlapped the right-hand banner photo. Not the end of the world, but
not what I wanted. Several of the suggestions that were put forward
resulted in solutions where, at some widths, text jumped down below the
images or formed 3 lines, changing the appearance of the header area
detrimentally.

The <h1>Huddersfield</h1><h1>Canal Society</h1> solution produced the
best result up to that point, where the text stayed within the original
height of the header area and only overlapped the photo at about 700px
width, which few people would see in the normal course of events.

I didn't understand quite why Spartanicus was so angry at the
"butchering" of his code by whoever suggested that solution, but having
read this thread I now do understand that it is regarded as incorrect to
turn it into what is in effect two headings.

However, <h1>Huddersfield<br>Canal Society</h1> produces exactly the
same effect and that is what I am going with:
http://www.tamevalley.freeserve.co.uk/hcs/index.htm
I am pleased with the way the page works and hope it does not offend the
purists!

What does style="white-spacere;" do please, as suggested by BootNic?