Ads by ProfitSence
Close

HTML <article> Tag

Last Updated on Domingo 9º out 2022

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;
}

			
	
article about html
articles on html
article in html
article on html
articles about html
article tags html
article tags
element article article element
article header
article html tag
article tag html
html article tag html tag article
article elements