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.
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>
La etiqueta vacía <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>
La etiqueta <pre> se utiliza cuando se quiere conservar los espacios en blanco, los saltos de línea y los tabuladores 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 (En Windows, el tipo de letra suele ser Consolas).
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>
El ejemplo siguiente es similar al anterior. La etiqueta <pre> respeta el sangrado y los saltos de línea, mientras que la etiqueta <p> no lo hace.
<pre>body {
text-align: justify;
}</pre>
<p>body {
text-align: justify;
}</p>
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 disponían 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>
Por escribir
Por escribir
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>).
La imagen siguiente muestra una página con un elemento <main> (el elementos <header> podría estar incluido en <main>):