---
title: Elements a nivell de bloc
slug: Web/HTML/Block-level_elements
translation_of: Web/HTML/Block-level_elements
---
<p>Els elements HTML (<strong>HyperText Markup Language</strong>) són normalment elements "en bloc" o <a href="https://developer.mozilla.org/en-US/docs/HTML/Inline_elements">elements "en línia"</a>. Un element en bloc ocupa tot l'espai del seu element pare (contenidor), creant així un "bloc". Aquest article ajuda a explicar el que això significa.</p>

<p><span id="result_box" lang="ca"><span>Els</span> <span>navegadors</span> <span>solen mostrar</span> <span>l'element a</span> <span>nivell</span> <span>de bloc</span> <span>amb</span> <span>un salt de</span> <span>línia abans</span> <span>i</span> <span>després de l'element</span><span>.</span> <span>Es</span> <span>pot</span> <span>visualitzar</span> <span>com una pila</span> <span>de caixes.</span> <span>El següent</span> <span>exemple</span> <span>demostra la influència</span> <span>de l'element</span> <span>en bloc</span><span>:</span></span></p>

<h2 id="Block-level_Example" name="Block-level_Example"><span style="color: #333333; margin-left: -3px; text-transform: none;">Elements en Bloc</span></h2>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;p&gt;This paragraph is a block-level element; its background has been colored to display the paragraph's parent element.&lt;/p&gt;</pre>

<h3 id="CSS">CSS</h3>

