---
title: '<h1>–<h6>: Os elementos HTML de cabeçalho da seção'
slug: Web/HTML/Element/Heading_Elements
translation_of: Web/HTML/Element/Heading_Elements
---
<p>{{HTMLRef}}</p>

<p>Os <strong>elementos HTML</strong> <strong><code>&lt;h1&gt;</code>–<code>&lt;h6&gt;</code></strong> representam seis níveis de título de seção. <code>&lt;h1&gt;</code> é o nível de seção mais alto e <code>&lt;h6&gt;</code> é o mais baixo.</p>

<p>{{EmbedInteractiveExample("pages/tabbed/h1-h6.html", "tabbed-standard")}}</p>

<h2 id="Sumário">Sumário</h2>

<p>Elementos de<strong> cabeçalho</strong> são implementados em seis níveis, <code>&lt;h1&gt;</code> é o mais importante e <code>&lt;h6&gt;</code> é o de menor importância. Um elemento de cabeçalho descreve brevemente o tópico da seção em que ele está. As informações de cabeçalho podem ser usadas por agentes de usuário, por exemplo, para construir uma tabela de conteúdos para um documento automaticamente.</p>

<ul class="htmlelt">
 <li><dfn><a href="/en-US/docs/Web/HTML/Content_categories">Categorias do conteúdo</a></dfn> <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Conteúdos de fluxo</a>, conteúdos de cabeçalho, conteúdos palpáveis.</li>
 <li><dfn>Conteúdo permitido</dfn> <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">Conteúdo com texto</a>.</li>
 <li><dfn>Omissão de tag</dfn> Não há, porém, as tags de abertura e fechamento são obrigatórias.</li>
 <li><dfn>Elementos pais permitidos</dfn>Qualquer elemento que aceite <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">conteúdos de fluxo</a>; ou como um elemento filho do grupo de elementos de cabeçalho {{HTMLElement("hgroup")}} </li>
 <li><dfn>Interface DOM</dfn> {{domxref("HTMLHeadingElement")}}</li>
</ul>

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

<p>Esses elementos incluem os <a href="/en-US/docs/Web/HTML/Global_attributes">atributos globais.</a></p>

<p>O atributo <strong>align</strong> está  {{deprecated_inline}} no {{HTMLVersionInline(4.01)}} e {{obsolete_inline}} no {{HTMLVersionInline(5)}}.</p>

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

<h3 id="Todos_os_cabeçalhos">Todos os cabeçalhos</h3>

<p>O seguinte código mostra, em uso, todos os níveis de cabeçalho.</p>

<pre class="brush: html notranslate">&lt;h1&gt;Cabeçalho nível 1&lt;/h1&gt;
&lt;h2&gt;Cabeçalho nível 2&lt;/h2&gt;
&lt;h3&gt;Cabeçalho nível 3&lt;/h3&gt;
&lt;h4&gt;Cabeçalho nível 4&lt;/h4&gt;
&lt;h5&gt;Cabeçalho nível 5&lt;/h5&gt;
&lt;h6&gt;Cabeçalho nível 6&lt;/h6&gt;
</pre>

<p>Aqui está o resultado deste código:</p>

<p>{{ EmbedLiveSample('Todos_os_cabeçalhos', '320', '300', '', 'Web/HTML/Element/Heading_Elements') }}</p>

<h3 id="Página_de_exemplo">Página de exemplo</h3>

<p>O código seguinte mostra alguns cabeçalhos com um pouco de conteúdo abaixo deles.</p>

<pre class="brush: html notranslate">&lt;h1&gt;Elementos de cabeçalho&lt;/h1&gt;
&lt;h2&gt;Sumário&lt;/h2&gt;
&lt;p&gt;Algum texto aqui...&lt;/p&gt;

&lt;h2&gt;Exemplos&lt;/h2&gt;
&lt;h3&gt;Exemplo 1&lt;/h3&gt;
&lt;p&gt;Algum texto aqui...&lt;/p&gt;

&lt;h3&gt;Exemplo 2&lt;/h3&gt;
&lt;p&gt;Algum texto aqui...&lt;/p&gt;

&lt;h2&gt;Veja também&lt;/h2&gt;
&lt;p&gt;Algum texto aqui...&lt;/p&gt;
</pre>

<p>Aqui está o resultado deste código:</p>

<p>{{ EmbedLiveSample('Página_de_exemplo', '360', '480', '', 'Web/HTML/Element/Heading_Elements') }}</p>

<h2 id="Notas">Notas</h2>

<p><strong>Não</strong> use níveis menores para diminuir o tamanho da fonte do cabeçalho: use a propriedade <a href="/en-US/docs/Web/CSS">CSS</a> {{cssxref("font-size")}} .</p>

<p>Evite pular níveis de cabeçalhos: sempre comece com <code>&lt;h1&gt;</code>, depois  <code>&lt;h2&gt;</code> e assim por diante. Tente, também, ter pelo menos um cabeçalho de primeiro nível em uma página..</p>

<p>Em {{HTMLVersionInline(5)}}, use o elemento {{HTMLElement("section")}} para definir o outline de um documento. Cabeçalhos fornecem títulos para secções e subsecções. Você também pode agrupar um cabeçalho e seu conteúdo usando o elemento {{HTMLElement("div")}} .</p>

<h2 id="Specifications" name="Specifications">Especificações</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificação</th>
   <th scope="col">Status</th>
   <th scope="col">Comentário</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements', '&lt;h1&gt;, &lt;h2&gt;, &lt;h3&gt;, &lt;h4&gt;, &lt;h5&gt;, and &lt;h6&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements', '&lt;h1&gt;, &lt;h2&gt;, &lt;h3&gt;, &lt;h4&gt;, &lt;h5&gt;, and &lt;h6&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.5.5', '&lt;h1&gt;, &lt;h2&gt;, &lt;h3&gt;, &lt;h4&gt;, &lt;h5&gt;, and &lt;h6&gt;')}}</td>
   <td>{{Spec2('HTML4.01')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilidade_de_navegador">Compatibilidade de navegador</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</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>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop("1.0")}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</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>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile("1.0")}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="sect1"></h2>

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

<ul>
 <li>{{HTMLElement("p")}}</li>
 <li>{{HTMLElement("div")}}</li>
 <li>{{HTMLElement("section")}}</li>
</ul>

<div>{{HTMLRef}}</div>