Naar de inhoud
Gratis naslagwerk over HTML
HTML leren en naslaan
Naslag / Semantiek en indeling

Het element <article>

Het <article>-HTML-element stelt een op zichzelf staande compositie voor in een document, pagina, applicatie of site, die bedoeld is om onafhankelijk verspreidbaar of herbruikbaar te zijn (bijvoorbeeld via syndicatie). Voorbeelden zijn: een forumbericht, een tijdschrift- of krantenartikel, of een blogbericht, een productkaart, een door de gebruiker ingediende opmerking, een interactieve widget of gadget, of enig ander onafhankelijk stuk inhoud.

Auteur: Maarten Soetens

Code 
<article class="forecast">
  <h1>Weather forecast for Seattle</h1>
  <article class="day-forecast">
    <h2>03 March 2018</h2>
    <p>Rain.</p>
  </article>
  <article class="day-forecast">
    <h2>04 March 2018</h2>
    <p>Periods of rain.</p>
  </article>
  <article class="day-forecast">
    <h2>05 March 2018</h2>
    <p>Heavy rain.</p>
  </article>
</article>
Resultaat in de browser

Attributen

Dit element bevat alleen de globale attributen.

Gebruiksopmerkingen

  • Elk <article> moet worden geïdentificeerd, doorgaans door een heading (<h1> - <h6>-element) op te nemen als onderliggend element van het <article>-element.
  • Wanneer een <article>-element genest is, vertegenwoordigt het binnenste element een artikel dat gerelateerd is aan het buitenste element. Zo kunnen bijvoorbeeld de reacties op een blogbericht <article>-elementen zijn die genest zijn binnen het <article> dat het blogbericht vertegenwoordigt.
  • Auteursinformatie van een <article>-element kan worden verstrekt via het <address>-element, maar dit is niet van toepassing op geneste <article>-elementen.
  • De publicatiedatum en -tijd van een <article>-element kunnen worden beschreven met behulp van het datetime-attribuut van een <time>-element.

Voorbeelden

HTML
<article class="film_review">
  <h2>Jurassic Park</h2>
  <section class="main_review">
    <h3>Review</h3>
    <p>Dinos were great!</p>
  </section>
  <section class="user_reviews">
    <h3>User reviews</h3>
    <article class="user_review">
      <h4>Too scary!</h4>
      <p>Way too scary for me.</p>
      <footer>
        <p>
          Posted on
          <time datetime="2015-05-16 19:00">May 16</time>
          by Lisa.
        </p>
      </footer>
    </article>
    <article class="user_review">
      <h4>Love the dinos!</h4>
      <p>I agree, dinos are my favorite.</p>
      <footer>
        <p>
          Posted on
          <time datetime="2015-05-17 19:00">May 17</time>
          by Tom.
        </p>
      </footer>
    </article>
  </section>
  <footer>
    <p>
      Posted on
      <time datetime="2015-05-15 19:00">May 15</time>
      by Staff.
    </p>
  </footer>
</article>

Resultaat

Technische samenvatting

Content categories Flow content, sectioning content, palpable content
Permitted content Flow content.
Tag omission None, both the starting and ending tag are mandatory.
Permitted parents Any element that accepts flow content. Note that an <article> element must not be a descendant of an <address> element.
Implicit ARIA role article
Permitted ARIA roles application, document, feed, main, none, presentation, region
DOM interface HTMLElement

Zie ook

Verwante elementen

<address> <aside> <details> <dialog> <div> <footer> <header> <hgroup>