HTML5 - semantisch korrekte Verwendung?

[Gunther]

Hallo Mathias,

recht herzlichen Dank für deine Antwort und die damit verbundene Mühe. :-)
Ich hatte absichtlich meine Ideen/ Vorstellungen erstmal nicht gepostet, um ein möglichst "unverfälschtes" Resultat zu erhalten. Daher jetzt meine Fragen, bzw. Ideen dazu:

Der Kopfbereich beinhaltet u.a. das Logo, einen Slogan und Links zu den Seiten 'Impressum' und 'Kontakt'.

<header>

<h1>Unsere tolle Site</h1>
<p>Unser toller Slogan</p>
<ul>
<li><a>Kontakt</a></li>
<li><a>Impressum</a></li>
</ul>
</head>

OK, soweit.  
Man hätte evt. auch Überschrift und Slogan als  
~~~html
  
<hgroup>  
  <h1>Unsere tolle Site</h1>  
  <h2>Unser toller Slogan</h2>  
</hgroup>  

auszeichnen können?

Darunter folgt die Hauptnavigation der Seite (main navigation).

<nav>

<h1>Hauptnavigation</h1>
<ul>…</ul>
</nav>

>   
> > Der 'Content' Bereich soll wie gesagt \*einen\* Artikel mit TOC beinhalten, plus einige Links zu verwandten Artikeln darunter.  
>   
> ~~~html

<article>  

>   
> <header>  
> <h1>Der Artikel</h1>  
> <ul><!-- Inhaltsverzeichnis --></ul>  
> </header>  
>   
> <p>Artikeltext (evtl. mit weiteren sections)</p>  
>   
> <section>  
> <h2>Links</h2>  
> <ul>…</ul>  
> </section>

Hmmm ..., hier hätte ich etwas anderes erwartet.
Denn nach http://dev.w3.org/html5/spec/Overview.html#the-nav-element ist imho das TOC doch genau der zweite Anwendungsfall für das <nav> Element neben der Hauptnavigation, während eben bspw. die Links im Head und im Footer eben nicht in <nav> eingeschlossen werden (müssen).

Danach folgen noch einige Kommentare zum Artikel und im Anschluss das Formular um einen Kommentar zu verfassen.

<section>

<h2>Kommentare</h2>
<ol>…</ol>
</section>

<section>
<h2>Kommentar verfassen</h2>
<form>…</form>
</section>

</article>

Auch hier bin ich erstaunt, dass du wieder nur das (semantisch (fast) nichts sagende) <section> Element verwendet hast.  
Ich hätte eher ein <aside> für die Kommentare erwartet.  
Und ich habe auch schon des öfteren gesehen, dass Autoren jeden Kommentar als eigenständigen <article>, teils mit <header> und <footer>, ausgezeichnet haben.  
  
Gerade bei Kommentaren zu einem Artikel finde ich es besonders schwierig, eine semantisch korrekte Auszeichnung zu finden. Denn ohne den zugehörigen Artikel machen alle Kommentare wenig Sinn. Insofern gehören sie eigentlich fest zum jeweiligen Artikel. Während dieser aber wiederum auch sehr gut ohne die Kommentare auskommt. Bei den Kommentaren wiederum kommt es stark auf den Inhalt an. Bezieht sich dieser ausschließlich auf den Artikel, ist der Kommentar quasi "eigenständig". Nimmt er aber (auch) Bezug auf einen oder mehrere andere(n) Kommentar(e), bilden diese eigentlich eine zusammengehörende Gruppe. Da man letzteres nie ausschließen kann, müssen für mich also alle Kommentare eine Gruppe bilden, die fest mit dem Artikel verbunden/ zusammengehörig ist.  
  

> > Die 'Sidebar' soll u.a. (die/das)? Blogroll beinhalten, sowie einen Block mit einer Auflistung der Blog-Kategorien und einen Archiv-Block.  
>   
> ~~~html

<aside>  

> <h1>Seitenleiste mit Blogroll und Archiv</h1>  
>   
> <section>  
> <h2>Blogroll</h2>  
> <ul>…</ul>  
> </section>  
>   
> <section>  
> <h2>Kategorien</h2>  
> <ul>…</ul>  
> </section>  
>   
> <section>  
> <h2>Archiv</h2>  
> <ul>…</ul>  
> </section>  
>   
> </aside>

Wiederum hätte ich etwas leicht anderes erwartet. ;-)
Irgendwo (kann es gerade nicht wiederfinden) habe ich mal gelesen (sinngemäß):
"aside != sidebar".
Von daher erschiene es mir richtiger, die Sidebar erst per <div id="sidebar"> zu setzen und innerhalb dessen für jeden Block ein <aside> anstelle von <section> zu verwenden.

Der 'Footer' möge ebenfalls nochmals 3 Blöcke mit diversen Links (intern + extern) umfassen.

<footer>

<section>
<h1>Sinnvolle Überschrift</h1>
<ul>…</ul>
</section>

…

</footer>

>   
> Viele der section-Elemente muss man nicht setzen, da HTML5 implizite Sections bei der Verwendung von hX-Elementen erzeugt. Ich halte es dennoch für sauberer, und beim Styling kann man diese gruppierenden Elemente ebenfalls gebrauchen.  

Prinzipiell stimme ich dir zu, aber mir scheint, dass du das <section> Element zumindest häufig falsch, bzw. missbräuchlich verwendest - vgl. <http://html5doctor.com/the-section-element/>  
Also wäre imho im vorliegenden Fall bspw. ein <aside> für den Block "mit diversen Links (intern + extern)" semantisch richtiger, als ein <section>  
  
  

> Gewisse Überschriften müssen zudem nicht immer sichtbar sein, aber für Tastaturnavigation  

Das verstehe ich gerade nicht so ganz? Nicht sichtbar, aber helfen bei der Tastaturnavigation!?  
Da finde ich die neue Option, dass <a>'s jetzt auch ganze Blöcke umschließen können schon hilfreicher.  
  

> und Sprunglinks tragen sie zur Zugänglichkeit der Seite bei.  
  
Also mich bestärkt alleine dieses kleine und sehr gängige Beispiel in meinem Eindruck, dass es wesentlich schwieriger ist mit HTML5 semantisch korrektes Markup zu schreiben, als mit HTML 4.  
Denn ich bin mir ziemlich sicher, dass unsere beiden Entwürfe mit HTML 4 wesentlich ähnlicher gewesen wären. Und wenn noch 5 Leute einen HTML 5 Entwurf erstellen, werden vermutlich noch mind. 2 andere Varianten dabei sein ...!  
  
Und dann habe ich noch eine ganz andere Frage: Ich habe die letzten Jahre eigentlich immer XHTML 1.0 strict verwendet. Nun erlaubt HTML5 ja einige Dinge (<a> für Blöcke, <noscript> im <head> u.a.), die bisher bei HTML 4 nicht erlaubt waren. Allerdings sind diese dann ja nicht XHTML konform. Andererseits stellt sich ja die Frage, ob (m)ein HTML5 Dokument denn auch unbedingt XHTML konform sein muss. Für die meisten User wahrscheinlich eher nicht (unbedingt). Oder sehe ich da etwas nicht/falsch?  
  
Gruß Gunther