Tag article

A tag article destina-se a blocos independentes e autossuficientes do site, que podem ser utilizados como uma página independente.

Por exemplo, se você tem um site com artigos, o artigo pode ser colocado nesta tag. Se você tem comentários de usuários, cada um desses comentários pode ser colocado nesta tag.

Além disso, se você tem a tag main para o conteúdo do site, então o article pode ser colocado dentro do main, mas não o contrário.

Exemplo

Vamos formatar o texto do artigo na tag article:

html<div id="wrapper">
  <header>
    ...
  </header>
  <main>
    <article>
      <h1>Cabeçalho</h1>
      <p>
        texto
      </p>
      <p>
        texto
      </p>
    </article>
  </main>
  <footer>
    ...
  </footer>
</div>

Exemplo

Vamos formatar os posts nas tags article:

html<div id="wrapper">
  <header>
    ...
  </header>
  <main>
    <h1>Novos posts</h1>
    <article>
      <h2>Post 1</h2>
      <p>
        texto
      </p>
      <p>
        texto
      </p>
    </article>
    <article>
      <h2>Post 2</h2>
      <p>
        texto
      </p>
      <p>
        texto
      </p>
    </article>
  </main>
  <footer>
    ...
  </footer>
</div>

Veja também

a tag section,
que agrupa blocos do site
a tag header,
que define a parte superior do site
a tag footer,
que define a parte inferior do site
a tag main,
que define a parte principal do site
a tag nav,
que define o menu principal do site
a tag aside,
que define a parte secundária do site