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