aboutsummaryrefslogtreecommitdiff
path: root/files/es/web/html/block-level_elements
diff options
context:
space:
mode:
authorPeter Bengtsson <mail@peterbe.com>2020-12-08 14:41:45 -0500
committerPeter Bengtsson <mail@peterbe.com>2020-12-08 14:41:45 -0500
commit1109132f09d75da9a28b649c7677bb6ce07c40c0 (patch)
tree0dd8b084480983cf9f9680e8aedb92782a921b13 /files/es/web/html/block-level_elements
parent4b1a9203c547c019fc5398082ae19a3f3d4c3efe (diff)
downloadtranslated-content-1109132f09d75da9a28b649c7677bb6ce07c40c0.tar.gz
translated-content-1109132f09d75da9a28b649c7677bb6ce07c40c0.tar.bz2
translated-content-1109132f09d75da9a28b649c7677bb6ce07c40c0.zip
initial commit
Diffstat (limited to 'files/es/web/html/block-level_elements')
-rw-r--r--files/es/web/html/block-level_elements/index.html130
1 files changed, 130 insertions, 0 deletions
diff --git a/files/es/web/html/block-level_elements/index.html b/files/es/web/html/block-level_elements/index.html
new file mode 100644
index 0000000000..763c105213
--- /dev/null
+++ b/files/es/web/html/block-level_elements/index.html
@@ -0,0 +1,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">&lt;p&gt;Este párrafo es un elemento en bloque; este fondo se ha coloreado para mostrar elemento principal (o padre) del párrafo.&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="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">Elmentos 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>