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
128
129
130
|
---
title: Elementos en bloque
slug: Web/HTML/Block-level_elements
tags:
- Guía
- HTML
- HTML5
- Principiante
- Web
- desarrollo
translation_of: Web/HTML/Block-level_elements
---
<p><span class="seoSummary">Los elementos, en HTML (lenguaje de marcas de hipertexto - <strong>Hypertext Markup Language</strong>) usualmente son elementos "en bloque" o <a href="/es/docs/Web/HTML/Elementos_en_línea" title="/es/docs/Web/HTML/Elementos_en_línea">elementos "en línea"</a>. Un elemento en bloque ocupa todo el espacio de su elemento padre (contenedor), creando así un "bloque". Este artículo ayuda a explicar lo que esto significa.</span></p>
<p>Los navegadores suelen mostrar el elemento a nivel de bloque con un salto de línea antes y después del elemento. El siguiente ejemplo demuestra la influencia elementos en bloque:</p>
<h2 id="Block-level_Example" name="Block-level_Example"><span style="color: #333333; margin-left: -3px; text-transform: none;">Ejemplo en bloque</span></h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><p>Este párrafo es un elemento en bloque; este fondo se ha coloreado para mostrar elemento principal (o padre) del párrafo.</p></pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: css">p { background-color: #8ABB55; }
</pre>
<p>{{ EmbedLiveSample('Block-level_Example') }}</p>
<h2 id="Uso">Uso</h2>
<ul>
<li>Los elementos de bloque sólo deben aparecer dentro del elemento {{ HTMLElement("body") }}.</li>
</ul>
<h2 id="Elmentos_en_bloque_vs._en_línea">Elementos en bloque vs. en línea</h2>
<p>Hay un par de diferencias clave entre los elementos en bloque y elementos en línea:</p>
<dl>
<dt>Formateo</dt>
<dd>De forma predeterminada, los elementos de bloque comienzan en una nueva línea, pero los elementos en línea pueden comenzar en cualquier parte de una línea.</dd>
<dt>Modelo de contenido</dt>
<dd>En general, los elementos en bloque pueden contener elementos en línea y otros elementos en bloque. Inherente a esta distinción estructural es la idea de que los elementos en bloque crean estructuras "más grandes" que los elementos en línea.</dd>
</dl>
<p>La distinción entre elementos en bloque frente a elementos en línea se utiliza en las especificaciones de HTML hasta la 4.01. En HTML5, esta distinción dual se sustituye por un conjunto más complejo de <a href="/es/docs/Web/Guide/HTML/categorias_de_contenido" title="/es/docs/Web/Guide/HTML/categorias_de_contenido">categorías de contenido</a>. La categoría "en bloque" corresponde aproximadamente a la categoría de <a href="/es/docs/Web/Guide/HTML/categorias_de_contenido#Contenido_dinámico" title="/es/docs/Web/Guide/HTML/categorias_de_contenido#Contenido_dinámico">contenido dinámico</a> en HTML 5, mientras que "en línea" se corresponde con <a href="/es/docs/Web/Guide/HTML/categorias_de_contenido#Contenido_textual_o_est%C3%A1tico" title="/es/docs/Web/Guide/HTML/categorias_de_contenido#Contenido_textual_o_est%C3%A1tico">contenido estático</a>, pero hay categorías adicionales.</p>
<h2 id="Elementos">Elementos</h2>
<p>La siguiente es una lista completa de todos los elementos en bloque de HTML (aunque "en bloque" no se define técnicamente para los elementos que son nuevos en HTML5).</p>
<div class="threecolumns">
<dl>
<dt>{{ HTMLElement("address") }}</dt>
<dd>Información de contacto.</dd>
<dt>{{ HTMLElement("article") }} {{ HTMLVersionInline(5) }}</dt>
<dd>Contenido de Articulo.</dd>
<dt>{{ HTMLElement("aside") }} {{ HTMLVersionInline(5) }}</dt>
<dd>Contenido adicional.</dd>
<dt>{{ HTMLElement("audio") }} {{ HTMLVersionInline(5) }}</dt>
<dd>Reproductor de audio</dd>
<dt>{{ HTMLElement("blockquote") }}</dt>
<dd>Bloque de "cita".</dd>
<dt>{{ HTMLElement("canvas") }} {{ HTMLVersionInline(5) }}</dt>
<dd>Dibujo canvas.</dd>
<dt>{{ HTMLElement("dd") }}</dt>
<dd>Descripción de definición.</dd>
<dt>{{ HTMLElement("div") }}</dt>
<dd>División de documento.</dd>
<dt>{{ HTMLElement("dl") }}</dt>
<dd>Lista de definición.</dd>
<dt>{{ HTMLElement("fieldset") }}</dt>
<dd>Etiqueta de conjunto de campos.</dd>
</dl>
<dl>
<dt>{{ HTMLElement("figcaption") }} {{ HTMLVersionInline(5) }}</dt>
<dd>Leyenda de figura.</dd>
<dt>{{ HTMLElement("figure") }} {{ HTMLVersionInline(5) }}</dt>
<dd>Grupos contenido multimedia con una leyenda (ver {{ HTMLElement("figcaption") }}).</dd>
<dt>{{ HTMLElement("footer") }} {{ HTMLVersionInline(5) }}</dt>
<dd>Sección o pie de página.</dd>
<dt>{{ HTMLElement("form") }}</dt>
<dd>Formulario de entrada.</dd>
<dt>{{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }}, {{ HTMLElement("h6") }}</dt>
<dd>Niveles de cabecera 1-6.</dd>
<dt>{{ HTMLElement("header") }} {{ HTMLVersionInline(5) }}</dt>
<dd>Sección o cabecera de página.</dd>
<dt>{{ HTMLElement("hgroup") }} {{ HTMLVersionInline(5) }}</dt>
<dd>Grupos información de encabezado.</dd>
<dt>{{ HTMLElement("hr") }}</dt>
<dd>Regla Horizontal (línea divisoria).</dd>
<dt>{{ HTMLElement("li") }}</dt>
<dd>Elemento de lista.</dd>
<dt>{{ HTMLElement("main") }}</dt>
<dd>Engloba el único contenido central del documento.</dd>
<dt>{{ HTMLElement("nav") }}</dt>
<dd>Contiene enlaces de navegación.</dd>
</dl>
<dl>
<dt>{{ HTMLElement("noscript") }}</dt>
<dd>Contenido para ser usado si los scripts no son soportados o permitidos.</dd>
<dt>{{ HTMLElement("ol") }}</dt>
<dd>Lista ordenada.</dd>
<dt>{{ HTMLElement("output") }} {{ HTMLVersionInline(5) }}</dt>
<dd>Formulario de salida.</dd>
<dt>{{ HTMLElement("p") }}</dt>
<dd>Párrafo.</dd>
<dt>{{ HTMLElement("pre") }}</dt>
<dd>Texto preformateado.</dd>
<dt>{{ HTMLElement("section") }} {{ HTMLVersionInline(5) }}</dt>
<dd>Sección de una página web.</dd>
<dt>{{ HTMLElement("table") }}</dt>
<dd>Tabla.</dd>
<dt>{{ HTMLElement("tfoot") }}</dt>
<dd>Pie de tabla.</dd>
<dt>{{ HTMLElement("ul") }}</dt>
<dd>Lista no ordenada.</dd>
<dt>{{ HTMLElement("video") }} {{ HTMLVersionInline(5) }}</dt>
<dd>Reproductor de vídeo.</dd>
</dl>
</div>
<h3 id="Ver_también" name="Ver_también">Ver también</h3>
<ul>
<li><a href="/es/docs/Web/HTML/Elementos_en_línea" title="/es/docs/Web/HTML/Elementos_en_línea">Elementos en línea</a></li>
</ul>
|
