Melhorando a semântica com a tag ARTICLE do HTML5

Compartilhe nas redes sociais

Hoje retomo a série sobre Semântica no desenvolvimento web e vamos falar a respeito da tag <article> do HTML5.

Mas antes …

Você pode acompanhar os outros artigos já publicados nos links abaixo:

Os exemplos de código que você verá daqui em diante serão gradativamente melhorados e complementados, post a post… Assim vamos evoluindo quanto a semântica.

Agora sim, vamos lá!

<article>

Segundo o MDN:

… representa uma composição independente em um documento, página, aplicação, ou site, ou que é destinado a ser distribuído de forma independente ou reutilizável.

Ou seja, um <article> representa qualquer forma de conteúdo independente, por exemplo um post de um fórum, um artigo de revista ou jornal, um post de um blog, um comentário enviado por um usuário, um gadget ou widget interativos …

Exemplos práticos com certeza facilitarão o nosso entendimento.

Casos de uso:

Um post em um blog

Estrutura HTML formada por <article> dentro de uma <section>:

<section class="post-section">
  <article class="post">
    <h1>Amazing Post</h1>
    <p>First paragraph</p>
  </article>
</section>

Comentários em um post de um blog

<article> dentro de <article>:

<section class="post-section">
  <article class="post">
    <h1 class="post__title">Amazing Post</h1>
    <p>First paragraph</p>
    
    <section class="comments-list">
      <h2 class="comments-list__title">Last comments</h2>

      <article class="comments-list__item">
        <h3 class="comments-list__author">José Junior</h3>
        <p>I really liked the content of your blog...</p>
      </article>

      <article class="comments-list__item">
        <h3 class="comments-list__author">Mark Zuckerberg</h3>
        <p>I disagree with your point of view...</p>
      </article>
    </section>
  </article>
</section>

Se você se sente perdido quanto ao significado da tag <section>, sugiro que leia o artigo anterior que fala justamente sobre essa tag.

Bom, por hoje é só!

Sei que este artigo foi bem menor que os outros, mas este é o objetivo por enquanto: ser simples e direto.

À medida que formos vendo outras tags, teremos exemplos de estrutura cada vez mais completos e complexos.

Podemos até mesmo no fim de tudo construir juntos uma marcação HTML completa de algum tipo de aplicação web, talvez um carrinho de compras. O que acha?

Deixe sua sugestão!