Question about H1's

The way i see it is all tags are nothing but wrapping containers with different styles applied to them. You can make a b tag look exactly as an h1 tag and vise-versa. There’s no rule that says you can only use one of each tag per page, aside from the head tag and it’s meta tags.

Whenever you feel like showing some big text that can be used as a header for a section on the page, use an h1, they already did the CSS work for you. Go nuts…

oddz,

So what about my attempt here??

Debbie

I guess the author is wrong then.

Elements should never be chosen based primarily on display properties.

The way i see it is all tags are nothing but wrapping containers with different styles applied to them. You can make a b tag look exactly as an h1 tag and vise-versa. There’s no rule that says you can only use one of each tag per page, aside from the head tag and it’s meta tags.

The topic is the h1 and nothing more. You can have billion h2s if you like, spans, even font tags, but only one item can be most important. Once you begin using multiple h1s the meaning of the tag is lost – again most important.

No, the author is simply expressing an opinion.

I think that is fine though your going a little h2 crazy but yeah. In my opinion I would have the sidebar content headings be h3 probably. They are essentially less important than the featured stories… I mean that is why they are at the side – right.

Headings should be chosen based on precedence, relative to one another absolute to the entire document.

It doesn’t say anywhere that is an opinion. In fact the reference guide is meant to be a resource of facts, not opinions. So your saying the author has published incorrect content.

The topic is the h1 and nothing more. You can have billion h2s if you like, spans, even font tags, but only one item can be most important. Once you begin using multiple h1s the meaning of the tag is lost – again most important.

But in a browsers perspective it doesn’t matter. It is suggested to be used only once for the most important section because of how big it makes the font appear on the page. Sure, use it only once if you want one section on the page to stand out more than all others, but it is a heading tag, use it whenever a heading is needed.

This has nothing to do with presentation. Don’t get me wrong, presentation is a big part but there are many ways of creating visual emphasis, not just size. Using a h1 because browsers significantly increase the font size is the wrong train of thought. That is like using a span because its an inline element where a paragraph tag is more appropriate. Like you said, styles can be used to achieve the look that is desired so choosing elements should always be based on meaning not presentational qualities default or otherwise.

Except in my example I have a Left and Right Column which are both “side bars”.

Headings should be chosen based on precedence, relative to one another absolute to the entire document.

And this is where I get stuck and made my comments to r937 who has disappeared…

In 1990, the web and its content was usually LINEAR per page.

In 2011, web pages are often a hodge-podge of disparate content (e.g. my Home Page).

In my example, what is in the Left Column is independent of what is in the Middle Column is independent of what is in the Right Column.

If I decided the top article in the Middle Column was an <H1> that is fine, but there is no relationship to the <Hx>'s in the outside columns or in the article below the main one?!

So what should those be?

You suggest backing off all of the <H2>'s and maybe using an <H3>, but then is that “skipping” a level? :-/

If none of the <H2>'s or <H3>'s relate to the <H1> then there is already a skip, right?

The reference example on SitePoint is great, but is is also LINEAR CONTENT.

My Home Page is like most, and is an amalgamation of various things on my website that really aren’t related. The Home Page just is a highlight or teaser of what is inside. SO that makes coming up with a “proper” semantic strategy much harder if you’re going to do things correctly (as possible).

Debbie

I feel as if I’ve wandered into an Asperger’s convention.

That is NOT why you use headings. If elements were chosen purely for visual appearance we could use Microsoft-style WYSIWYG and just set fonts, sizes and colours directly on the text. No … the reason we use headings and other different elements is because they convey semantic information. This means the page can more easily be interpreted by other computers, eg search engines and assistive technology. Some browsers allow you to navigate by headings and to create a document tree from them - that only works if people use headings correctly from the structure of the page rather than based on visual presentation.

Can we calm this down, please, it’s starting to get a bit personal. The debate over whether it’s OK to have multiple <h1>s on a page has been raging for years – I’m not sure we need to continue the debate here, and we certainly don’t need the rage.

Sorry, I didn’t mean to convey any rage. I’m just trying to point out that when it comes to how to use various tags and other elements of HTML/CSS, we generally shouldn’t be setting down rigid, absolute, inflexible rules. The fact that a tag was intended for a certain purpose doesn’t mean that using it in a slightly different way is somehow forbidden or worthy of scorn.

I see that kind of attitude in here periodically, and it’s sometimes expressed in very nasty, “what a moron you are for doing this” ways. I don’t think it’s very helpful or productive. The objective is to produce web pages that do what you want them to do, can be maintained without killing yourself, work cross-browser without having to resort to too many hacks, and so on. Producing code that’s “perfect” in the eyes of a guru shouldn’t be the primary goal.

Let’s face it, having a second <h1> on a page isn’t going to bring about the end of civilization as we know it, is it? :wink:

Except that I’ve never been part of any past discussions, so it is important to me to see what others think…

Debbie

