H1 header: left or center aligned

[DU]

I'd like to have opinions (otherwise references of some sort) on what is
the best way to align a document header: should it be left-aligned or
center-aligned?

I can not find any specification, usability or accessibility guideline
anywhere on this issue. It seems that 50% of people left-align it while
another 50% of people center-align it.

This question might not be absurd or negligeable. If resorting to Hn is
to designate a hierarchy of headline importance, then should it be left
or center-aligned?

FWIW, sub-table elements like <th> and <td> have browser default
horizontal alignment values to help significate that some table cells
are headers for others.

DU
--
Javascript and Browser bugs:
http://www10.brinkster.com/doctorunclear/
- Resources, help and tips for Netscape 7.x users and Composer
- Interactive demos on Popup windows, music (audio/midi) in Netscape 7.x
http://www10.brinkster.com/doctorunclear/Netscape7/Netscape7Section.html

 

[Toby A Inkster]

I'd like to have opinions (otherwise references of some sort) on what is
the best way to align a document header: should it be left-aligned or
center-aligned?

This assumes that you are using left-aligned body text...

For <h1> I'd be tempted to align to the centre or even the right to make
it stand out more.

As you go down the levels (<h2>, <h3>, etc) make the headings left-aligned.

In general, make the <h1> most different from body text and <h6> almost
the same as body text, with everything in between being... well... in
between. Alignment is obviously not the only thing that you should use to
create differences -- font size spings to mind. Colour (fg and bg) can be
useful if used effectively as can text case and letter spacing.

 

[Jukka K. Korpela]

I'd like to have opinions (otherwise references of some sort) on
what is the best way to align a document header: should it be
left-aligned or center-aligned?

Maybe. English language is so poor in formulating questions.
You probably meant to ask which one of the alternatives is better.
But the question, as asked, can be read as asking whether it is true
that the heading should be either left-aligned or center-aligned.
If we all used Finnish, such ambiguities would not arise.

Seriously, those are not the only options. Right-alignment is sometimes
used for stylistic reasons, and using some left margin (typically
producing an intermediate between normal left alignment and normal
centering) is not uncommon - especially for lower-level headings.

I can not find any specification, usability or accessibility
guideline anywhere on this issue. It seems that 50% of people
left-align it while another 50% of people center-align it.

If the figures are exact then most authors prefer centering. The
reason to this conditional claim is that the common browser default is
left alignment and many authors just don't care.

I have no strong position on this, and I haven't seen usability or
accessibility guidelines on it either. But I think the nature of a page
is relevant. For a short page - remember Tim's principle that says that
a Web page can be anything from a footnote to a book - left alignment
is probably better, since it makes the content more compact. For a page
with several lower-level headings, making the main heading centered
probably makes it stand out better without need for making its font
size.

If resorting to
Hn is to designate a hierarchy of headline importance, then should
it be left or center-aligned?

You mean using e.g. h1 for main heading, h2 for sub-heading right after
it, so that the sub-heading is logically just a secondary main heading?
I would say that the structure is wrong anyway, but to minimize the
confusion, the two headings must be _similarly_ aligned, in the same
font face, and with little if any vertical space between them.

FWIW, sub-table elements like <th> and <td> have browser default
horizontal alignment values to help significate that some table
cells are headers for others.

That is correct, and the defaults are even explicitly defined in HTML
specifications.

For headings, there is no such default defined. We can even say that
the default is _intentionally_ left browser-defined, since it would
have been very easy to set the default in HTML syntax.

The sample style sheet (effectively, a more or less recommended default
browser style sheet) for HTML 2.0 in the CSS 1 specification had
H1 { text-align: center }
but this is not present in the corresponding sample style sheet in the
CSS 2 spefication.

 

[Safalra]

I'd like to have opinions (otherwise references of some sort) on what is
the best way to align a document header: should it be left-aligned or
center-aligned?

I use <h1> for a page title (I know that's duplicating the content of
the <title> element...) so I have that centred (and with colours
inverted). I use <h2> and <h3> to approximate sectioning, and it seems
more sensible to have them left-aligned.

