Ein Artikel ist ein eigenständiger logischer Teil innerhalb einer Webseite. Seit HTML5 gibt es ein Element, um solche Inhalte auszuzeichnen. Es ist beispielsweise anwendbar auf Blog- oder Magazin-Artikel, aber auch auf Forumspostings, auf Statusmeldungen in einer Microblogging-Anwendung, oder auf Benutzerkommentare zu Artikeln.

Beispiel

<article>
  <section>
    <header>
      <h1>Google Buzz - ein Social-Service von Google</h1>
    </header>
    <p>Google Buzz (to buzz = summen, brummen) ist ein Service von Google. 
    Es handelt sich um um einen Social-Networking-Dienst und um einen 
    Microblogging-Dienst. Viel weiterer Inhalt...</p>
    <p>Viel weiterer Inhalt ... </p>
  </section>
  <section>
    <header>
      <h1>Kommentare</h1>
    </header>
    <article>
      <header>
        <h2>Kritiklos?</h2>
      </header>
      <p>Auch viel Inhalt ...</p>
      <footer>
        <p>Kommentar gepostet von Gero Grübel, 15.02.2010, 21:34 Uhr</p>
      </footer>
    </article>
  </section>
</article>

Erläuterung

Artikel werden durch <article>…</article> markiert. Das obige Beispiel ist etwas komplexer, um den Gesamtzusammenhang zu verdeutlichen, in dem dieses Element typischerweise zum Einsatz kommt. Das Beispiel zeigt einen Blog-Artikel mit einem Kommentarbereich, der aktuell einen Kommentar enthält.

Dabei wird der gesamte Artikel einschließlich des Bereichs für Kommentare in ein übergeordnetes article-Element eingeschlossen. Innerhalb davon sind insgesamt zwei section-Abschnitte notiert. In den ersten section-Abschnitt wird der eigentliche Blog-Artikel eingeschlossen, während der zweite section-Abschnitt die Kommentare zum eigentlichen Artikel einschließt.

Innerhalb des zweiten section-Abschnitts wird jeder Kommentar wiederum mit einem article-Element ausgezeichnet. Dabei ist ein Kommentar zum Blog-Artikel also ein Artikel innerhalb des Gesamtartikels. Für solche Zwecke ist es durchaus erlaubt, article-Elemente zu verschachteln.

Sowohl beim Blog-Artikel als auch bei den Kommentaren wird im obigen Beispielen mit Headern und Footern sowie mit Überschriften gearbeitet. Das Beispiel zeigt damit noch einmal im Zusammenhang, wie in HTML5 das Arbeiten mit all diesen diesen Elementen gedacht ist.

Weitere Hinweise

Ebenso wie die übrigen Elemente für Webseiten-Bereiche hat ein article-Element ausschließlich semantische Aufgaben. Optisch tut es bei Browsern, die das Element erkennen, nichts weiter, als eine neue Zeile im Textfluss zu erzeugen. Um article-Bereiche in irgendeiner Form optisch zu gestalten, z.B. mit seitlichen Rahmenlinen bei Kommentaren, sind CSS bzw. CSS-Eigenschaften erforderlich.

Bei konsequenter und korrekter Anwendung etwa im HTML-Code von Blog-Anwendungen ist das article-Element eine wichtige Hilfe etwa für Suchmaschinen. Das article-Element entspricht auch in etwa dem, was in einem RSS- oder Atom-Feed in einem entry-Element steht. So kann ein article-Element beispielsweise dazu beitragen, aus dem HTML-Code von Webseiten Feeds zu generieren.

Referenzinformationen

• Elementreferenz <article>

Zum Thema Browser-Unterstützung dieses Elements siehe auch:
Arbeiten mit Browsern unbekannten Elementen

Korrekturen, Hinweise und Ergänzungen
Bitte scheut euch nicht und meldet, was auf dieser Seite sachlich falsch oder irreführend ist, was ergänzt werden sollte, was fehlt usw. Dazu bitte oben aus dem Menü Seite den Eintrag Diskutieren wählen. Es ist keine Anmeldung erforderlich, um Anmerkungen zu posten. Unpassende Postings, Spam usw. werden allerdings kommentarlos entfernt.