HTML-<article>-Tag
Beispiel
Drei Artikel mit eigenständigem, eigenständigem Inhalt:
<article>
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser
developed by Google, released in 2008. Chrome is the world's most popular web
browser today!</p>
</article>
<article>
<h2>Mozilla
Firefox</h2>
<p>Mozilla Firefox is an open-source web browser developed by
Mozilla. Firefox has been the second most popular web browser since January,
2018.</p>
</article>
<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015.
Microsoft Edge replaced Internet Explorer.</p>
</article>
Try it Yourself »
Weitere "Try it Yourself" („Probieren Sie es selbst“)-Beispiele weiter unten.
Definition und Verwendung
Das Tag <article> gibt unabhängige, eigenständige Inhalte an.
Ein Artikel sollte für sich genommen sinnvoll sein und es sollte möglich sein, ihn unabhängig vom Rest der Website zu verbreiten.
Mögliche Quellen für das Element <article>:
- Forumsbeitrag
- Blogbeitrag
- Nachrichtenbericht
Hinweis: Das Element <article> wird in einem Browser nicht als etwas Besonderes gerendert. Sie können jedoch CSS verwenden, um das Element <article> zu formatieren (siehe Beispiel unten).
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die das Element vollständig unterstützt.
| Element | |||||
|---|---|---|---|---|---|
| <article> | 6.0 | 9.0 | 4.0 | 5.0 | 11.1 |
Globale Attribute
Das Tag <article> unterstützt auch die Globale Attribute in HTML.
Ereignisattribute
Das Tag <article> unterstützt auch die Ereignisattribute in HTML.
Weitere Beispiele
Beispiel
Verwenden Sie CSS, um das <article>-Element zu formatieren:
<html>
<head>
<style>
.all-browsers {
margin: 0;
padding: 5px;
background-color: lightgray;
}
.all-browsers > h1, .browser {
margin: 10px;
padding: 5px;
}
.browser {
background: white;
}
.browser > h2, p {
margin: 4px;
font-size: 90%;
}
</style>
</head>
<body>
<article class="all-browsers">
<h1>Most Popular Browsers</h1>
<article class="browser">
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
</article>
<article class="browser">
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p>
</article>
<article class="browser">
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
</article>
</article>
</body>
</html>
Try it Yourself »
Verwandte Seiten
HTML-DOM-Referenz: Objekt Article
Standard-CSS-Einstellungen
Die meisten Browser zeigen das Element <article> mit den folgenden Standardwerten an:
article {
display: block;
}
