diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:41:45 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:41:45 -0500 |
commit | 1109132f09d75da9a28b649c7677bb6ce07c40c0 (patch) | |
tree | 0dd8b084480983cf9f9680e8aedb92782a921b13 /files/es/web/html/block-level_elements | |
parent | 4b1a9203c547c019fc5398082ae19a3f3d4c3efe (diff) | |
download | translated-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.html | 130 |
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"><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">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> |