WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Headers

for

From: Cliff Tyllick
Date: Jan 14, 2011 4:00PM

To answer your question about <h2>, yes, the h2 is whatever you call the next heading level below the h1.

As the number goes up, the importance of the heading goes down. Think of it as corresponding to the position of the topic in an outline:

h1 is in the first position, with no indent
h2 is in the second position, with one indent
h3 is in the third position, with two indents

So the number in the heading level is 1 plus the number of indents (or demotions, if you will) for that heading in an outline of your document.

And the neat thing about your classes is that if for any reason you need your series of headings to look different on one page, or different in one set of pages (if you have help pages, maybe you want them to have their own look), you can just add a new class to your stylesheet:

.bluepageMainAreaHeader { color: #0047A4; font-size: 125%; text-align: center; margin-bottom: 20; }

And the code for the main heading on those web pages would be <h1 class="bluepageMainAreaHeader">

You're on the right track. Good luck!

Cliff

Cliff Tyllick
Usability assessment coordinator
Agency Communications Division
Texas Commission on Environmental Quality
512-239-4516
<EMAIL REMOVED>

>>> On 1/14/2011 at 4:31 PM, in message < <EMAIL REMOVED> >, Heather Parker < <EMAIL REMOVED> > wrote:
Perfect. I just appended it onto the end.

.pageMainAreaHeader { color: #0132A7; font-size: 110%; font-weight: bolder; text-align: left; margin-bottom: 0; }

I assume that pageMainAreaSubHeader will be <h2>?

In learning html, I sort of jumped right over the Hn's. I went from doing things like <center><b>title</b></center> to working webpages with style sheets.

Heather

-----Original Message-----
From: <EMAIL REMOVED> [mailto: <EMAIL REMOVED> ] On Behalf Of Jukka K. Korpela
Sent: Friday, January 14, 2011 2:04 PM
To: WebAIM Discussion List
Subject: Re: [WebAIM] Headers

Heather Parker wrote:

> <h1 class="pageMainAreaHeader"> is what I ended up using instead of
> <span class="pageMainAreaHeader">, but I'm getting an extra line
> under the header.

If you switch from, say, <span> to <h1>, which is a good move for the 1st
level heading, then you need to take into account that elements like <h1>
have default formatting. For example, to remove the default bottom margin
for <h1>, looking like an empty line, you can use
h1 { margin-bottom: 0; }
in your CSS code.

--
Yucca, http://www.cs.tut.fi/~jkorpela/