Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Semantically correct markup for headings (and heading order)

Status
Not open for further replies.
BillyRayPreachersSon

BillyRayPreachersSon

Programmer
Dec 8, 2003
17,047
GB
I've been reading the section on section headings from the Web Contect Accessibility Guidelines 1.0 (at and have a query about heading order.

I'll give a few examples for a fictional company, "The XYZ Company Limited", with a page about "ACME Widgets". Let's assume that there is always a navigation section before the main content, and the company want their name appearing near the top of the page... there are several different ways the markup could be achieved that I can think of. However, I'm not entirely sure which method is best.

For example, should the H1 element be used to denote the company name (XYZ Company), or the details of the bulk of the page content (ACME Widgets)? Or should it be a combination of both of these? Or does it not really matter, as long as the markup is semantically correct?

Here are some ways I can see immediately. I'm not entirely sure which method is "more right", or if any are definately wrong / not semantically correct.

Code: 
<h1>The XYZ Company Limited</h1>
...
<h2>Navigation</h2>
...
<h2>ACME widgets</h2>
<p>Some content here</p>

Code: 
<h1>The XYZ Company Limited</h1>
<h2>ACME widgets</h2>
...
<h3>Navigation</h3>
...
<h3>Content</h3>
<p>Some content here</p>

Code: 
<h1>ACME widgets - The XYZ Company Limited</h1>
...
<h2>Navigation</h2>
...
<h2>Content</h2>
<p>Some content here</p>

I'm sure there are other ways that I've not thought of, as well.

Can anyone shed any light on these methods, or others? I know that there may not be one "right" answer... I guess I'm just looking to air my thoughts and see what the discussion brings.

Thanks!

Dan

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Sort by date Sort by votes
Here is something to start the conversation... this is the generic structure used by a major media website in the UK:
Code: 
<h1>The Company Name Limited</h1>
  <h2>Navigation title</h2>
  <h2>Search box title</h2>
<h1>Function of this page</h1>
  <h2>Title for the page content</h2>
    <h3>Subsection title</h3>
    ... other levels nested naturally ...
    <h3>Subsection title</h3>
  <h2>Footer title</h2>
So there are two <h1> tags in use - one that describes the common content on each page (the name of the company and the common navigation and search functionality). The remaining <h1> describes the function of the page - and has nested headings within to represent the specific section titles and subsection titles.

The first <h1> (and it's child headings) are set to display:none (as is the second <h1> tag). This leaves the following (visible) structure to style:
Code: 
  <h2>Title for the page content</h2>
    <h3>Subsection title</h3>
    ... other levels nested naturally ...
    <h3>Subsection title</h3>
  <h2>Footer title</h2>

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch
[/tt]

What is Javascript? FAQ216-6094
 
Upvote 0 Downvote
Like you said, no right answer. One method to use in assessing the validity of different approaches is to use the "Show Outline" function of the W3C validator (or similar tool provided elsewhere - there's probably a FF extension to do it if you look). If the outline view of your page looks right, then you're doing the right thing. If not, then you're not.

The issue of whether to make the site title == the <h1> was well discussed here: .

I'd throw another possibility into consideration:
Code: 
<div id="pageheader">The XYZ Company Limited (probably a logo and other bits & pieces here too)</div>
<h1>ACME Widgets</h1>
...
<h2>Technical Specs</h2>
...
<h2>Prices</h2>
...
<h1>Navigation</h1>
...
Of course you can use CSS to make the Navigation <h1> look different to the page <h1>

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
Upvote 0 Downvote
I generally take each "section" of a page in it's own context and apply headings based on that.

So the main heading of a section will be an <h1> (sometimes I concede and start with <h2> though) then sub headings will be h2, h3 etc.

I don't recall the last time I had to go to h4 :)

Foamcow Heavy Industries - Web design and ranting
Buy Languedoc wines in the UK
 
Upvote 0 Downvote
I think what I'll settle for is something like this:

Code: 
<div id="header">The XYZ Company Limited</div>

<a href="...">Skip Nav Link</a>
<h1>Navigation</h1>
<ul>...</ul>

<h1>ACME Widgets</h1>
<p>Content here</p>

<p>Footer here</p>

I already had a "header" div on the page (which previously contained an H1)... so I've simply removed the H1. And I can see this makes sense... if I look at the document like a Word TOC, the heading would be the Word document title, not the first level 1 heading.

While having the "Navigation" heading as an H1 does feel alien to me, I can see that it is introducing a section of the document... although I'd like to find out how people feel about this - should a nicely structured navigation (ULs and LIs) need a title to introduce it? I'm starting to think the answer may be "no".

That aside, I'm a lot happier now, so many thanks for the feedback.

Dan

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Hmmm.. having thought about it, I think the answer doesn't really matter. Some TOCs list the contents page, some do not.. so I think it's personal preference, and I'm going to go with "yes" ;-)

Dan

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Hmmmm....

Let's assume that the page includes a <h1> somewhere, with the title of the page's main content. If the navigation comes after this <h1> in the markup, it arguably requires an <h1> of its own to seperate it from the page content in the outline view. Navigation is not part of the "ACME Widgets" information, it's seperate.

However, if the navigation comes before any <hn> tags in the markup, it's not being placed under any of them. Thus it doesn't need a heading tag, though you may want to include one so as to give it a place in the Document outline.

The only factor that might cause concern is SEO. Do search engines give extra weight to the first <h1> in a document? Will they be suspicious if that <h1> differs totally from the <title>? We don't know the answers to either question, but it may be safer not to take chances.

Therefore, if I were putting the navigation before the <h1> I would probably not give it a heading. If (as would normally be the case) it's after, then a heading should be considered (though possibly hidden from view with CSS).

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
801
spamjim
spamjim
Alt255
  • Locked
  • Question
Searching for a string that contains brackets
Replies
0
Views
215
Alt255
Alt255
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
211
lmcate
lmcate
scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
740
3esolar
3
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
665
PeDa
PeDa

Part and Inventory Search

Sponsor

Back
Top