O elemento do artigo é a oportunidade perfeita para o desenvolvedor incluir um conteúdo que será separado do resto do conteúdo.
Definição e Uso
A
<article> tag especifica conteúdo independente e independente. Pode ser uma postagem nas redes sociais, comentário do usuário, notícia ou até mesmo um post no blog.
Três artigos com conteúdo independente e independente.
<article> <a href="/html-section-tag"> <h2>HTML <section> Tag</h2> <div> <time>13 de maio de 2022</time> <div>HTML</div> </div> </a> </article> <article> <a href="/html-lang"> <h2>HTML lang Attribute</h2> <div> <time>12 de maio de 2022</time> <div>HTML</div> </div> </a> </article> <article> <a href="/html-audio-tag"> <h2>HTML Audio Tag</h2> <div> <time>11 de maio de 2022</time> <div>HTML</div> </div> </a> </article>
Notar: O
<article>elemento não é renderizado como nada especial em um navegador.
É importante saber que se tivermos um artigo com conteúdo longo, então podemos usar seções dentro do elemento de artigo para logicamente quebrar o conteúdo.
<!--article começar--> <article> <h1>Olá, mundo</h1> <section> <h2>Olá de California</h2> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, iste? </p> </section> <section> <h2>Olá de London</h2> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, iste? </p> </section> <section> <h2>Olá de Austria</h2> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, iste? </p> </section> </article> <!--article fim-->
Como você pode ver no exemplo acima, o elemento de artigo pode ter muitos elementos de seção.
Suporte ao navegador
Os números na tabela especificam a primeira versão do navegador que suporta totalmente o elemento.
| Elemento | Chrome | Edge | Mozilla | Safari | Opera |
|---|---|---|---|---|---|
| <article> | 6.0 | 9.0 | 4.0 | 5.0 | 11.1 |
Note ter em mente que se o conteúdo for auto-contido, prefira usar a tag
<article>. Você pode usar o CSS para estilizar o elemento<article>.
Configurações padrão do CSS
A maioria dos navegadores exibirá o
<article> elemento com os seguintes valores padrão.
article { display: block; }