Question about H1's

HTML & CSS
1

How many <H1> tags can you have on a web page?

Is there only supposed to be one “supreme almighty <H1>”, or can you have a few?

My personal website is like an online newspaper. As such it has several content sections on the Home Page. One section (i.e. “Headlines”) is in the Left Column, two more content sections (i.e. “Featured Article” and “Small Business”) are in the main Center Column, and a fourth content section (i.e. “Upcoming Events”) is in the RightColumn.

Can each content area start off with an <H1> tag?

Debbie

2

I don’t see why you can’t have as many as you like. Why would having more than one be a concern?

Rgds

3

Well, Headings are supposed to be descendants, right?

I’m not sure - in database terms - if it is a “One-to-Many” or “Many-to-Many” relationship. (Where is r937?!)

I was thinking you’d have only one <H1> per page, but could have multiple <H2>, <H3>,…

Debbie

4

Opinions are divided.

Some people say that logically you can only have one <h1> on a page.

Some people say that the site name and branding should be in an <h1>, others say it should not.

If you take the view that the site name and branding should not be in an <h1>, it is perfectly possible to have a page that has no single top-level heading, but several equally important headings … in which case, it would make sense to have them all as <h1>.

5

Well, here is the Header code that I am “including” in each web page…


<div id="header">
	<a href="<?php echo WEB_ROOT ?>index.php">
		<img class="logo" src="<?php echo SECURE_WEB_ROOT ?>images/MyLogo.png" width="220" alt="My Logo" />
	</a>
	<p id="welcome">
		<span class="redBold">
			Helping small businesses get off to a good start!!
		</span>
	</p>

	<ul id="topMenu">
		<li class="current"><a href="<?php echo WEB_ROOT ?>index.php">Home</a></li>
		<li><a href="<?php echo WEB_ROOT ?>articles/a_index.php">Articles</a></li>
		<li><a href="<?php echo WEB_ROOT ?>casestudies/cs_index.php">Case Studies</a></li>
		and so on...
	</ul><!-- End of #TOPMENU -->
</div><!-- End of #HEADER -->

Did I just create a semantic nightmare?? :shifty:

Debbie

6

I’d be curious to see what DeathShadow thinks, since he seems to be an expert on Semantics (among other things)…

Debbie

7

First question is what the heck you need <span class=“redBold”> there for, given that (a) it’s a daft name to give a class, and (b) it is the sole content of a paragraph with an ID … why not just slap the style onto #welcome?

8

I created that class so that when I want to highlight a few words I can do exactly what I did. (It just so happens that this case was the entire sentence.)

Yeah, I could fix that one thing, but back to my larger question…

Debbie

9

napping :wink:

it should be one-to-one

one page should have one main heading, as well as one title

the heading and title should be extremely similar, if not identical

the situation you describe is that you have one page (the home page) consisting of multiple sections, so these sections should have H2s, not H1s

your H1 should say Home Page or however you choose to name it

10

My Home Page has a Top Menu, Left Column, Middle Column with two sub-sections, and a Right Column. (The HTML and CSS are fairly complex.)

Nothing personal, but what you describe sounds like the first web pages out there where the content was linear and conveniently fit into a structure like…

<h1>Our Vacation across the U.S.</h1>

<h2>Month #1</h2>
<h3>New York</h3>
<h3>New Jersey</h3>
<h3>Pennsylvania</h3>

<h2>Month #3</h2>
<h3>Utah</h3>
<h3>Nevada</h3>
<h3>California</h3>

I don’t think my Home Page has an all-inclusive <H1> per se, unless it it my company name?!

(It looks like Yahoo’s or CNN’s home pages - very busy with lots of sections.)

And even other pages (e.g. article on “Using QuickBooks to manage your Small Business”) don’t necessarily have an <H1> for the entire page.

In this example, I would have…

<h1>Using QuickBooks to manage your Small Business</h1>

But I would NOT wrap the entire web page in an <H1> - that is so 1990s… :lol:

Debbie

11

My personal opinion is I believe the h1 is sacred and there should only ever be one. I use the h1 to define the main content, focal point in a way. Everything else, sidebars, mastheads, footers, etc that wrap the main content use other heading levels based on the contents structure. Normally though headings inside sidebars are always marked up in a way that makes them less dominant than headings for the pages main content. h1 should be used to tell the user and machine the most important thing on the page. So the more h1s you use the less meaningful the h1 becomes, to human and machine. Taking that into consideration I do not mark-up branding with a h1. I mean… think about is practically. Pretend the h1 is the only thing you see on a page. So if you mark-up a logo as the h1 that gives no information about the pages content, what really matters. In regards to the standard news site home page the most logical h1 would probably be the featured story title I would think. Also, considering heading level in terms of human readers is tightly coupled to some type of visual property, generally size – emphasis that can be used as a way to determine a proper heading. I mean… would it really make sense to mark-up an content as a h1 yet make it the smallest thing on the page – I would think not, unless there where some other form of design emphasis in use.

