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>, aunque se puede corregir este problema añadiendo la propiedad display con el valor block.

Correcto en Firefox Incorrecto en Internet Explorer Correcto en Chrome
<main>
<p>Esto es un párrafo</p>
</main>

Esto es un párrafo

main {
background-color: red;
}
Correcto en Firefox Correcto en Internet Explorer Correcto en Chrome
<main>
<p>Esto es un párrafo</p>
</main>

Esto es un párrafo

main {
display: block;
background-color: red;
}