---
title: Heading elements
slug: Web/HTML/Element/Heading_Elements
tags:
  - Element
  - HTML
  - HTML sections
  - Reference
  - Web
translation_of: Web/HTML/Element/Heading_Elements
---
<p id="Summary">Els elements d'<strong>encapçalament</strong> implementen sis nivells de capçaleres del document, <code>&lt;h1&gt;</code> és el més important i <code>&lt;h6&gt;</code> és el menys important. Un element de capçalera descriu breument el tema de la secció que introdueix. La informació de capçalera pot ser utilitzada pels agents usuaris, per exemple, per construir una taula de contingut d'un document de forma automàtica.</p>

<div class="note">
<p><strong>Nota d'ùs:</strong></p>

<ul>
 <li>No utilitzeu nivells més baixos per disminuir la mida de la font de la capçalera: utilitzeu la propietat CSS {{cssxref ("font-size")}}.</li>
 <li>Eviteu saltar-se els nivells d'encapaçalament: sempre heu de començar des de &lt;h1&gt;, el següent &lt;h2&gt; i així successivament.</li>
 <li>Amb l'element {{HTMLElement("section")}}, s'ha de considerar evitar l'ús de <code>&lt;h1&gt;</code> més d'una vegada per pàgina; per convenció, s'utilitza per al títol mostrat en la pàgina, venint a continuació tots els encapçalaments començant per <code>&lt;h2&gt;</code>. Quan treballem amb seccions, s'ha d'utilitzar un <code>&lt;h1&gt;</code> per secció. Veure {{SectionOnPage("/en-US/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines", "Defining sections")}} per a més informació.</li>
</ul>
</div>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Categories de contingut</a></th>
   <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Contingut dinàmic</a>, contingut encapçalament, contingut palpable.</td>
  </tr>
  <tr>
   <th scope="row">Contingut permès</th>
   <td><a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">Contingut textual</a>.</td>
  </tr>
  <tr>
   <th scope="row">Omissió de l'etiqueta</th>
   <td>{{no_tag_omission}}</td>
  </tr>
  <tr>
   <th scope="row">Elements pares permesos</th>
   <td>Qualsevol element que accepti <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Contingut dinàmic</a>; no feu servir com a fill un element {{HTMLElement("hgroup")}}, ara és obsolet.</td>
  </tr>
  <tr>
   <th scope="row">Interfície DOM</th>
   <td>{{domxref("HTMLHeadingElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Atributs">Atributs</h2>

<p>Aquest element inclou els <a href="/en-US/docs/Web/HTML/Global_attributes">atributs globals</a>.</p>

<p><span class="short_text" id="result_box" lang="ca"><span>L'atribut</span> <code><span>align</span></code> <span>és</span> <span>obsole</span><span>;</span> <span>no el</span><span> feu servi</span></span></p>

<h2 id="Exemples">Exemples</h2>

<h3 id="Totes_les_capçaleres">Totes les <span id="result_box" lang="ca"><span>capçaleres</span></span></h3>

<p><span id="result_box" lang="ca"><span>El codi</span> <span>següent</span> <span>mostra</span> <span>tots</span> <span>els</span> <span>nivells</span> <span>de capçaleres,</span> <span>en ús.</span></span></p>

<pre class="brush: html">&lt;h1&gt;Heading level 1&lt;/h1&gt;
&lt;h2&gt;Heading level 2&lt;/h2&gt;
&lt;h3&gt;Heading level 3&lt;/h3&gt;
&lt;h4&gt;Heading level 4&lt;/h4&gt;
&lt;h5&gt;Heading level 5&lt;/h5&gt;
&lt;h6&gt;Heading level 6&lt;/h6&gt;
</pre>

<p>Aquest és el resultat del codi:</p>

<p>{{ EmbedLiveSample('All_headings', '280', '300', '') }}</p>

<h3 id="Pàgina_d'exemple_page">Pàgina d'exemple page</h3>

<p>El següent codi mostra alguns encapçalaments amb continguts sota d'ells.</p>

<pre class="brush: html">&lt;h1&gt;Heading elements&lt;/h1&gt;
&lt;h2&gt;Summary&lt;/h2&gt;
&lt;p&gt;Some text here...&lt;/p&gt;

&lt;h2&gt;Examples&lt;/h2&gt;
&lt;h3&gt;Example 1&lt;/h3&gt;
&lt;p&gt;Some text here...&lt;/p&gt;

&lt;h3&gt;Example 2&lt;/h3&gt;
&lt;p&gt;Some text here...&lt;/p&gt;

&lt;h2&gt;See also&lt;/h2&gt;
&lt;p&gt;Some text here...&lt;/p&gt;
</pre>

<p>Aquest és el resultat del codi:</p>

<p>{{ EmbedLiveSample('Example_page', '280', '480', '') }}</p>

<h2 id="Specifications" name="Specifications">Especificacions</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificació</th>
   <th scope="col">Estat</th>
   <th scope="col">Comentari</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="Navegadors_compatibles">Navegadors compatibles</h2>

<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>Suport bàsic</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>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>Suport bàsic</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile("1.0")}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="Veure">Veure</h2>

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

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