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>

Quien tiene un amigo tiene un tesoro.

Amigo en la adversidad, es amigo de verdad.

Cuando marzo mayea, mayo marcea.

La primavera la sangre altera.

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>

Quien tiene un amigo tiene un tesoro.

Amigo en la adversidad, es amigo de verdad.


Cuando marzo mayea, mayo marcea.

La primavera la sangre altera.

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

<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>
País    Continente Población (2013)
España    Europa        47 millones
India      Asia       1250 millones

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

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

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

body { text-align: justify; }

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>

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

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.

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.

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

Internet Explorer 11 no reconoce la etiqueta <main>.

Correcto en Chrome Correcto en Firefox Incorrecto en Internet Explorer
<main>
  <p>Esto es un párrafo</p>
</main>
main {
  background-color: red;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Esta limitación se puede corregir añadiendo la propiedad display con el valor block.

Correcto en Chrome Correcto en Firefox Correcto en Internet Explorer
<main>
  <p>Esto es un párrafo</p>
</main>
main {
  display: block;
  background-color: red;
}
ERROR (no puede mostrarse el objeto)
Enlace externo