molily: HTML5 - semantisch korrekte Verwendung?

Beitrag lesen

Hallo,

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>

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.

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

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>

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

<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>

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.

Gewisse Überschriften müssen zudem nicht immer sichtbar sein, aber für Tastaturnavigation und Sprunglinks tragen sie zur Zugänglichkeit der Seite bei.

Mathias