Bloques de contenido

Las etiquetas de bloque permiten definir bloques de contenido coherente, formado por texto e imágenes. Visualmente, cada bloque se muestra separado del resto de bloques. El bloque de contenido más simple es el párrafo (etiqueta <p>).

En esta lección se comentan las etiquetas de bloques de contenido <p>, <hr />, <pre>, <blockquote>, <figure>, <figcaption> y <main>.

Las etiquetas de lista <ol>, <ul>, <li>, <dl>, <dt> y <dd>, que también son etiquetas de bloque de contenido, se tratan en la lección Listas.

La etiqueta de división <div>, que también es una etiqueta de bloque de contenido, se trata en la lección Divisiones.

Párrafo: <p>

La etiqueta <p> está pensada para definir párrafos de texto e imágenes.

<p>Quien tiene un amigo tiene un tesoro.</p>

<p>Amigo en la adversidad, es amigo de verdad.</p>

<p>Cuando marzo mayea, mayo marcea.</p>

<p>La primavera la sangre altera.</p>
ERROR (no puede mostrarse el objeto)
Enlace externo

Separador temático: <hr />

La etiqueta <hr /> está pensada para separar párrafos e indica un cambio de tema. Tradicionalmente, los navegadores han mostrado este separador como una línea horizontal.

<p>Quien tiene un amigo tiene un tesoro.</p>

<p>Amigo en la adversidad, es amigo de verdad.</p>

<hr />

<p>Cuando marzo mayea, mayo marcea.</p>

<p>La primavera la sangre altera.</p>
ERROR (no puede mostrarse el objeto)
Enlace externo

Preformateado: <pre>

La etiqueta <pre> se utiliza cuando se quiere conservar los espacios en blanco y los saltos de línea del texto original. En el resto de etiquetas, los navegadores no muestran ni las líneas en blanco ni varios espacios en blanco seguidos.

Un bloque preformateado <pre> se muestra con la familia de fuente monospace (normalmente, el tipo de letra es Courier).

El ejemplo siguiente muestra como se puede imitar una tabla usando la etiqueta <pre>. Como en esa etiqueta se respetan los espacios en blanco, se puede conseguir que los datos se muestren en columnas alineadas. Sin embargo, si se utilizan etiquetas <p> (una o varios), el navegador no respeta los espacios en blanco o los saltos de línea y se pierde la alineación pretendida.

<pre>País    Continente  Población (2013)
España    Europa         47 millones
India      Asia        1250 millones</pre>

<p>País    Continente  Población (2013)
España    Europa         47 millones
India      Asia        1250 millones</p>

<p>País    Continente  Población (2013)</p>

<p>España    Europa         47 millones</p>

<p>India      Asia        1250 millones</p>
ERROR (no puede mostrarse el objeto)
Enlace externo

El ejemplo siguiente es similar al anterior. La etiqueta <pre> respeta el sangrado, mientras que la etiqueta <p> no lo hace.

<pre>body {
  text-align: justify;
}</pre>

<p>body {
  text-align: justify;
}</p>
ERROR (no puede mostrarse el objeto)
Enlace externo

Bloque de cita: <blockquote>

La etiqueta <blockquote> está pensada para identificar una cita larga, que puede contener varios párrafos u otras etiquetas.

Los navegadores suelen mostrar la etiqueta <blockquote> con márgenes a izquierda y derecha.

<p>Plan de Instrucción Pública de J. Pidal, año 1845. Exposición de motivos</p>

<blockquote>
  <p>Antiguamente eran las universidades independientes entre sí, y hasta del Gobierno mismo: cada cual tenía su régimen, sus estudios, sus métodos y aun sus pretensiones distintas: no sólo disponian arbitrariamente de sus fondos, sino que hasta era también arbitraria en ellas la enseñanza. Ya desde fines del siglo pasado trató el Gobierno de poner diques a semejante anarquía, que, tras del desconcierto general de todas las ciencias, mantenia a éstas en atraso lastimoso, perpetuando rancias ideas, doctrinas desacreditadas y perjudiciales preocupaciones.</p>

  <p>La enseñanza de la juventud no es una mercancía que puede dejarse entregada a la codicia de los especuladores, ni debe equipararse a las demás industrias en que domina sólo el interés privado. Hay en la educación un interés social, de que es guarda el Gobierno, obligado a velar por él cuando puede ser gravemente comprometido. No existe entre nosotros ley alguna que prescriba la libertad de enseñanza; y aun cuando existiera, debería, como en todas partes, sujetarse esta libertad a las condiciones que el bien público reclama, siendo preciso dar a los padres aquellas garantías que han menester cuando tratan de confiar a manos ajenas lo mas precioso que tienen, y precaverlos contra las brillantes promesas de la charlatanería, de que por desgracia se deja harto fácilmente seducir su credulidad y mal aconsejado cariño.</p>
</blockquote>
ERROR (no puede mostrarse el objeto)
Enlace externo

Ilustración: <figure>

Por escribir

Pie de ilustración: <figcaption>

Por escribir

Contenido principal: <main>

La etiqueta <main> se utiliza para agrupar el contenido principal de una página, sin incluir los elementos comunes a otras páginas como bloques de navegación, información general del sitio, etc.

Sólo debe haber un elemento <main> por página y no debe estar incluido en otras etiquetas (como mucho, podría estar incluido en una sección <section>).

El elemento <main> agrupa contenido, pero no define secciones en el esquema de la página.

La imagen siguiente muestra una página con un elemento <main> (el elementos <header> podría estar incluido en <main>):

header nav main article article aside footer