The role of h1 on a web page

[Stomme poes]

Y'know, I was moving away from using Web Site Name as h1 and page itself as h2, cause everyone was saying that Coca Cola's About page is really title'd "About" and not "Coca-Cola: About" however...
when someone asked me what that name was, was it not also a title? And, well, it is. If it's ONLY a logo sure, it's a logo, make it a whatever and stick the image on top with image replacement or make it content as an HTML image, but the name of the Web Site has to be SOME sort of title on your page as well.

The name of the company on a company site IS a title. I couldn't make myself start with the company name as a h2 and then have the title of the main content an h1 because that's screwing with the order, so I ended up going back to using an h1 for company/website title and using h2 for the main page title. This means for me only a single h2 allowed and everything else is an h3 or lower.

I know Teh googlies don't index sites but lone pages. However the About page of either my company or Coca Cola's are differentiated by the fact that one about is but a single page belonging only to Coca Cola and my about belongs to me, and the text saying so is a sort of title.

If I take two books or newspapers and rip all the pages out and scatter them around (what teh interTubes do), the pages as single documents may have "About" as their titles, however they belong under yet another title, another heirarchy, and that's the book or newspaper they belong to, if it's listed on that page. Googles may see pages as standalone, but they simply aren't. They belong to someone and I can't think of anything other than a title to define that someone's name.

I'm sooooo waffley, I should be a politician.

<p id="title">Name of website<span></span></p>
<h1>About Us</h1>

