HTML & CSS für Einsteiger (Teil 19): Semantik fürs Web (2)

Momentan werden HTML-Dokumente meistens mittels div-Elementen strukturiert. Die Formatierung und Positionierung dieser Container erfolgt dann üblicherweise per CSS. Für Software wie Screenreader ist dieses Vorgehen natürlich nutzlos, da sie nicht erkennen können, welche Bedeutung bestimmte Inhalte haben. Das soll sich durch die neuen Strukturierungselemente ändern.

Zwei der wichtigsten neuen Elemente sind dabei section und article, die in diesem Tutorial im Fokus stehen.

Artikel kennzeichnen

<article>
   <h1>Web-Apps erstellen (Teil 09): jQuery mobile (1)</h1>
   <p>jQuery ist zweifellos eines der bekanntesten JavaScript-Frameworks. Auf „klassischen“ Webseiten wird jQuery daher bereits tausendfach eingesetzt ...</p>
   ...
</article>

Wie so etwas aussehen kann, lässt sich sehr schön anhand eines Blogs zeigen.

<article>
  <header>
    <h1>Web-Apps erstellen (Teil 09): jQuery mobile (1)</h1>
    <p>Veröffentlicht am: <time pubdate="pubdate">24.05.2014</time></p>
  </header>
  <p>jQuery ist zweifellos eines der bekanntesten JavaScript-Frameworks. Auf „klassischen“ Webseiten wird jQuery daher bereits tausendfach eingesetzt ...</p>
  ...
  <footer>
    <p><small>Copyright by PSD-Tutorials.de</small></p>
  </footer>
</article>

Sektionen anlegen

<article>
  <header>
    <h1>Web-Apps erstellen (Teil 09): jQuery mobile (1)</h1>
    <p>Veröffentlicht am: <time pubdate="pubdate">24.05.2014</time></p>
  </header>
    <p>jQuery ist zweifellos eines der bekanntesten JavaScript-Frameworks. Auf „klassischen“ Webseiten wird jQuery daher bereits tausendfach eingesetzt...</p>
  ...

  <section>
    <h2>Kommentare</h2>
    <article>
      <header>
      <h3>Kommentiert von: Newsfriend</h3>
      <p><time pubdate datetime="2024-10-05T20:10-07:00">Vor einer Stunde</time></p>
    </header>
    <p>Danke für das Tutorial!</p>
    </article>
    <article>
      <header>
      <h3>Kommentiert von: Becker</h3>
      <p><time pubdate datetime="2024-10-05T20:10-07:00">Vor zwei Stunden</time></p>
    </header>
    <p>Spitze! Das hilft mir weiter.</p>
    </article>
  </section>
</article>

<article> 
  <h1>App-Entwicklung</h1> 
  <p>Hier erfahrt ihr, wie sich Web-Apps erstellen lassen.</p>
  <section> 
     <h2>Web-Apps erstellen (Teil 09): jQuery mobile (1)</h2> 
     <p>jQuery ist zweifellos eines der bekanntesten JavaScript-Frameworks.</p> 
   </section> 
  <section> 
     <h2>Web-Apps erstellen (Teil 08): Der Schnelleinstieg in jQuery</h2> 
     <p>JavaScript ist für Webseiten eine feine Sache, schließlich lassen sich darüber allerlei interessante Dinge anstellen.</p> 
   </section> 
 </article>

Auch hierzu wieder ein entsprechendes Beispiel:

<section> 
  <h1>App-Entwicklung</h1>
  <article> 
     <h2>Web-Apps erstellen (Teil 09): jQuery mobile (1)</h2> 
     <p>jQuery ist zweifellos eines der bekanntesten JavaScript-Frameworks.</p> 
   </article> 
  <article> 
     <h2>Web-Apps erstellen (Teil 08): Der Schnelleinstieg in jQuery</h2> 
     <p>JavaScript ist für Webseiten eine feine Sache, schließlich lassen sich darüber allerlei interessante Dinge anstellen.</p> 
   </article>    
 </section>

<section>
    <h1>PSD-Tutorials.de</h1>
    <section>     
      <h2>Willkommen</h2>     
      <p>Wir freuen uns...</p>
    </section>   
    <section>     
      <h2>Tutorials</h2>
      <P>Hier gibt es unsere neuesten Tutorials...</p> 
    </section>
    <aside>
      <p>Kontakt</p>
    </aside>
  </section>
  <footer>
    <p>(c) 2014 PSD-Tutorials.de</p>
  </footer>

Diese section-Verschachtelung ergibt die folgende Struktur:

1. PSD-Tutorials.de

1.1 Willkommen

1.2 Tutorials

1.3 Kontakt