Semantics & <h1>, <h2>, etc

[David Woods]

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,

 

[Spartanicus]

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.

 

[Andy Dingley]

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.

 

[Chaddy2222]

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.

 

[Luigi Donatello Asero]

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.

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?

 

[Nije Nego]

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

 

[David Woods]

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.

 

[dorayme]

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

 

[Spartanicus]

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>

 

[David Woods]

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?

 

[Spartanicus]

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.

 

[Jukka K. Korpela]

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

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.

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

 

[Spartanicus]

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.

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.

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.