HTML & CSS für Einsteiger (Teil 20): Semantik fürs Web (3)

Kopf- und Fußbereich

<body>
  <header>...</header>
  <nav>...</nav>
  <article>
    <section>
      ...
    </section>
  </article>
  <aside>...</aside>
  <footer>...</footer>
</body>

<section>
   <header>
      <h1> Web-Apps erstellen (Teil 09): jQuery mobile (1)</h1>
      <p> jQuery ist zweifellos eines der bekanntesten JavaScript-Frameworks.</p>
   </header>
   <p>
  Auf „klassischen“ Webseiten wird jQuery daher bereits tausendfach eingesetzt. Speziell für den Einsatz in Web-Apps konzipiert wurde das Schwester-Framework jQuery mobile (jQM). Dieses Framework hilft euch dabei, eure Web-App im Handumdrehen wie eine echte App aussehen zu lassen. Grund genug, einen ausführlichen Blick auf jQM zu werfen.
   </p>
   <footer>
      <p>Copyright by PSD-Tutorials.de</p>
   </footer>
</section>

Überschriften gruppieren

<h1>
    Buch
 </h1>
 <h2>
    Kapitel  1
 </h2>
 <h2>
    Kapitel 2
 </h2>
 <h3>
    Unterkapitel 2.1
 </h3>
 <h3>
    Unterkapitel 2.2
 </h3>
 <h2>
    Kapitel 3
 </h2>

Diese Definition bedeutet folgende Struktur:

Buch
Kapitel 1
Kapitel 2
Unterkapitel 2.1
Unterkapitel 2.2
Kapitel 3

Im Browser werden die Überschriften allerdings nicht eingerückt.

HTML & CSS für Einsteiger (Teil 20): Semantik fürs Web (3)

<hgroup>
 <h1>Cloud OS</h1>
 <h2>Das Web als Betriebssystem</h2>
</hgroup>
<p>Hier beginnt der Inhalt des Artikels …</p>

Das Outline-Konzept

<h1>
    Kapitel 1
 </h1>
 <section>
    <h1>
       Kapitel 2
    </h1>
    <section>
       <h1>
          Kapitel  3
       </h1>
    </section>
 </section>

Durch das Outline-Konzept von HTML5 ergibt sich daraus die folgende Struktur:

1. Kapitel 1

Kapitel 2
1. Kapitel 3

Ein weiteres Beispiel soll den Effekt verdeutlichen. Auch hier zunächst wieder das Ausgangsdokument.

<section>
  <h1>Installation und Konfiguration</h1>
  <section>     
    <h2>Installation</h2>     
      <p>Alles rund ums Thema Installation
  </section>     <section>     
    <h2>Konfiguration</h2>
      <p>Hier findet ihr alles zum Thema Konfiguration
    </section>
    <aside>
      <p>Interessante Bücher zum Thema...
    </aside>
  </section>
  <footer>
    <p>(c) by PSD-Tutorials.de
  </footer>
</section>

Die daraus resultierende Struktur sieht folgendermaßen aus:

1. Section (Installation und Konfiguration)

1.1 Section (Installation)

1.2 Section (Konfiguration)

1.3 Section (aside)

Section (footer)

Und noch ein Beispiel:

<body>
   <h1>Installation und Konfiguration</h1>
   <h2>Installation</h2>
   <p>Alles zum Theme Installation
      ...noch mehr Inhalt...
   <section>
     <h3>Voraussetzungen</h3>  
     <p>Alles zum Thema Installationsvoraussetzungen
       ...noch mehr Inhalt...
     <h3>Vorbereitungen</h3>
       <p>Alles zum Thema Vorbereitungen
          ...noch mehr Inhalt...
     <h2>Konfiguration</h2>
       <p>Alles zum Thema Konfiguration
           ...noch mehr Inhalt...
   </section>
</body>

Beachtet bitte, dass das Outline-Konzept momentan von den Browsern noch nicht unterstützt wird.

HTML & CSS für Einsteiger (Teil 20): Semantik fürs Web (3)

Es wird allerdings nur eine Frage der Zeit sein, bis die Browserhersteller hier handeln. Zu groß wären die Vorteile des Outline-Konzepts. Denkt beispielsweise an automatisch generierte Navigationsleisten. Aber auch so gilt: Selbst wenn die Strukturierung in der genannten Form von den Browsern momentan ignoriert werden, solltet ihr bereits jetzt versuchen, eure Dokumente logisch zu strukturieren. So bekommt ihr auch gleich eine gewisse Zukunftssicherheit für eure Webseiten.