HTML. Secciones (1)

En esta lección se comentan las etiquetas "clásicas" de secciones: <body>, los títulos <h1> a <h6> y dirección <address>.

En la lección Secciones (2) se comentan las etiquetas de secciones que se introdujeron en HTML 5.

Cuerpo del documento: <body>

La etiqueta <body> abarca todo el contenido de la página web que se visualiza en el navegador. Por ello, una página web sólo puede tener un elemento <body>.

Títulos: <h1> <h2> <h3> <h4> <h5> <h6>

Las etiquetas <h1>, <h2>, <h3>, <h4>, <h5> y <h6> están pensadas para marcar los títulos y subtítulos de los apartados de un documento.

La hoja de estilo por omisión de los navegadores suele mostrar los títulos en tamaño cada vez más pequeño (incluso más pequeño que el tamaño de los párrafos <p>), en negrita y con márgenes mayores que los los párrafos <p>.

<h1>Título 1</h1>

<h2>Título 2</h2>

<h3>Título 3</h3>

<h4>Título 4</h4>

<h5>Título 5</h5>

<h6>Título 6</h6>
ERROR (no puede mostrarse el objeto)
Enlace externo

En principio, los títulos <h1>, ..., <h6> se deben utilizar de forma jerárquica, es decir, no saltándose niveles y utilizando títulos del mismo nivel para contenido de la misma categoría (apartados principales, subapartados, etc.).

Hasta que los navegadores implementen el concepto de esquema (outline), los títulos <h1>, ..., <h6> definen de forma implícita las secciones anidadas en el esquema (outline) de la página web, como muestra el ejemplo siguiente, en el que las secciones implícitas están marcadas con un trazo discontinuo.

h1 h2 h3 h2 h3


Si algún día los navegadores implementan el concepto de esquema (outline), las etiquetas de secciones <article>, <section>, <nav> y <aside> también crearán secciones en el esquema de la página web y las etiquetas de título se interpretarán teniendo en cuenta la sección en que están incluidas. Así, el documento siguiente será equivalente al anterior.

h1 section h1 section h4 section h6 section h1

Dirección <address>

La etiqueta <address> está pensada para contener información de contacto del autor de la información (dirección de correo, teléfono, etc.), pero no otro tipo de información. Normalmente se incluye en el pie de página <footer> general de <body> o en el pie de página <footer> de un <article>.

La hoja de estilo por omisión de los navegadores suele mostrar el bloque de dirección <address> en cursiva.

<footer>
  <address>
    Autor: Bartolomé Sintes Marco<br>
    correo: bartolome.sintes@example.com
  </address>

  <p>Última modificación: 28 de noviembre de 2017</p>
</footer>
ERROR (no puede mostrarse el objeto)
Enlace externo