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