H1 header: left or center aligned

Discussion in 'HTML' started by DU, Oct 7, 2003.

  1. DU

    DU Guest

    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
    DU, Oct 7, 2003
    #1
    1. Advertising

  2. DU wrote:

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

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me - http://www.goddamn.co.uk/tobyink/?id=132
    Toby A Inkster, Oct 7, 2003
    #2
    1. Advertising

  3. DU <> wrote:

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

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
    Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html
    Jukka K. Korpela, Oct 7, 2003
    #3
  4. DU

    Safalra Guest

    DU <> wrote in message news:<bltm6g$9vo$>...
    > 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
    Safalra, Oct 7, 2003
    #4
  5. DU

    DU Guest

    Toby A Inkster wrote:
    > DU wrote:
    >
    >
    >>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.
    >


    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, Oct 8, 2003
    #5
  6. DU

    DU Guest

    Jukka K. Korpela wrote:

    > DU <> wrote:
    >
    >
    >>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.
    >


    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.

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


    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, Oct 8, 2003
    #6
  7. DU

    DU Guest

    Safalra wrote:

    > DU <> wrote in message news:<bltm6g$9vo$>...
    >
    >>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...)


    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
    DU, Oct 8, 2003
    #7
  8. DU <> wrote:

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


    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)
    <h1> element. But as a whole, this price is worth paying.

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

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
    Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html
    Jukka K. Korpela, Oct 8, 2003
    #8
  9. DU wrote:

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

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me - http://www.goddamn.co.uk/tobyink/?id=132
    Toby A Inkster, Oct 8, 2003
    #9
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. mre
    Replies:
    2
    Views:
    420
  2. ComputerSnack
    Replies:
    7
    Views:
    1,839
    Jonathan N. Little
    Apr 13, 2006
  3. =?Utf-8?B?QmlzaG95?=
    Replies:
    0
    Views:
    956
    =?Utf-8?B?QmlzaG95?=
    Dec 28, 2006
  4. AAaron123
    Replies:
    1
    Views:
    318
    AAaron123
    Jul 21, 2008
  5. topguy
    Replies:
    6
    Views:
    489
    topguy
    Nov 15, 2008
Loading...

Share This Page