this is exactly the same argument that was and still is used to justify the use of the TABLE tag for laying out page contents

i’m sorry, that argument just doesn’t hold water any more

web dev is actually really simple – just use the right tags for the right job

a page can’t have multiple TITLE tags, and it shouldn’t (but unfortunately can) have multiple H1s for the same reason

But is the <H1> synonymous with the <TITLE>??

Or is the <H1> just the most important content element on the web page - even if lower level elements (e.g. <H2> or <H3>) do not logically map/relate to the <H1>??

If using Heading Elements is based on “ranking” (as opposed to “relationship”) then it is easier for me to come up with an approach for my Home Page.

But if using Heading Elements is based on “relationship” (as opposed to “ranking”) then things get much trickier for a Home Page with unrelated, disparate parts/sections.

Debbie

No. They’re used in different ways. The <title> needs to make sense out of context - it’s what appears in search results, bookmarks, the browser title bar and more. Most site owners will want to include page and site info in it. The <h1> will only ever be read within the context of the page, so it doesn’t have to repeat the site name and section, it only needs to give the page info.

Then use the search facility to find the past discussions. The reason we have all past threads archived is so that we don’t have to keep going over old ground and repeating ourselves.

Part of the issue here is that the way you use headings differs in HTML4 and HTML5. As you’re probably working with HTML4 right now, let’s deal with that first.

In HTML4, headings are used to create a structure in a page. Because of that, if you want a meaningful structure, you need to use headings in a proper, hierarchical manner. Try to think of this as an analogy. Consider the page as a book. The title of the book would be an H1. The next ‘subsection’ of the book would be the chapters. Each chapter would be an H2. Individual chapters might be broken down into sections. These would then be H3s. And so on.

If you tried to make a book in which you labeled the book as ‘Chapter 1’, and then had the book title as a subsection of that, it would be absurd. Likewise, if some of the main divisions of the book were chapters, but one was the book title and others were subsections, your table of contents would be very strange.

In our analogy:

H1 = book title
H2 = chapter title
H3 = section of chapter
h4 = subsection of these sections
and so on.

You can’t have a subsection without a section first. You can’t have a chapter title with the book title first.

There is a bit of disagreement about what the H1 should be used for on a web page. Most developers think that the H1 should be the main title for the page. A minority of developers think that the H1 should be the title of the website. I think it can depend on the type of site. If, for example, you were building a three page website for ‘DoubleDee - Aviator’, that might be the most important thing about each page, and you could use the H1 for the site title. A website for a University, however, would probably use the h1 for each individual web page, because the title of the page is of more importance than the name of the university. However, this whole thing is up for debate.

If, however, you use the H1 for the site title, you should not have any further H1s on a page. If you use H1 for the page title, you could conceivably have more than one H1 (although it’s bad practice, IMO) if your page consisted over several unrelated sections of equal importance (although why they would be on the same page, I’m not sure).

In HTML5, however, things have changed. The structure of the page is no longer created from the headings. Thus it’s perfectly normal to have multiple H1s on a page. But HTML5 is too large a topic for me to go into here.

You would want to use ONE H1 per page for SEO purposes. More than one is bad news. Not horrible, but just not really too great for SEO purposes. Search Engines look for those tags and will have trouble finding out the main points on a certain page if you have multiple H1s.

So for SEO purposes, bad.

If you dont care about SEO, it doesnt matter. Do as you would like, but they’re really isnt any need to have more than one h1. Just use all other h2, h3, h4, h5 and style them as you please. I mean essentially you could style the H1 tag with CSS to make it have a 8px size font, and style the h3 to have a 40px font.

How I’ve always though of h1, h2, h3, h4, h5 ,h6 is not that they are a site wide hierarchy but a page by page hierarchy. h1 would deal with what the page is about.

If it’s an about me, I would either have the client’s company or name. Of course the links wouldn’t have as much of importance on that page then the name of the page.

<title> deals with SEO and mainly(should be) what h1,h2,etc… are used for.
For example: If a user of a site decided one day he needs to view the page with images off, then your site would look a hot mess. With Multiple h1s and h2s, how would the user know what is important or what is the title of the page.

What if you use the image replacement technique for the logo to give more points for SEO on your page? Would you chose to use h6 for the image replacement? If you did then that wouldn’t make sense because h1’s content would no doubt be the websites name or company’s name.

If you chose to put another logo on your site that is not the company’s logo, or website’s logo, but a sponsor. Would you chose to make that header element to be replaced h1, as well as the site’s, logo. If you did then the search engine would give as much importance to the sponsor’s name as the company’s or website’s name.

I don’t know if that makes any sense at all…but to me it does so I decided to input my opinion.

barrykins,

If you were re-writing Amazon.com’s home page, what would you make <H1>??

As far as I can see, they don’t even have an <H1>.

For a web page that is an article entitled “The Benefits of Joining the BBB” the <H1> for the page is pretty obvious. Home pages are trickier…

Debbie