HTML <artikel> -tag
Voorbeeld
Drie artikelen met onafhankelijke, op zichzelf staande inhoud:
<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>
Meer "Probeer het zelf" voorbeelden hieronder.
Definitie en gebruik
De <article>tag specificeert onafhankelijke, op zichzelf staande inhoud.
Een artikel moet op zichzelf logisch zijn en het moet mogelijk zijn om het onafhankelijk van de rest van de site te verspreiden.
Mogelijke bronnen voor het <article>element:
- Forumbericht
- Blogpost
- Nieuws verhaal
Opmerking: het <article>element wordt niet als iets speciaals weergegeven in een browser. U kunt echter CSS gebruiken om het <article>
element op te maken (zie voorbeeld hieronder).
Browserondersteuning
De getallen in de tabel geven de eerste browserversie aan die het element volledig ondersteunt.
| Element | |||||
|---|---|---|---|---|---|
| <article> | 6.0 | 9.0 | 4.0 | 5.0 | 11.1 |
Algemene kenmerken
De <article>tag ondersteunt ook de Global Attributes in HTML .
Gebeurteniskenmerken
De <article>tag ondersteunt ook de Event Attributes in HTML .
Meer voorbeelden
Voorbeeld
Gebruik CSS om het element <article> op te maken:
<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>
Gerelateerde pagina's
HTML DOM-referentie: Artikelobject
Standaard CSS-instellingen
De meeste browsers geven het <article>element weer met de volgende standaardwaarden:
article {
display: block;
}