12

Makes sense, but particularly with my Home Page, that’s a tough one…

Using Paul O’s 3-Column Blah Blah layout with a fair amount of “wrapper” <DIV> tags makes it tougher, and I will not create some God-<H1> for the sake of having a supreme element.

If push comes to shove, do I hear you saying, “Pick whichever sub-section is most important and give it an <H1>”??

I think part of my confusion with <H1>'s is that if you can have only one like you are saying, then to me, that implies everything else needs to map up to that <H1>?! :-/

The sections on my Home Page do map to the page itself, but the page itself doesn’t have any logical semantic like my earlier vacation example, and since I’m using a more modern - read complex - layout using <DIV>'s there isn’t a practical way to have an <H1> for the entire Home Page as r937 suggests.

Also, can you have <H2>'s, <H3>'s, etc on a web page without an <H1>?? :scratch:

Debbie

13

The best thing to do is pick the most important content and use a h1 for that. Logically, things in the center would seem more important than everything else. Than logically the item at the top in the center would seem more important to the one below it. Visually, I would expect the story in the center column at the top to the focal point. So to me it would make sense to follow through with that precedence with a h1. Speaking visually the most appropriate h1 is generally the heading accompanying or in close proximity to the focal point. oh… and by visually I mean the path the user should follow, which is directly related to how and when the user should experience the information.

14

Below is an example of what my Home Page might look like…

(I’ll mark it up and see if I’m following your advice?!)

Left Column:
<h2>Latest News</h2>
News Link #1
News Link #2
:
News Link #n

Center Column:
<h1>Featured Stories</h1>

<h2>Fire Your Accountant and Try Quickbooks</h2>
<p>Learn how take charge of your books…</p>

<h2>College Interns: Friend or Foe?</h2>
<p>Bringing on an unpaid college intern may not make the most business sense…</p>

Right Column:
<h2>Ask The Expert</h2>
<p>Dear Debbie…</p>

<h2>Business Workshops</h2>
<p>The BBB will be holding the following Small Business workshops…</p>

<h2>Tip of the Week</h2>
<p>Voice-Over IP is more affordable than ever…</p>

What throws me off is that logically all of the <H2>'s don’t map back to my one <H1> in the example above. And that is why I was putting each section at the same level - whether that be <H1> or <H2>.

Debbie

15

you asked (hinted for) my opinion, so i gave it to you

then you shouted and laughed at me

that wasn’t very nice and i’m a bit miffed

one H1 per page is a very good convention, and that’s not just my opinion, others hold it too for good reason, and if you don’t understand why, then you know what? i’m not going to attempt to explain it to you because i’ve got a really low tolerance for abuse

:cool:

16

I was not shouting.

I just bold things that are important in my endless paragraphs of babble.

It is a chuckle, and meant to be light-hearted.

(You’re reading too much into this.)

one H1 per page is a very good convention,

I don’t disagree.

and that’s not just my opinion, others hold it too for good reason, and if you don’t understand why, then you know what? i’m not going to attempt to explain it to you because i’ve got a really low tolerance for abuse

Abuse is disagreeing with you?

Must not have been a very good nap…

One H1 per page when you can logically assign one, sure.

One H1 per page that is contrived for the sake of having on H1 per page, no.

If there was one logical H1 for my current Home Page I wouldn’t be asking for help!

Not sure what all of the crabbiness is about, but I was NOT being mean or rude. I just bolded some sentences that I wanted to stand out, and I added some laughter to lighten things up. Not to be called “abusive”… :rolleyes:

Debbie

17

I think DoubleDee is getting bogged down in “rules” that simply aren’t cut and dried. For god’s sake, use <h1> however you like. The HTML Police aren’t going to break down your door if you’re violating some arbitrary rule. There isn’t only one “right” way to code a page.

18

I realize that, but I’m trying use a “best practices” approach as much as possible so I can grow up to be a superstar someday like Paul O or Rayzur or Stomme and lots of others on SitePoint!

Besides, nobody likes sloppy implementations!

Debbie

19

huh…

notice: what does the first line say? –

The h1 element is used to indicate the most important (or highest-level) heading on the page. – note that is singular not plural. Again, that means one, not two, three, eight or hundred – one per page.

20

But there’s no agreement about what “best practices” are, so you’re chasing a phantom. You’ll encounter some strongly, even vehemently, held opinions here, but they’re just that - opinions.