Basically, it depends on what you use them for and the structure of
your document (if I wrote really long documents using <h2>, <h3> and
<h4>, I'd probably centre the <h2>s as well).

--- Stephen Morley ---
http://www.safalra.com

 

[DU]

DU wrote:




This assumes that you are using left-aligned body text...

For <h1> I'd be tempted to align to the centre or even the right to make
it stand out more.

Interestingly, 2 alternate stylesheets you use on your site provide 2
answers on this precise issue: your default uses center-aligned headers
while fixed modern (and high visibility) use left-alignment for headers.
I guess they both are fine and recommendable.

As you go down the levels (<h2>, <h3>, etc) make the headings left-aligned.

In general, make the <h1> most different from body text and <h6> almost
the same as body text, with everything in between being... well... in
between. Alignment is obviously not the only thing that you should use to
create differences -- font size spings to mind.

http://www.webstyleguide.com/type/structure.html
mentions this type of "visual logic" (mostly CSS) as opposed to
"structural logic" (HTML elements).

Colour (fg and bg) can be

useful if used effectively as can text case and letter spacing.

I think I'll go with left-aligned headers. This is the default browser
horizontal alignment value for <Hn> in ltr languages. I also stumbled
across this:
"Titles and headings over left-justified body text should also be flush
left."
http://www.webstyleguide.com/type/align.html

Finally, some of my page headings might be too long too... and I would
hate to see a second line start in the center of the screen... it would
look a bit weird.
If I ever create an alternate stylesheet, I'll certainly recall to use
text-align:center for <h1> elements.

DU
--
Javascript and Browser bugs:
http://www10.brinkster.com/doctorunclear/
- Resources, help and tips for Netscape 7.x users and Composer
- Interactive demos on Popup windows, music (audio/midi) in Netscape 7.x
http://www10.brinkster.com/doctorunclear/Netscape7/Netscape7Section.html

 

[DU]

Maybe. English language is so poor in formulating questions.
You probably meant to ask which one of the alternatives is better.
But the question, as asked, can be read as asking whether it is true
that the heading should be either left-aligned or center-aligned.
If we all used Finnish, such ambiguities would not arise.

Seriously, those are not the only options. Right-alignment is sometimes
used for stylistic reasons, and using some left margin (typically
producing an intermediate between normal left alignment and normal
centering) is not uncommon - especially for lower-level headings.




If the figures are exact then most authors prefer centering. The
reason to this conditional claim is that the common browser default is
left alignment and many authors just don't care.

Yes, that makes sense.

I have no strong position on this, and I haven't seen usability or
accessibility guidelines on it either. But I think the nature of a page
is relevant. For a short page - remember Tim's principle that says that
a Web page can be anything from a footnote to a book - left alignment
is probably better, since it makes the content more compact. For a page
with several lower-level headings, making the main heading centered
probably makes it stand out better without need for making its font
size.

A page heading is well "done" if it can stand out in a clear, clean and
good manner. This is pretty much where the only answer is as far as
horizontal alignment is concerned for page headings. Toby's matrix
alternate stylesheet has its page headings right-aligned.

You mean using e.g. h1 for main heading, h2 for sub-heading right after
it, so that the sub-heading is logically just a secondary main heading?

I misworded this. I just wondered how (horizontal alignment) should be
all page headings?

I would say that the structure is wrong anyway, but to minimize the
confusion, the two headings must be _similarly_ aligned, in the same
font face, and with little if any vertical space between them.




That is correct, and the defaults are even explicitly defined in HTML
specifications.

For headings, there is no such default defined. We can even say that
the default is _intentionally_ left browser-defined, since it would
have been very easy to set the default in HTML syntax.

The sample style sheet (effectively, a more or less recommended default
browser style sheet) for HTML 2.0 in the CSS 1 specification had
H1 { text-align: center }
but this is not present in the corresponding sample style sheet in the
CSS 2 spefication.

Thank you for your time and insights you provided here. You brought
points I had not thought of before.

DU
--
Javascript and Browser bugs:
http://www10.brinkster.com/doctorunclear/
- Resources, help and tips for Netscape 7.x users and Composer
- Interactive demos on Popup windows, music (audio/midi) in Netscape 7.x
http://www10.brinkster.com/doctorunclear/Netscape7/Netscape7Section.html

 

[DU]

I use <h1> for a page title (I know that's duplicating the content of
the <title> element...)

I'm not against this sort of duplication. In fact, I think this sort of
duplication should be sought, deliberate. Duplication from the text link
leading to the targeted document, to the document.title, to the <h1>
page heading and to the site navigation aid indicating the relative
position of the document within a website: they should all say the same
for the sake of consistency and clarity.

so I have that centred (and with colours

inverted). I use <h2> and <h3> to approximate sectioning, and it seems
more sensible to have them left-aligned.

Basically, it depends on what you use them for and the structure of
your document (if I wrote really long documents using <h2>, <h3> and
<h4>, I'd probably centre the <h2>s as well).

--- Stephen Morley ---
http://www.safalra.com

DU
--
Javascript and Browser bugs:
http://www10.brinkster.com/doctorunclear/
- Resources, help and tips for Netscape 7.x users and Composer
- Interactive demos on Popup windows, music (audio/midi) in Netscape 7.x
http://www10.brinkster.com/doctorunclear/Netscape7/Netscape7Section.html

 

[Jukka K. Korpela]

I'm not against this sort of duplication.

It's really not duplication, since <title> and <h1> elements have
different meanings, and they are just for different purposes, and
rendered differently. In particular, the <title> element content need
not be rendered at all, and it is meant to be rendered as external to
the document proper, e.g. in a browser window's upper bar, _outside_
the document canvas.

The duplication is slightly disturbing in some presentation situations,
e.g. when a text browser first prints the <title>, then the <h1> (by
the way, Lynx shows the <title> right aligned, the <h1> centered), or
when a speech browser reads both in succession - which can probably be
changed from browser settings, but normally should not be done, since
so often a page lacks a (meaningful) <title> element, or a (meaningful)

In fact, I think this
sort of duplication should be sought, deliberate.

Duplication of information, yes. Not necessarily duplication of
wording.

Duplication from
the text link leading to the targeted document, to the
document.title, to the <h1> page heading and to the site navigation
aid indicating the relative position of the document within a
website: they should all say the same for the sake of consistency
and clarity.

All three _could_ be similarly worded, but they could, and often
should, be differently worded. The texts, although describing the same
document, have different meanings and purposes. In particular,
- link text should be understandable in the context of the linking
document, and should give an idea of how the linked document relates
to the current one
- <title> should be understandable in _any_ context
- <h1> should be understandable in a context where the document itself
is actually rendered, and it could utilize its context, and it should
be brief.
There's a school of thought in journalism that says that a heading
should be three or four words, including a verb in active form. And I
think it's a good rule of thumb, though not always feasible.
Link texts and <title> texts, on the other hand, should normally be
noun phrases.

OK, a "random" example. I have a page that has a long main heading:

<h1>How all human communication fails, except by accident,<br>
<small>or a commentary of <span lang="fi">Wiio</span>'s
laws</small></h1>

Not a good example, really, but we could end the heading at the first
(or second) comma to get a better one. The title, on the other hand, is

<title>A commentary of Wiio's laws</title>

and one might link to the page using, _for example_

<a href="http://www.cs.tut.fi/~jkorpela/wiio.html" title=
"How all human communication fails, except by accident.
An explanation and a commentary of Wiio's laws, by J. Korpela">
Wiio's laws</a>

in a context where someone just mentions the laws and links to my
document for a general reference. Note that the title attribute
in the <a> element is yet another type of title for a document,
typically used to give a more verbose explanation than the link text.

 

[Toby A Inkster]

Interestingly, 2 alternate stylesheets you use on your site provide 2
answers on this precise issue: your default uses center-aligned headers
while fixed modern (and high visibility) use left-alignment for headers.
I guess they both are fine and recommendable.

Actually fixed modern uses right-alignment for <h1> and left for <h2> to
<h6>. It also introduces a "graphical <h0>" as I like to call it, which is
left-aligned.