Anzeige
Tutorialbeschreibung

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

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

HTML5 bringt zahlreiche neue Strukturierungselemente mit. Welche das grundsätzlich sind, wurde im vorherigen Video-Training bereits gezeigt. Nun geht es darum, diese Elemente praktisch einzusetzen. Denn diese Elemente sind es, die für eine semantische Strukturierung der Dokumente sorgen. Ihr werdet in diesem Video-Training in erster Linie die beiden Elemente article und section kennenlernen. Diese sorgen für die grundlegende Struktur von HTML-Dokumenten. Am Ende dieses Videos wird dann außerdem noch einmal ein Blick auf die Unterschiede geworfen, die zwischen div, article und section bestehen.

... übrigens findest du die komplette Serie hier: HTML & CSS für Einsteiger - Schnapp sie dir in unserem Shop oder in der Kreativ-Flatrate!


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

Über das article-Element lassen sich Texte (Forenbeiträge, Zeitungsartikel usw.) als Artikel kennzeichnen. Das folgende Beispiel zeigt die Definition eines typischen Artikels.
<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>

 
Dank des article-Elements könnt ihr eure Inhalte also semantisch strukturieren.

Bilder



 
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>

In diesem Beispiel wird innerhalb des article-Elements die ganz typische Aufteilung in Kopf-, Haupt- und Fußbereich vorgenommen. Und eine solche Aufteilung ist sehr oft in Blogs anzutreffen.

Bilder



 

Sektionen anlegen

Weiter geht es mit dem section-Element. Das Element section unterteilt die Seite in verschiedene Abschnitte. Dabei kann es sich beispielsweise um Sektionen, Kapitel, Reiter o. Ä. handeln. Durch section lassen sich zum Beispiel Bereiche wie Einleitung und aktuelle Meldungen logisch voneinander trennen.

section dient der Unterteilung der Inhalte nach tatsächlich inhaltlichen Gesichtspunkten. Auf den Unterschied zwischen section und div komme ich dann übrigens noch einmal am Ende dieses Tutorials zu sprechen.

Das folgende Beispiel zeigt eine typische Blog-Struktur. Allerdings enthält diese Struktur noch etwas, was in vielen Blogs tatsächlich benötigt wird, nämlich einen Kommentarbereich. Dieser Kommentarbereich ist innerhalb eines section-Elements definiert. Die einzelnen Kommentare innerhalb des section-Bereichs wiederum werden in jeweils ein article-Element eingefasst.
<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>

 
Hier noch einmal der Hinweis, dass ich auf die hier ebenfalls verwendeten Elemente wie header, footer usw. natürlich noch einmal ausführlich zu sprechen komme. An dieser Stelle nur so viel: Durch diese Elemente lassen sich die Inhalte in Kopf- und Fußbereich unterteilen, sie ermöglichen also eine weitere logische Strukturierung von Dokumenten.

Bilder



 
Ein anderes Beispiel soll die Kombination von article- und section-Elementen noch weiter verdeutlichen. Tatsächlich kann man das section-Element nämlich dafür verwenden, einen Artikel in logische Inhaltsbereiche zu unterteilen, die jeweils eigene Überschriften besitzen.
<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>

Es ist übrigens ebenfalls möglich, innerhalb eines section-Elements article-Elemente zu definieren. Ein typisches Beispiel dafür kann ein Kommentarbereich sein, so wie das bereits gezeigt wurde. Denkbar ist aber auch die Unterteilung der Sektion in die Themengebiete, die im Blog behandelt werden.

Bilder



 
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>

Zudem können in einem section-Element andere section-Elemente enthalten sein. Verschachtelungen sind also erlaubt. Auch hierzu ein Beispiel:
<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
2. (c) 2014 PSD-Tutorials.de


Solche Strukturierungen sind also ebenfalls möglich.


 

Der Unterschied zwischen div, article und section

Es ist zugegebenermaßen nicht ganz einfach, die Abgrenzung zwischen div, article und section zu verstehen. Tatsächlich wurde das article-Element in erster Linie für die Strukturierung von Blog-Posts definiert. Das section-Element ist eigentlich eine Ebene unterhalb von article angesiedelt. Innerhalb des section-Elements sollte zudem immer eine Überschrift definiert werden. Selbst wenn tatsächlich keine Überschrift definiert wird, sollte es zumindest theoretisch möglich sein, innerhalb des betreffenden Elements eine Überschrift anzugeben.

Selbstverständlich sind div-Elemente auch in HTML5 nicht verpönt, sondern sollen nach wie vor verwendet werden. Interessant sind diese beispielsweise immer dann, wenn es darum geht, Elemente zusammenzufassen.

Abschließend aber auch noch einmal der Hinweis hinsichtlich der optischen Auswirkungen der bislang vorgestellten Elemente. Tatsächlich benötigt ihr für eine entsprechende Formatierung CSS. Der normale Einsatz der gezeigten Elemente hat nämlich keinen Effekt im Browser. Ihr strukturiert hier ausschließlich Inhalte semantisch. All das, was mit der Optik zu tun hat, regelt ihr über Stylesheets.

Weitere Teile


Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 16.10.2016 - 15:19

Herzlichen Dank für den weiteren Teil.

Portrait von Kiasa
  • 12.03.2015 - 09:41

Auch das Tut ist wieder super erklärt! Danke für die ganze Reihe :)

Portrait von Zarah1
  • 07.01.2015 - 19:42

Vielen Dank für die Erklärung von article und section. Freue mich auf den nächsten Teil.

Portrait von teste123
  • 05.01.2015 - 05:53

Herzlichen Dank für das Tutorial.

Portrait von samtron
  • 05.01.2015 - 05:52

Herzlichen Dank für das Tutorial.
MfG

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 05.01.2015 - 00:20

Vielen Dank für das Tutorial!

Portrait von Caesarion2004
  • 04.01.2015 - 21:00

Vielen Dank für den weiteren sehr informativen Teil der Reihe.

Portrait von Dineria
  • 04.01.2015 - 19:15

"Vielen Dank für das Tutorial!", heißt es in den Kommentaren! ;-) Gut, dann bin ich mit Div & Co. etwas schlauer - warte dann, bis sie mit CSS wiederkehren! :-)

Portrait von pallasathena
Portrait von MARIA52
  • 04.01.2015 - 17:44

Vielen Dank für das Tutorial.

Portrait von Kundentest
  • 04.01.2015 - 16:52

Herzlichen Dank für das Tutorial.

Portrait von BOPsWelt
  • 04.01.2015 - 15:51

Vielen Dank für den zweiten Semantik Teil. :)

Portrait von Kundentest
  • 07.12.2014 - 22:05

Herzlichen Dank für das Video.

Portrait von MicroSmurf
  • 07.12.2014 - 20:29

Wieder sehr interessant. Vielen Dank.

Portrait von pallasathena
Portrait von Luther_Sloan
  • 06.12.2014 - 11:20

Danke für das lehrreiche Video und den weiteren Reihenteil.

Portrait von Domingo
  • 06.12.2014 - 11:05

Wieder ein informativer Teil. Vielen Dank.

Portrait von renate_C
  • 06.12.2014 - 10:59

Ich bedanke mich für das gute Video und die Arbeitsdatei.

Portrait von Caesarion2004
  • 06.12.2014 - 10:57

Vielen Dank für das weitere sehr interessante und informative Video der Reihe.

Portrait von MARIA52
  • 06.12.2014 - 08:59

Vielen Dank für den informativen nächsten Teil.

x
×
×