diff options
Diffstat (limited to 'files/ca/web/html/block-level_elements/index.html')
-rw-r--r-- | files/ca/web/html/block-level_elements/index.html | 127 |
1 files changed, 127 insertions, 0 deletions
diff --git a/files/ca/web/html/block-level_elements/index.html b/files/ca/web/html/block-level_elements/index.html new file mode 100644 index 0000000000..91cfcad2de --- /dev/null +++ b/files/ca/web/html/block-level_elements/index.html @@ -0,0 +1,127 @@ +--- +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"><p>This paragraph is a block-level element; its background has been colored to display the paragraph's parent element.</p></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> |