Semantics & <h1>, <h2>, etc

Discussion in 'HTML' started by David Woods, Aug 7, 2006.

  1. David Woods

    David Woods Guest

    I appreciate the many discussions about marking up a page semantically. I
    don't mean to rehash old arguments/discussions, but I am a little confused
    as to the proper way to handle headers.

    In the web pages I have created I typically put a div stretching across the
    screen in which I put a logo, the title of the organization, and possibly
    other pictures, slogans, etc. In the main content div, I typically will put
    a unique header for that page followed by paragraphs, etc.

    What should be marked up as <h1></h1>? The title of the organization in the
    header/banner div? Or, the first header in the main content div?

    Which of the following examples should I use? Or can you provide a more
    proper example?

    1)
    <div id="header">
    <img ...>
    <h1>Title of the organization</h1>
    </div>
    <div id="content>
    <h2>Title of this page</h2>
    <p>...</p>
    </div>

    2)
    <div id="header">
    <img ...>
    <p>Title of the organization</p>
    </div>
    <div id="content>
    <h1>Title of this page</h1>
    <p>...</p>
    </div>

    Thanks,

    --

    David
     
    David Woods, Aug 7, 2006
    #1
    1. Advertising

  2. David Woods

    Spartanicus Guest

    "David Woods" <> wrote:

    >I appreciate the many discussions about marking up a page semantically. I
    >don't mean to rehash old arguments/discussions, but I am a little confused
    >as to the proper way to handle headers.
    >
    >In the web pages I have created I typically put a div stretching across the
    >screen in which I put a logo, the title of the organization, and possibly
    >other pictures, slogans, etc. In the main content div, I typically will put
    >a unique header for that page followed by paragraphs, etc.
    >
    >What should be marked up as <h1></h1>? The title of the organization in the
    >header/banner div? Or, the first header in the main content div?


    On the home page you should typically mark up the name of the
    organisation as the h1 content and the title. On other pages on the same
    site the topic of that page should be marked up as the h1 content.

    So the home page of Widgets Inc would have <h1>Widgets Inc</h1> on the
    home page, and <h1>About Us</h1> on the "about" page, with "About Us -
    Widgets Inc" as the title.

    Note that if the name of the organisation is provided as an image then
    for the home page the image should be the h1 content with the name as
    the alt content, so <h1><img src="foo.bar" alt="Widgets Inc"></h1>.

    Often such a graphic would also be repeated on every other page to
    create a consistent feel on a site, note that on pages other than the
    home page the image should then be coded as decorative, i.e. no alt
    content or code it as a CSS background image.

    The caveat with a <h1><img src="foo.bar" alt="Widgets Inc"></h1>
    construct is that the alt content is not picked up by some popular
    search engines (like Google). SE's apply greater weight to h1 content,
    so if SE ranking is important you should consider using an <object>
    element instead of an <img> element for the home page. Since IE doesn't
    render images embedded with the object element correctly, a dual object
    & img element construct is needed combined with so called "IE
    conditional comments". An example:

    <h1>
    <!--[if IE]><img src="logo.gif" width="10" height="50" alt="Widgets
    Inc"><![endif]-->
    <!--[if !IE]>--><object type="image/gif" data="logo.gif">Widgets
    Inc</object><!--<![endif]-->
    </h1>

    IE will use the <img> construct, other browsers and search engines will
    use the <object> construct.

    --
    Spartanicus
     
    Spartanicus, Aug 7, 2006
    #2
    1. Advertising

  3. David Woods

    Andy Dingley Guest

    On Mon, 07 Aug 2006 21:18:56 GMT, "David Woods"
    <> wrote:

    >I appreciate the many discussions about marking up a page semantically.


    I don't - I'm bored rigid with the things. The unknowing flapping their
    chops over the unknowable.

    HTML has trivial to negligible semantics and there's little you can do
    about it. It has little enough you can do within your own CMS (where you
    know the meaning of id and class vocabularies) and almost none of this
    is communicable to the outside world.

    There are a few vague rules that allow us to suspect that one design is
    "better" than another, but none of these really go so far as "good" and
    certainly not to "best" or "the one true solution". The only thing we
    really can know with any confidence is that any confident and dogmatic
    statement is itself unsupportable and wrong.
     
    Andy Dingley, Aug 8, 2006
    #3
  4. David Woods

    Chaddy2222 Guest

    David Woods wrote:
    > I appreciate the many discussions about marking up a page semantically. I
    > don't mean to rehash old arguments/discussions, but I am a little confused
    > as to the proper way to handle headers.
    >
    > In the web pages I have created I typically put a div stretching across the
    > screen in which I put a logo, the title of the organization, and possibly
    > other pictures, slogans, etc. In the main content div, I typically will put
    > a unique header for that page followed by paragraphs, etc.
    >
    > What should be marked up as <h1></h1>? The title of the organization in the
    > header/banner div? Or, the first header in the main content div?
    >
    > Which of the following examples should I use? Or can you provide a more
    > proper example?
    >
    > 1)
    > <div id="header">
    > <img ...>
    > <h1>Title of the organization</h1>
    > </div>
    > <div id="content>
    > <h2>Title of this page</h2>
    > <p>...</p>
    > </div>
    >
    > 2)
    > <div id="header">
    > <img ...>
    > <p>Title of the organization</p>
    > </div>
    > <div id="content>
    > <h1>Title of this page</h1>
    > <p>...</p>
    > </div>
    >
    > Thanks,
    >

    Hi.
    I would be personally inclined to go with the first example, it seams
    more logical, as you have the main info in the <h1> tag and the title
    of the document as the second heading. So I think your first example is
    fine.
    --
    Regards Chad. http://freewebdesign.cjb.cc
     
    Chaddy2222, Aug 8, 2006
    #4
  5. "Chaddy2222" <> skrev i meddelandet
    news:...
    >
    > David Woods wrote:
    > > I appreciate the many discussions about marking up a page semantically.

    I
    > > don't mean to rehash old arguments/discussions, but I am a little

    confused
    > > as to the proper way to handle headers.
    > >
    > > In the web pages I have created I typically put a div stretching across

    the
    > > screen in which I put a logo, the title of the organization, and

    possibly
    > > other pictures, slogans, etc. In the main content div, I typically will

    put
    > > a unique header for that page followed by paragraphs, etc.
    > >
    > > What should be marked up as <h1></h1>? The title of the organization in

    the
    > > header/banner div? Or, the first header in the main content div?
    > >
    > > Which of the following examples should I use? Or can you provide a more
    > > proper example?
    > >
    > > 1)
    > > <div id="header">
    > > <img ...>
    > > <h1>Title of the organization</h1>
    > > </div>
    > > <div id="content>
    > > <h2>Title of this page</h2>
    > > <p>...</p>
    > > </div>
    > >
    > > 2)
    > > <div id="header">
    > > <img ...>
    > > <p>Title of the organization</p>
    > > </div>
    > > <div id="content>
    > > <h1>Title of this page</h1>
    > > <p>...</p>
    > > </div>
    > >
    > > Thanks,
    > >

    > Hi.
    > I would be personally inclined to go with the first example, it seams
    > more logical, as you have the main info in the <h1> tag and the title
    > of the document as the second heading. So I think your first example is
    > fine.
    > --
    > Regards Chad. http://freewebdesign.cjb.cc



    You can still use a part of the title to write the name of the organization,
    cannot you?

    --
    Luigi Donatello Asero

    https://www.scaiecat-spa-gigi.com/it/europa/svezia/vaestra-goetaland/oeckeroe/groetoe.php
    Vad kallar man Sverige på italienska?
    E l´Italia in svedese?
     
    Luigi Donatello Asero, Aug 8, 2006
    #5
  6. David Woods

    Nije Nego Guest

    On Mon, 07 Aug 2006 21:18:56 GMT, David Woods wrote:

    > I appreciate the many discussions about marking up a page semantically. I
    > don't mean to rehash old arguments/discussions, but I am a little confused
    > as to the proper way to handle headers.
    >
    > In the web pages I have created I typically put a div stretching across the
    > screen in which I put a logo, the title of the organization, and possibly
    > other pictures, slogans, etc. In the main content div, I typically will put
    > a unique header for that page followed by paragraphs, etc.
    >
    > What should be marked up as <h1></h1>? The title of the organization in the
    > header/banner div? Or, the first header in the main content div?
    >
    > Which of the following examples should I use? Or can you provide a more
    > proper example?
    >
    > 1)
    > <div id="header">
    > <img ...>
    > <h1>Title of the organization</h1>
    > </div>
    > <div id="content>
    > <h2>Title of this page</h2>
    > <p>...</p>
    > </div>
    >
    > 2)
    > <div id="header">
    > <img ...>
    > <p>Title of the organization</p>
    > </div>
    > <div id="content>
    > <h1>Title of this page</h1>
    > <p>...</p>
    > </div>
    >
    > Thanks,


    I find it helpfull to write the content text first, without design in mind,
    and there you can clearly define what could, or should be <h?>.

    --
    buy, bought, bye
     
    Nije Nego, Aug 9, 2006
    #6
  7. David Woods

    David Woods Guest

    "Spartanicus" <> wrote in message
    news:...
    > "David Woods" <> wrote:
    >
    >>I appreciate the many discussions about marking up a page semantically. I
    >>don't mean to rehash old arguments/discussions, but I am a little confused
    >>as to the proper way to handle headers.
    >>
    >>In the web pages I have created I typically put a div stretching across
    >>the
    >>screen in which I put a logo, the title of the organization, and possibly
    >>other pictures, slogans, etc. In the main content div, I typically will
    >>put
    >>a unique header for that page followed by paragraphs, etc.
    >>
    >>What should be marked up as <h1></h1>? The title of the organization in
    >>the
    >>header/banner div? Or, the first header in the main content div?

    >
    > On the home page you should typically mark up the name of the
    > organisation as the h1 content and the title. On other pages on the same
    > site the topic of that page should be marked up as the h1 content.
    >
    > So the home page of Widgets Inc would have <h1>Widgets Inc</h1> on the
    > home page, and <h1>About Us</h1> on the "about" page, with "About Us -
    > Widgets Inc" as the title.



    Just wanted to say thanks to everyone for the thoughts and help. My
    confusion is that *I* would think that most web pages on a site that
    describe different aspects or sections of that organization should somehow
    in that page be noted as belonging to the site. Consider <h1>About
    Us</h1> - about whom? But it appears that HTML does not really have such a
    way to "brand" the page, other than a <div id="header"> with the
    organization logo/name/etc in it. Or is there?

    Anyway, I finally found http://www.simplebits.com/bits/simplequiz/ which
    addresses the same issue. Most comments on the article agree with what has
    been said here - and I've decided it makes the most sense to use a
    banner/header type div with the "pretty", supposed-to-be-distinctive web
    site look and then use <h1> to identify the individual pages.

    --

    David
     
    David Woods, Aug 10, 2006
    #7
  8. David Woods

    dorayme Guest

    In article <3r_Bg.12300$>,
    "Luigi Donatello Asero" <> wrote:

    > --
    > Luigi Donatello Asero


    You could do a bit of editing... ok. maybe not as much as this....

    --
    dorayme
     
    dorayme, Aug 10, 2006
    #8
  9. David Woods

    Spartanicus Guest

    "David Woods" <> wrote:

    >>>I appreciate the many discussions about marking up a page semantically. I
    >>>don't mean to rehash old arguments/discussions, but I am a little confused
    >>>as to the proper way to handle headers.
    >>>
    >>>In the web pages I have created I typically put a div stretching across
    >>>the
    >>>screen in which I put a logo, the title of the organization, and possibly
    >>>other pictures, slogans, etc. In the main content div, I typically will
    >>>put
    >>>a unique header for that page followed by paragraphs, etc.
    >>>
    >>>What should be marked up as <h1></h1>? The title of the organization in
    >>>the
    >>>header/banner div? Or, the first header in the main content div?

    >>
    >> On the home page you should typically mark up the name of the
    >> organisation as the h1 content and the title. On other pages on the same
    >> site the topic of that page should be marked up as the h1 content.
    >>
    >> So the home page of Widgets Inc would have <h1>Widgets Inc</h1> on the
    >> home page, and <h1>About Us</h1> on the "about" page, with "About Us -
    >> Widgets Inc" as the title.

    >
    >
    >Just wanted to say thanks to everyone for the thoughts and help. My
    >confusion is that *I* would think that most web pages on a site that
    >describe different aspects or sections of that organization should somehow
    >in that page be noted as belonging to the site. Consider <h1>About
    >Us</h1> - about whom? But it appears that HTML does not really have such a
    >way to "brand" the page, other than a <div id="header"> with the
    >organization logo/name/etc in it. Or is there?


    Again: <title>About Us - Widgets Inc</title>

    --
    Spartanicus
     
    Spartanicus, Aug 10, 2006
    #9
  10. David Woods

    David Woods Guest

    "Spartanicus" <> wrote in message
    news:p...

    >>> So the home page of Widgets Inc would have <h1>Widgets Inc</h1> on the
    >>> home page, and <h1>About Us</h1> on the "about" page, with "About Us -
    >>> Widgets Inc" as the title.


    <snip>

    > Again: <title>About Us - Widgets Inc</title>


    Ah, I misread your post. I thought you were saying one should have "About
    Us - Widgets Inc" as the header, as opposed to the title. I guess you could
    do that, although if the organization has a long title (as in my case) a
    <h1> with all that seems very unwieldy.

    Because of my misunderstanding I played around a bit with having the whole
    thing in the h1. Maybe it was just a waste of time. But with a bunch of
    markup one can create a breadcrumb or with less markup one can simply make
    all but title (ie "About Us") disappear. So... I know I've gone off chasing
    rabbits, but I have a couple more questions...

    1) Is it semantically _incorrect_ to have a header such as: <h1>About Us -
    Widgets Inc</h1>?
    2) Going a bit OT: In the context of making parts of a <h1> disappear. Do
    search engines dislike it when you set display: none; to text?

    --

    David
     
    David Woods, Aug 10, 2006
    #10
  11. David Woods

    Spartanicus Guest

    "David Woods" <> wrote:

    >1) Is it semantically _incorrect_ to have a header such as: <h1>About Us -
    >Widgets Inc</h1>?


    It's redundant if, as it should, "About us - Widgets Inc" is the page's
    title, and redundancy is not a good thing here. In the audio domain a
    screen reader would read the title followed by the h1 content, in the
    visual domain even if a user doesn't look at the title content in the
    window bar and they would land on the "About us" page directly (not via
    the home page), the context would typically be provided by the "Widgets
    Inc" name/logo (which as I advised earlier should be coded as a
    decorative element, hence it won't show up in the aural rendering of the
    document).

    >2) Going a bit OT: In the context of making parts of a <h1> disappear. Do
    >search engines dislike it when you set display: none; to text?


    SE's do not parse stylesheets.

    --
    Spartanicus
     
    Spartanicus, Aug 10, 2006
    #11
  12. Spartanicus <> scripsit:

    > "David Woods" <> wrote:
    >
    >> 1) Is it semantically _incorrect_ to have a header such as:
    >> <h1>About Us - Widgets Inc</h1>?

    >
    > It's redundant if, as it should, "About us - Widgets Inc" is the
    > page's title, and redundancy is not a good thing here.


    No, it isn't redundant at all. The <h1> element and the <title> element have
    different meanings and effects. I'm not sure I see what you point really is
    here, since your messages are difficult to see due to _redundant_ quoting in
    them (e.g., a fullquote followed by a one-liner), but if you're telling
    people to dump <h1> in favor of <title>, you're completely wrong.

    > In the audio
    > domain a screen reader would read the title followed by the h1
    > content,


    Perhaps. You cannot know how each browser treats the two distinct elements,
    and shouldn't care too much. The <title> element specifies an external title
    for the document, suitable for use in a reference outside the document
    itself, e.g. in a list of Favorites. It need not be rendered at all by a
    browser, and it's practically never rendered as part of the document proper.

    >> 2) Going a bit OT: In the context of making parts of a <h1>
    >> disappear. Do search engines dislike it when you set display: none;
    >> to text?

    >
    > SE's do not parse stylesheets.


    Perhaps they don't, perhaps they do - now or in the future. Actually,
    setting display: none has become one of the common methods of keyword
    spamming, so search engines might decide to try to detect such tricks. They
    surely _could_ parse stylesheets. (Parsing them isn't rocket science, and
    even if you add more elaborate analysis to parsing, it's surely manageable.
    Browsers can do that, and browsers, too, are just programs.)

    --
    Jukka K. Korpela ("Yucca")
    http://www.cs.tut.fi/~jkorpela/
     
    Jukka K. Korpela, Aug 10, 2006
    #12
  13. David Woods

    Spartanicus Guest

    "Jukka K. Korpela" <> wrote:

    >I'm not sure I see what you point really is
    >here, since your messages are difficult to see due to _redundant_ quoting in
    >them (e.g., a fullquote followed by a one-liner),


    I had noticed myself shortly after posting, a most uncharacteristic
    mistake for me to make, as such I question the value of drawing
    attention to it.

    >but if you're telling
    >people to dump <h1> in favor of <title>, you're completely wrong.


    No that's not what I've been saying, and that is easy to distill from
    what I wrote had that been the intention. Used correctly a document's h1
    content only needs to work within the context of the site, it should
    only provide the page heading. Used correctly a title of a page should
    work outside of the context of the site, it should start with the page's
    h1 content followed by content that establishes the context that will
    allow it to stand on its own.

    >> In the audio
    >> domain a screen reader would read the title followed by the h1
    >> content,

    >
    >Perhaps. You cannot know how each browser treats the two distinct elements,
    >and shouldn't care too much. The <title> element specifies an external title
    >for the document, suitable for use in a reference outside the document
    >itself, e.g. in a list of Favorites. It need not be rendered at all by a
    >browser, and it's practically never rendered as part of the document proper.


    Nothing is guaranteed to be rendered, so that's a non issue. What
    matters is what we can reasonably expect to happen, in this case every
    browser I have on my system renders page title content. IBM HPR, Jaws
    and Window Eyes all speak it, Opera doesn't speak it, but Opera's voice
    mode is a technology teaser which currently has no practical
    application, Opera is not suitable as an AT browser.

    >>> 2) Going a bit OT: In the context of making parts of a <h1>
    >>> disappear. Do search engines dislike it when you set display: none;
    >>> to text?

    >>
    >> SE's do not parse stylesheets.

    >
    >Perhaps they don't, perhaps they do - now or in the future. Actually,
    >setting display: none has become one of the common methods of keyword
    >spamming, so search engines might decide to try to detect such tricks.


    This again is about what we can reasonably expect to happen. There are
    no indications to suggest that any SE parses CSS. It is unreasonable to
    expect that they would ever do so for the purpose of finding CSS hiding
    tricks since there are many ways to make content invisible to most users
    (using various technologies), using CSS for example by setting
    display:none, visibility:hidden, positioning content off screen, by
    specifying a colour contrast to low to detect by the human eye etc.

    There are many valid reasons to do any of the above, these methods are
    often used for such valid reasons, thus penalizing a site for using such
    CSS would cause serious problems.

    --
    Spartanicus
     
    Spartanicus, Aug 11, 2006
    #13
    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. Robin Cull
    Replies:
    5
    Views:
    442
    Andrew Dalke
    Jul 31, 2003
  2. Daniel Joyce

    Python Audio (Alpy, Fastaudio, Etc Etc)

    Daniel Joyce, Sep 16, 2003, in forum: Python
    Replies:
    1
    Views:
    949
    Markus Wankus
    Sep 16, 2003
  3. Marco Herrn
    Replies:
    7
    Views:
    649
    Ng Pheng Siong
    Apr 9, 2004
  4. rodmc
    Replies:
    2
    Views:
    394
    Max Erickson
    Jan 3, 2006
  5. Kevin Walzer

    Re: PIL (etc etc etc) on OS X

    Kevin Walzer, Aug 1, 2008, in forum: Python
    Replies:
    4
    Views:
    451
    Fredrik Lundh
    Aug 13, 2008
Loading...

Share This Page