HTML Element – article
Das article-Element gehört zu den zentralen Bausteinen einer klaren,
semantischen HTML-Struktur. Es hilft dabei, Inhalte nachvollziehbar zu gliedern, ihre Bedeutung für Browser, Suchmaschinen und assistive Technologien verständlich zu machen und Webseiten langfristig wartbar zu halten.
Beispiel
<article>
<h1>Beispiel für den Einsatz von <code>article</code></h1>
<article>
<h2>World Wide Web Consortium (W3C)</h2>
<p>
Das World Wide Web Consortium (W3C) entwickelt offene Standards für das Web und definiert unter anderem die offizielle Spezifikation von HTML. Diese Standards stellen sicher, dass Webinhalte plattformübergreifend einheitlich interpretiert werden.</p>
</article>
<article>
<h2>Web Accessibility Initiative im W3C</h2>
<p>Die ARIA-Spezifikation erweitert HTML um zusätzliche Rollen und Attribute, um Inhalte für assistive Technologien eindeutig beschreibbar zu machen. Sie kommt insbesondere dann zum Einsatz, wenn semantische HTML-Elemente allein nicht ausreichen.</p>
</article>
<article>
<h2>CSS Working Group im W3C</h2>
<p>Cascading Style Sheets (CSS) sind für die visuelle Darstellung von Webinhalten zuständig und steuern Layout, Farben und Typografie. Dadurch bleibt die strukturelle und semantische Bedeutung der Inhalte vollständig vom Design getrennt.</p>
</article>
</article>
Definition und Verwendung
article definiert einen eigenständigen Inhaltsbereich. Dieser Inhaltsbereich sollte für sich verständlich sein und unabhängig vom Rest der Website verbreitet werden können (z. B. in Blogposts, Forenbeiträgen, Newsartikeln).
article ist kein beliebiger Container, sondern sollte als semantisches Strukturelement verstanden werden.
Die visuelle Darstellung eines article-Elements wird nicht durch HTML festgelegt, sondern erfolgt ausschließlich über CSS. Dadurch bleibt die semantische Bedeutung des Inhalts von seiner Darstellung getrennt.
Attribute
Attribute erweitern Elemente um zusätzliche Eigenschaften oder Informationen und beeinflussen deren Bedeutung, Verhalten oder Darstellung. Sie bestehen in der Regel aus einem Attributnamen und einem zugehörigen Wert, wobei die zulässigen Attribute vom jeweiligen Element abhängen und teils allgemein, teils elementbezogen definiert sind.
Eine besondere Gruppe bilden die aria-*-Attribute, die zur Unterstützung der Barrierefreiheit zusätzliche Informationen für assistive Technologien bereitstellen.
| Attribut | Beschreibung |
|---|---|
class |
Weist einem Element eine oder mehrere CSS-Klassen zu. |
Beispiel mit CSS
Im Codebeispiel werden in den öffnenden article-Tags über das Attribut class CSS-Klassen definiert, um die Elemente über das style-Element gezielt ansprechen zu können.
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: sans-serif;
}
.haupt-artikel {
width: 75%;
margin: 32px auto;
border: solid 1px #000000;
border-radius: 12px;
padding: 16px;
background-color: rgba(25, 135, 84, 0.15);
}
.artikel-w3c {
padding: 8px;
border-radius: 12px;
background-color: #ffffff;
}
.artikel-wai-w3c {
padding: 8px;
margin-top: 16px;
border-radius: 12px;
background-color: #ffffff;
}
.artikel-css-w3c {
padding: 8px;
margin-top: 16px;
border-radius: 12px;
background-color: #ffffff;
}
</style>
</head>
<body>
<article class="haupt-artikel">
<h1>Beispiel für den Einsatz von <code>article</code></h1>
<article class="artikel-w3c">
<h2>World Wide Web Consortium (W3C)</h2>
<p>
Das World Wide Web Consortium (W3C) entwickelt offene Standards für das Web und definiert unter anderem die offizielle Spezifikation von HTML. Diese Standards stellen sicher, dass Webinhalte plattformübergreifend einheitlich interpretiert werden.</p>
</article>
<article class="artikel-wai-w3c">
<h2>Web Accessibility Initiative (WAI) im W3C</h2>
<p>Die ARIA-Spezifikation erweitert HTML um zusätzliche Rollen und Attribute, um Inhalte für assistive Technologien eindeutig beschreibbar zu machen. Sie kommt insbesondere dann zum Einsatz, wenn semantische HTML-Elemente allein nicht ausreichen.</p>
</article>
<article class="artikel-css-w3c">
<h2>CSS Working Group im W3C</h2>
<p>Cascading Style Sheets (CSS) sind für die visuelle Darstellung von Webinhalten zuständig und steuern Layout, Farben und Typografie. Dadurch bleibt die strukturelle und semantische Bedeutung der Inhalte vollständig vom Design getrennt.</p>
</article>
</article>
</body>
</html>
Standardbrowser CSS
Webbrowser wenden auf viele Elemente vordefinierte CSS-Stile an, die eine grundlegende Struktur und Lesbarkeit sicherstellen. Umfang und Ausgestaltung dieser Standardstile können je nach Browser variieren, etwa in Bezug auf Abstände, Schriftgrößen oder die Darstellung einzelner Elemente.
article {
display: block;
}
Browserunterstützung
Die Unterstützung von Elementen und Attributen ist in den gängigen modernen Browsern weitgehend einheitlich gewährleistet. Unterschiede können dennoch in Details, im Einführungszeitpunkt neuer Funktionen oder bei experimentellen Features auftreten.
| Element | Firefox | Internet Explorer / Edge | Safari | Chrome | Opera |
|---|---|---|---|---|---|
<article> |
|||||
| seit Version: | 4.0 | 9.0 | 6.0 | 5.0 | 11.1 |