files/pt-br/web/html/element/article/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124

---
title: article (artigo)
slug: Web/HTML/Element/article
translation_of: Web/HTML/Element/article
---
<h2 id="Resumo">Resumo</h2>

<p>O <em>Elemento HTML Article</em> (<span style="font-family: Courier New;">&lt;article&gt;</span>) representa uma composição independente em um documento, página, aplicação, ou site, ou que é destinado a ser distribuido de forma independente ou reutilizável, por exemplo, em sindicação. Este poderia ser o 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, ou qualquer outra forma de conteúdo independente.</p>

<div class="note">
<p><em>Notas de uso:</em></p>

<ul>
 <li>Quando um elemento <code>&lt;article&gt;</code> está aninhado, o elemento interior representa um artigo relacionado com o elemento exterior. Por exemplo, os comentários do post de um blog podem ser elementos <code>&lt;article&gt;</code> aninhados em <code>&lt;article&gt;</code> representando o post do blog.</li>
 <li>Informações sobre o autor de um elemento <code>&lt;article&gt;</code> podem ser fornecidas através do elemento {{ HTMLElement("address") }} ,mas ele não se aplica aos elementos <code>&lt;article&gt;</code> aninhados.</li>
 <li>A data e hora de publicação de um elemento <code>&lt;article&gt;</code> pode ser descrita usando o atributo {{ htmlattrxref("pubdate", "time") }} de um elemento {{ HTMLElement("time") }}.</li>
</ul>
</div>

<h2 id="Contexto_de_uso">Contexto de uso</h2>

<table class="fullwidth-table" style="height: 117px; width: 1125px;">
 <tbody>
  <tr>
   <td>Conteúdo permitido</td>
   <td><a href="/en/HTML/Content_categories#Flow content" title="en/HTML/Content categories#Flow content">Flow content</a></td>
  </tr>
  <tr>
   <td>Omissão de tag</td>
   <td>Nenhuma, tanto tag de início quanto de fim são obrigatórias</td>
  </tr>
  <tr>
   <td>Elementos pai permitidos</td>
   <td>
    <p>Qualquer elemento que aceita <a href="/en/HTML/Content_categories#flow_content" title="https://developer.mozilla.org/en/HTML/Content_categories#flow_content">flow content</a>. Note-se que um elemento <code>&lt;article&gt;</code> não pode ser descendente de um elemento {{ HTMLElement("address") }}.</p>
   </td>
  </tr>
  <tr>
   <td>Documento normativo</td>
   <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-article-element" rel="external nofollow" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-article-element">HTML5, section 4.4.4</a></td>
  </tr>
 </tbody>
</table>

<h2 id="Atributos">Atributos</h2>

<p>Este elemento não possui outros elementos se não os <a href="/en/HTML/Global_attributes" rel="internal">global attributes</a>, comuns a todos os elementos.</p>

<h2 id="Interface_DOM">Interface DOM</h2>

<p>Este elemento implementa a interface <code><a href="/en/DOM/element" title="en/DOM/element">HTMLElement</a></code> .</p>

<h2 id="Exemplos">Exemplos</h2>

<pre class="brush: html">&lt;article&gt;
  &lt;h4&gt;Um artigo realmente impressionante&lt;/h4&gt;
  &lt;p&gt;Lotes de texto incrível.&lt;/p&gt;
&lt;/article&gt;
</pre>

<h3 id="Resultado">Resultado</h3>

<div style="background-color: #F6F6F2;">&lt;article&gt;
<h4 id="Um_artigo_realmente_impressionante">Um artigo realmente impressionante</h4>

<p>Lotes de texto incrível.</p>
&lt;/article&gt;</div>

<h3 id="Compatibilidade">Compatibilidade</h3>

<p>{{ CompatibilityTable() }}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Suporte Básico</td>
   <td>5</td>
   <td>{{ CompatGeckoDesktop("2.0") }}</td>
   <td>9.0</td>
   <td>11.10</td>
   <td>4.1</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Suporte Básico</td>
   <td>2.2</td>
   <td>{{ CompatGeckoMobile("2.0") }}</td>
   <td>9.0</td>
   <td>11.0</td>
   <td>5.0 (iOS 4.2)</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="Veja_também">Veja também</h2>

<ul>
 <li>Outros elementos de seção relacionados: {{ HTMLElement("body") }}, {{ HTMLElement("nav") }}, {{ HTMLElement("section") }}, {{ HTMLElement("aside") }}, {{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }}, {{ HTMLElement("h6") }}, {{ HTMLElement("hgroup") }}, {{ HTMLElement("header") }}, {{ HTMLElement("footer") }}, {{ HTMLElement("address") }}</li>
 <li class="last"><a class="deki-ns current" href="/en/Sections_and_Outlines_of_an_HTML5_document" title="en/Sections and Outlines of an HTML5 document">Sections and outlines of an HTML5 document</a>.</li>
</ul>