Minz. Out of the box

Headings or no headings?

08/26/2003

I am always struggling with this. Consider the following Markup:

 
<div id="headmast"> 
	<h1>Intermediate XHTML</h1> 
</div> 

<div id="content"> 
	<h2>Coursework</h2> 
	<p>Just some content here.....</p> 
</div>  
<div id="navigation"> 
<!-- Navigation --> 
	<h?>Week 1</h?> 
	<a href="/">The week one link</a> 
	<h?>Week 2</h?> 
	<a href="/">The week two link</a> 

</div> 

Now, what do you think? The headings in the Navigation div. They are following the main content, but it is a new group of objects (the link list).
Better to mark the headings of the nav div as <h3> or as <h1>???

Or would you prefer to have no headings at all in a navigational list, and instead use some nested lists, just like:

 
<ul> 
	<li>Week One: 
		<ul> 
		<li><a href="/">Link one</a></li> 
		<li><a href="/">Link two</a></li> 
		</ul> 
	</li> 

</ul> 

What do you think?

Comments

/:

I always use this scheme:

<h1>Page Title</h1>

<h2>Recent entries (or "Content" or some such)</h2>

<h3>Entry Title</h3>
<h3>Entry Title</h3>
<h3>Entry Title</h3>

<h2>Navigation</h2>
<ul>...</ul>

Posted: 08/26/2003

Anne van Kesteren:

Using h2 is correct. You can style them (why am I telling this, you know that :) ) to a smaller size with CSS. And with a descendent combinator you can style those different from the main content.

O and about ugly sites on the X-Philes list :), you know you can do a lot better. You CSS Zen Garden design betrayed you :p.

Posted: 08/26/2003

Minz Meyer:

Okay, thanks. <h2> sounds good for me.

@ Anne:
[..]you know you can do a lot better[..]

Veel dank voor de bloemen. (ouch, was this dutch? :))
But using 3 alternate styles for a homepage you have to make compromises (or blow up your source code).
I am quite satisfied with mine, although there are always things to improve (you know, I guess).

@/:
Just curious, I am eager to know who Mr. Or Mrs. / is :))

Posted: 08/26/2003

Arthur!:

'Bedankt voor die bloemen uit Holland', is what the pope always says :)

Posted: 08/26/2003

Thomas Scholz:

Ich denke, das ist einer der Fälle, in denen eine eigene <h1> für die Navigation richtig ist.
Die einzelnen Abschnitte bekommen dann eine <h2>, werden damit aber nicht mehr der <h1> des Haupttextes untergeordnet. Gerade für Voicebrowser, oder genauer: deren Nutzer, ist eine eigene Überschrift über der Navigation sehr willkommen. Die kann man aus optischen Gründen ja "verstecken".
Hauptsache, die Outline stimmt und hilft den Lesern. :)

Thomas

Posted: 08/26/2003

Minz Meyer:

Hallo Thomas,

anscheinend führen hier einmal wieder alle Wege nach Rom ;)
Aber die Sache mit der <h1> als Hauptüberschrift in der Navi erscheint mir plausibel (klatsch an die Stirn, hätt ich auch mal selber drauf kommen können).

In punkto Voicebrowser hatt ich da heute auch schon eine gegenteilige Aussage, was mich zu der Frage bringt:
Gibt es Voicebrowser, die das title Attribut unterstützen?

Beispiel:
<h2 title="Link to the week 2 assignment">Week 2</h2>

Posted: 08/26/2003

Thomas Scholz:

Ich glaube nicht, daß noch Voicebrowser unterwegs sind, die 'title' *nicht* unterstützen. Wie es mit Screenreadern aussieht, weiß ich nicht.
Diejenigen, die wie JAWS über die Accessibility-Schnittstelle auf den IE zugreifen, bekommen es. Aber eben nur im IE.

Ich würde ein Accessibility-Deature nicht vom 'title'-Attribut abhängig machen. Und wenn, dann gehört es in deinem Beispiel in den Link, nicht in die Überschrift, wenn ich das richtig sehe, oder?

Vorteil einer sauberen Outline ist eben, daß man manchen modernen Browsern (auch graphischen) von Überschrift zu Überschrift springen kann oder sich die Outline vorher ausgeben läßt.

Thomas

P.S.:Deine Umlaute fehlen ja immer noch. :)
P.P.S.: Sehe gerade einen komischen Bug in Opera Beta6: Text in der 'textarea', der in den 'padding'-Bereich hineinragt, wird beim Scrollen ganz komisch abgeschnitten ... hmm, muß ich doch mal ein Testcase basteln...

Posted: 08/27/2003

Minz Meyer:

[..] Und wenn, dann gehört es in deinem Beispiel in den Link, nicht in die Überschrift, wenn ich das richtig sehe, oder? [..]

Äh, jein.
Präziser formuliert hätte es heißen sollen:
<h2 title="Links to the week 2 assignment">Week 2</h2>
<a href="/" title="Link to the Review Questions of week 2">Review</a>
<a href="/" title="Link to the Project of week 2">Project</a>

nur um weitere erklärende Informationen zur Überschrift mit zu liefern, falls jemand sich entschliesst, sich nur die Überschriften der Webseite vorlesen zu lassen.

P.S. In meinem Opera 7.11 kann ich nichts von einem Textarea Bug erkennen.
P.P.S. Besser jetzt mit den Umlauten?

Posted: 08/27/2003

Thomas Scholz:

Ach so, jetzt kapier ich das mit den Überschriften. VIelleicht solltest du das leicht umformulieren, damit die Ansage nicht mit "Link" oder "Links" beginnt; das wird nämlich auch vor Hyperlinks gesagt.

Der 'textarea'-Bug scheint neu in dieser Beta zu sein. Zumindest ist er mir in früheren Betas nicht aufgefallen.

Und die Umlaute sind jetzt da. Sogar im Submit-Button. :)

Thomas

Posted: 08/27/2003

pid:

consider using a definition list, if you want to put a title and link/definition.

Posted: 09/05/2003

Niket:

Neither are wrong from pure (X)HTML standpoint. But since "semantics" is the buzzword around, lets analyze:
What are links? In a way they are "bookmarks" to your site. Its just like "table of contents" for a book (but much more than that). If thats the case, how can using <h#> be correct?

<div id="navigation">
<h2>Navigation</h2>
...

In this case, Navigation header is OK, because it denotes a section "Navigation". However, Week 1, Week 2 and so forth are not subsections but merely items in the navigation. So, from a semantic point of view, nested lists is a better choice.

Alternatively, often you have more than one tables at the begining of a book. For example, table of contents, list of figures, list of tables etc. So each of these in a navigation bar can form navigation "subsections".

In a nutshell, my point is (though its not so clear from foregoing discussion)
- Both nested lists and headers are equally "appropriate"
- One should select one over the other depending on situation. If the nested loops visually look nested, then that is the appropriate choice.
- In general, semantic propriety is directly related to visual display. So even from semantic point of view, content and style are STRONGLY RELATED. "Separation of style from content" is an inappropriate jargon if one is already pursuing standards-compliant design.

(Note: Merely validating XHTML and CSS does not imply standard compliance)

Posted: 09/06/2003

Minz Meyer:

..as we can see, there are different approaches to this problems, all more or less correct.
Maybe one day this will be solved using the navigation list as proposed in the XHTML 2.0 Working draft:

<nl>
<label>Week 1</label>
<li href="/">Project</li>
<li href="/">Review</li>
</nl>

Posted: 09/08/2003