<pre class="brush: css">p { background-color: #8ABB55; }
</pre>

<p>{{ EmbedLiveSample('Block-level_Example') }}</p>

<h2 id="Ús">Ús</h2>

<ul>
 <li><span class="short_text" id="result_box" lang="ca"><span>Els Elements</span> <span>en bloc</span> <span>poden aparèixer</span> <span>només</span> <span>dins d'un element</span></span> {{ HTMLElement("body") }}.</li>
</ul>

<h2 id="En_bloc_vs._En_línia">En bloc vs. En línia</h2>

<p>Hi ha un parell de diferències clau entre els elements en bloc i els elements en línia:</p>

<dl>
 <dt>Formateig</dt>
 <dd>Per defecte, els elements de bloc comencen en línies noves, però els elements en línia poden començar en qualsevol part d'una línia.</dd>
 <dt>Model de contingut</dt>
 <dd>En general, els elements de bloc poden contenir elements en línia i altres elements en bloc. Inherent a aquesta distinció estructural és la idea que els elements de bloc creen estructures "més gran" que els elements en línia.</dd>
</dl>

<p>La distinció entre els elements en bloc vs. línia s'utilitza en les especificacions d'HTML fins 4.01. En HTML5, aquesta distinció binària se substitueix amb un conjunt més complex de <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories">categories de contingut</a>. La categoria "en bloc" correspon aproximadament a la categoria de <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Flow_content">contingut dinàmic</a> en HTML 5, mentre que "en línia" es correspon amb el <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Phrasing_content">contingut fraseig</a>, però hi ha categories addicionals.</p>

<h2 id="Elements">Elements</h2>

<p>La següent és una llista completa de tots els elements HTML de bloc (encara que "a nivell de bloc" no es defineix tècnicament per als elements que són nous en HTML5).</p>

<div class="threecolumns">
<dl>
 <dt>{{ HTMLElement("address") }}</dt>
 <dd><span class="short_text" id="result_box" lang="ca"><span>Informació de contacte</span></span></dd>
 <dt>{{ HTMLElement("article") }} {{ HTMLVersionInline(5) }}</dt>
 <dd>Contingut Article.</dd>
 <dt>{{ HTMLElement("aside") }} {{ HTMLVersionInline(5) }}</dt>
 <dd>Contingut  Aside.</dd>
 <dt>{{ HTMLElement("blockquote") }}</dt>
 <dd>Cita extensa ("bloc").</dd>
 <dt>{{ HTMLElement("br") }}</dt>
 <dd>Salt de línia.</dd>
 <dt>{{ HTMLElement("canvas") }} {{ HTMLVersionInline(5) }}</dt>
 <dd>Gràfic canvas.</dd>
 <dt>{{ HTMLElement("dd") }}</dt>
 <dd><span id="result_box" lang="ca"><span>Descripció </span><span>Definició.</span></span></dd>
 <dt>{{ HTMLElement("div") }}</dt>
 <dd>Divisió document.</dd>
 <dt>{{ HTMLElement("dl") }}</dt>
 <dd>Llista de definicions.</dd>
 <dt>{{ HTMLElement("fieldset") }}</dt>
 <dd>Etiquetes de camp.</dd>
</dl>

<dl>
 <dt>{{ HTMLElement("figcaption") }} {{ HTMLVersionInline(5) }}</dt>
 <dd>Llegenda de la imatge.</dd>
 <dt>{{ HTMLElement("figure") }} {{ HTMLVersionInline(5) }}</dt>
 <dd><span class="short_text" id="result_box" lang="ca"><span>Contingut</span> <span>multimèdia,</span> <span>grups</span> <span>amb</span> <span>una llegenda</span></span> (veure {{ HTMLElement("figcaption") }}).</dd>
 <dt>{{ HTMLElement("footer") }} {{ HTMLVersionInline(5) }}</dt>
 <dd><span class="short_text" id="result_box" lang="ca"><span>Secció</span> <span>o peu</span> <span>de pàgina.</span></span></dd>
 <dt>{{ HTMLElement("form") }}</dt>
 <dd>Formulari d'entrada.</dd>
 <dt>{{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }}, {{ HTMLElement("h6") }}</dt>
 <dd>Nivells de capçalera 1-6.</dd>
 <dt>{{ HTMLElement("header") }} {{ HTMLVersionInline(5) }}</dt>
 <dd><span id="result_box" lang="ca"><span>Secció</span> <span>o encapçalament</span> <span>de pàgina.</span></span></dd>
 <dt>{{ HTMLElement("hgroup") }} {{ HTMLVersionInline(5) }}</dt>
 <dd>
 <div class="textArea" id="destText" style="direction: ltr;">
 <div><span id="ouHighlight__14_24TO0_9">Informació</span><span id="noHighlight_0.4118407506703824"> de </span><span class="highlighted" id="ouHighlight__7_12TO14_22">capçalera</span><span id="noHighlight_0.5902863558947251"> de </span><span id="ouHighlight__0_5TO27_31">grups</span><span id="noHighlight_0.5463873009180821">.</span></div>
 </div>
 </dd>
 <dt>{{ HTMLElement("hr") }}</dt>
 <dd><span id="result_box" lang="ca"><span>Regla</span> <span>horitzontal</span> <span>(</span><span>línia</span> <span>divisòria</span><span>)</span><span>.</span></span></dd>
 <dt>{{ HTMLElement("li") }}</dt>
 <dd>Element de la llista..</dd>
 <dt>{{ HTMLElement("main") }}</dt>
 <dd>Conté el contingut central únic per aquest document.</dd>
 <dt>{{ HTMLElement("nav") }}</dt>
 <dd><span id="result_box" lang="ca"><span>Conté</span> <span>enllaços</span> <span>de navegació.</span></span></dd>
</dl>

<dl>
 <dt>{{ HTMLElement("noscript") }}</dt>
 <dd>Contingut d'ùs si scripting no és compatible o apagat.</dd>
 <dt>{{ HTMLElement("ol") }}</dt>
 <dd>Llista ordenada.</dd>
 <dt>{{ HTMLElement("output") }} {{ HTMLVersionInline(5) }}</dt>
 <dd>Formulari de sortida.</dd>
 <dt>{{ HTMLElement("p") }}</dt>
 <dd>Paràgraf.</dd>
 <dt>{{ HTMLElement("pre") }}</dt>
 <dd>Text amb format predefinit.</dd>
 <dt>{{ HTMLElement("section") }} {{ HTMLVersionInline(5) }}</dt>
 <dd><span id="result_box" lang="ca"><span>Secció d'una</span> <span>pàgina</span> <span>web.</span></span></dd>
 <dt>{{ HTMLElement("table") }}</dt>
 <dd>Taula.</dd>
 <dt>{{ HTMLElement("tfoot") }}</dt>
 <dd><span id="result_box" lang="ca">P<span>eu</span> <span>de pàgina de la taula</span></span>.</dd>
 <dt>{{ HTMLElement("ul") }}</dt>
 <dd>Llista desordenada.</dd>
 <dt>{{ HTMLElement("video") }} {{ HTMLVersionInline(5) }}</dt>
 <dd><span id="result_box" lang="ca"><span>Reproductor</span> <span>de vídeo.</span></span></dd>
</dl>
</div>

<h3 id="See_also" name="See_also">Veure</h3>

<ul>
 <li><a href="/en-US/docs/Web/HTML/Inline_elements" title="en/HTML/Inline_elements">Elements en línia</a></li>
</ul>