I just can't do this anymore. Why am I naming p "title" and not making it a header? That's just... so wrong, I can't. Making "title" into "companyname" still means "name" and that's just me playing semantics with myself to make mee feel better : (

[L4DD13]

I have read Building Findable Websites by Aarron Walter and it specifies that H1 should be used for the header of your website, like the logo then H2, etc should be used for the rest of the content where h2 takes the importance of the h1 tag within content.

I've started to use h1 for implementing website logos etc.

<h1 id="xxxx-logo">A bit about the website with keywords</h1>

(The logo would be implemented using css).

Previously I was using

<div id="logo"><img src="xxxxxxx" title="xxx"></div>

The first example provides more useful and relavent content for Search Engines to gobble up.

[AutisticCuckoo]

What would you recomend for a blog? (where all posts are listed on front page)

That could be a legitimate reason for multiple top-level headings.

Another option is to use a single H1 for the blog name and use H2s for article headings. That's what I do, but it's not The Only Correct Way™.

[cooper.semantics]

Y'know, I was moving away from using Web Site Name as h1 and page itself as h2, cause everyone was saying that Coca Cola's About page is really title'd "About" and not "Coca-Cola: About" however...
when someone asked me what that name was, was it not also a title? And, well, it is. If it's ONLY a logo sure, it's a logo, make it a whatever and stick the image on top with image replacement or make it content as an HTML image, but the name of the Web Site has to be SOME sort of title on your page as well.

The name of the company on a company site IS a title. I couldn't make myself start with the company name as a h2 and then have the title of the main content an h1 because that's screwing with the order, so I ended up going back to using an h1 for company/website title and using h2 for the main page title. This means for me only a single h2 allowed and everything else is an h3 or lower.

I know Teh googlies don't index sites but lone pages. However the About page of either my company or Coca Cola's are differentiated by the fact that one about is but a single page belonging only to Coca Cola and my about belongs to me, and the text saying so is a sort of title.

If I take two books or newspapers and rip all the pages out and scatter them around (what teh interTubes do), the pages as single documents may have "About" as their titles, however they belong under yet another title, another heirarchy, and that's the book or newspaper they belong to, if it's listed on that page. Googles may see pages as standalone, but they simply aren't. They belong to someone and I can't think of anything other than a title to define that someone's name.

I'm sooooo waffley, I should be a politician.

<p id="title">Name of website<span></span></p>
<h1>About Us</h1>

I just can't do this anymore. Why am I naming p "title" and not making it a header? That's just... so wrong, I can't. Making "title" into "companyname" still means "name" and that's just me playing semantics with myself to make mee feel better : (

You bring a good argument to the table. I worked with this guy that would do something like this:

<a id="logo" title="..." href="/"><img src="logo.gif" alt="..." /></a>

<h1><span>Site Name -</span> About</h1>

h1 span { 
	position: absolute;
	top: 0;
	left: -999em;
}

[rochow]

The logo is the branding of that website, it has more meaning than the simple text that its made up of. That's why it should be an image.

However.................

I've come across sites I've coded which have no real <h1>, so what to do there? There will be a few headings in the content section and I can't technically make them all <h1>'s, and can't technically make them all <h2>'s... and can't make the logo a <h1> on the homepage then an image on subpages where there IS a <h1> (well can, but its stupid). I've used <h2>'s for them all just had no <h1> on that particular page, not an ideal solution though.

Ideas?

[Stomme poes]

Yeah I've also had pages where the company name was definitely the Title of the Index Page but on inner pages it was just there because 1. it was a section of the company's site and 2. they want the logo on each page

If there's nothing that can really be an h1 though, possibly the copy needs to be rewritten and the info on the pages reshuffled? Generally a page should mostly be about one thing.

That's why often if the logo also happens to have the little slogan text with it, all that text is dumped into image replacement and using ds's <small> technique, and often in an h1 depending on the page.

You could also do the #index h1 and p or img styles, and the rest of the pages different h1/p/img styles, though that's not really great if the idea is that each page on the site looks about the same and follows the same design.

[cooper.semantics]

There are some 'developers' that add a h1 that is hidden to the viewer.

[Stomme poes]

Can't think of a reason for that, though I've seen Mike Cherim add OTHER headers which are invisible to the viewer. Can't remember if that was mentioned in this thread or another. He has a good reason for it, but I don't think I'd do it with an H1.

[cooper.semantics]

Yeah, I was looking through Mike's experiments. He has some pretty neat stuff

[curiousn]

Again, thanks for all your opinions.

Out of curiosity, I've taken a look at how some of the big ones do it, and found interesting things.

Molly Holzschlag:

• image for a logo
• h1 for site navigation title
• also h1 for a title, 'molly.com', which I believe is on every page
• h2 for post date
• h3 for post title

Eric Meyer:

• h1 for logo
• h3 for post title
• no h2 on the home page at least

Dave Shea: h1 for logo

ALA:

• h1 for logo
• no h2 on the home page
• h3 for date
• h4 for post title

An interesting assortment, I think. Not very helpful, perhaps, in deciding.

[rochow]

- h3 for date
- h4 for post title

What the heck... perhaps because the date comes first, their logic is the date is the heading, with the posts made on that date being the sub-heading (as there are multiple posts under that date)

From their site:

<h1 id="masthead">
<a href="/"><img src="/pix/alalogo.gif" alt="A LIST Apart: For People Who Make Websites" /></a>
</h1>

and this:

<div id="ishintro"><p>Fine-tuning the mechanics of progressive enhancement. Rethinking the assumptions of standards-based design.</p></div>

I'm guessing it hasn't been updated in years...

[cooper.semantics]

I agree with Rochow.

Being that these specific sites are obviously outdated, I would not 'follow' the rule of thumb presented.

Also, a lot of the time, developers get so involved with presentation, that they forget about the 'separation' of data.

[rochow]

Also, a lot of the time, developers get so involved with presentation, that they forget about the 'separation' of data.

This is true especially with your own sites. With someone else's site, you follow their design and your job is solely to work on the HTML and CSS - when it's your own site though, its easy to put too much emphasise on the design and not do a proper job on the HTML and CSS.

[curiousn]

Strange, though, as you would think that if someone would write proper HTML and CSS, those guys would - but you're right: some of the things I quoted are clearly not very good practice.

[AutisticCuckoo]

Strange, though, as you would think that if someone would write proper HTML and CSS, those guys would

Why? Becoming famous is more a result of good marketing than of spectacular skills.

[rochow]

If anything it's quite the opposite (famous = not great skills). Ever heard the saying "those who can't do, teach?". Similar to when you become a manager you lose your skills as you aren't actively doing all the work.

[AutisticCuckoo]

Molly, Eric, Dave and Jeffrey definitely have great skills, but they are only human. No one is perfect and everyone makes mistakes.

[Stomme poes]

Comes back and bites them sometimes. I've seen more than once someone here posts something, and someone else digs up their own personal site and says, "you mean do it like you didn't here?"

But who's more important, you or your clients? The work you do for your clients I think can (should) speak more than whatever garbage pit you live in at home, yeah?
It's gotta be pretty hard to redo a site like ALA when you can't afford to break any old stuff, esp when it starts numbering in the hundreds of pages.

[disgracian]

I've long used this model, and I'd be interested to hear other opinions on it:

<h1><img width="x" height="y" src="/path/to/img" alt="Text for non-image browsers"></h1>

It marks up (or appears to) the alt text as a level 1 heading when images are disabled.

Cheers,
D.

[cooper.semantics]

I've long used this model, and I'd be interested to hear other opinions on it:

<h1><img width="x" height="y" src="/path/to/img" alt="Text for non-image browsers"></h1>

It marks up (or appears to) the alt text as a level 1 heading when images are disabled.

Cheers,
D.

I would refrain from putting an image inside a <hx> tag.
Also, if you are using the branding-logo as your <h1> I would tell you to rethink your approach.

[disgracian]

Why?

Cheers,
D.

[cooper.semantics]

I advise you read this entire thread, but here is an example of what I do:

<div id="branding">
	<img src="" alt="" width="" height="" /><!-- Branding logo -->
	<p>......</p><!-- Tagline + hidden information --><!-- EDITED TO NOT CONFUSE ANYONE -->
</div>	

<div id="content">
	<h1>About</h1>
	.......
</div>

One huge reason out of the bunch why I do not use 'graphic headers' is because,
I build a lot of sites that entail internationalization.

I think since headers are important, they should be most accessible for everyone.

Text is the most accessible thing when used correctly.
1. Do not size text in pixels.
2. Do not size text in absolute units of measurement.

Technically, pixels are relative units of measurement but, ie6 does not agree, therefore, ie will not scale text sized in pixels.

[rochow]

Why a <p> for the tagline? Usually they aren't paragraphs, merely a few words

[disgracian]

I read the thread before posting. Other than not marking up the site name with h1, I can't see a single practical drawback to using hx to mark up alt text. I even used your criteria:

A good practice to test your solutions:

1. Disable stylesheets
2. Disable images
3. Print preview

3/3.

Cheers,
D.

[rochow]

I read the thread before posting. Other than not marking up the site name with h1, I can't see a single practical drawback to using hx to mark up alt text. I even used your criteria:

3/3.

Cheers,
D.

Well that's easy: The <h1> tag is for the main heading on the page, and the logo is NOT the main heading of the page (as much as some fanboys try to argue that it is)