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
125
126
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>
|
