Como utilizar o elemento semântico article

Neste post vamos aprender como utilizar o elemento semântico article, como também algumas sugestões de como aplicar o mesmo em projetos reais.

Utilização ideal do elemento semântico article

Podemos pensar no elemento article como um componente isolado em um documento, página ou site

Que o mesmo pode ser reutilizado em vários locais, sem depender do contexto geral do resto do que é exibido em volta ou próximo a ele

Quer se especializar em HTML e CSS? Veja o nosso catálogo de cursos.

Um documento HTML, pode conter mais de um elemento article em sua composição

Por exemplo: em um blog que exibe uma lista de posts, cada post pode estar inserido dentro de um elemento article

Alguns cuidados para utilizar o article:

• Dentro de um article inserir um título com tags de heading (<h1>-<h6>);
• Quando um elemento article for inserido dentro de outro article, ele deve conter assunto relacionado ao article pai;
• Uma data de publicação de um elemento em um article article, por exemplo um post, pode ser descrita utilizando o atributo datetime do elemento <time>;

Exemplo de utilização do elemento article

Vamos agora ver um exemplo de HTML de um elemento article se estivesse num projeto real

O contexto é um post de um blog, numa listagem de post, veja:

<section class="blog_posts">
    <header>
        <h1>Posts do blog</h1>
    </header>
    <article>
        <h2>Como utilizar o elemento article</h2>
        <p>O elemento article pode ser utilizado de forma independende no HTML e também...</p>
        <a href="#">Continue lendo</a>
        <footer>
            <p>
                Escrito em
                <time datetime="2019-07-31 12:00">31 de Julho</time>
                Por Matheus
            </p>
        </footer>
    </article>
</section>

Perceba que nesta lista de posts temos apenas um post, porém a ideia é a mesma para os outros, replicar esta estrutura de articles para cada um deles

A estrutura em si envolveu outros elementos, também semânticos, mas a ideia principal é que o article pode ser algo desvinculado do contexto que foi inserido

Este post, por exemplo, poderia ser inserido no rodapé da página também

Conclusão

Vimos que o elemento article representa um conteúdo que pode ser reaproveitado ao longo do seu site

Ele não depende dos conteúdos que estão em volta dele e também podemos ter vários articles numa página

E por hoje é isso, até o próximo post!

Confira também nosso curso de HTML e CSS gratuito no YouTube clicando aqui! Onde criamos um site do 0 até o resposivo 

Referências: MDN