Etiqueta HTML <article>

Definição e uso

<article> A tag define conteúdo independente e autônomo.

Um artigo deve ser compreensível independentemente e pode ser distribuído independentemente do site inteiro.

<articel> As fontes potenciais do elemento incluem:

  • Postagens de fórum
  • Artigos de blog
  • Notícias
  • Comentários de usuários

Anotação:No navegador,<article> O elemento em si não exibe estilos especiais. No entanto, você pode usá-los para estilizar <article> Elemento (veja os exemplos abaixo).

Veja também:

Manual de Referência do DOM HTML:Objeto Article

Exemplo

Exemplo 1

Três artigos independentes e autônomos:

<article>
<h2>Google Chrome</h2>
<p>Google Chrome é um navegador da web desenvolvido pela Google, lançado em 2008. Chrome é o navegador da web mais popular do mundo hoje!</p>
</article>
<article>
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox é um navegador da web open-source desenvolvido pela Mozilla. Desde janeiro de 2018, o Firefox tem sido o segundo navegador da web mais popular.</p>
</article>
<article>
<h2>Microsoft Edge</h2>
<p>O Microsoft Edge é um navegador da internet desenvolvido pela Microsoft, lançado em 2015. O Microsoft Edge substituiu o Internet Explorer.</p>
</article>

Experimente você mesmo

Exemplo 2

Use CSS para definir o estilo do elemento <article>:

<html>
<head>
<style>
.all-browsers {
  margin: 0;
  padding: 5px;
  background-color: lightgray;
}
.all-browsers > h1, .browser {
  margin: 10px;
  padding: 5px;
}
.browser {
  background: white;
}
.browser > h2, p {
  margin: 4px;
  font-size: 90%;
}
</style>
</head>
<body>
<article class="all-browsers">
  <h1>Navegadores Mais Populares</h1>
  <article class="browser">
    <h2>Google Chrome</h2>
    <p>Google Chrome é um navegador da web desenvolvido pela Google, lançado em 2008. Chrome é o navegador da web mais popular do mundo hoje!</p>
  </article>
  <article class="browser">
    <h2>Mozilla Firefox</h2>
    <p>Mozilla Firefox é um navegador da web open-source desenvolvido pela Mozilla. Desde janeiro de 2018, o Firefox tem sido o segundo navegador da web mais popular.</p>
  </article>
  <article class="browser">
    <h2>Microsoft Edge</h2>
    <p>O Microsoft Edge é um navegador da internet desenvolvido pela Microsoft, lançado em 2015. O Microsoft Edge substituiu o Internet Explorer.</p>
  </article>
</article>
</body>
</html>

Experimente você mesmo

Atributos Globais

<article> A tag também suporta Atributos Globais no HTML.

Atributos de Evento

<article> A tag também suporta Atributos de Evento no HTML.

Configurações CSS Padrão

A maioria dos navegadores usará os seguintes valores padrão para exibir <article> Elemento:

article {
  display: block;
}

Suporte do Navegador

Os números na tabela indicam a versão do navegador que suportou o elemento pela primeira vez.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
6.0 9.0 4.0 5.0 11.1