Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. HTML5

La Verdad Sobre Múltiples Etiquetas H1 en la Era de HTML5

by
Length:LongLanguages:

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

Ya seas un desarrollador o un diseñador web, es muy probable que te hayan preguntado o hayas tenido que  responder a una pregunta con mucha frecuencia a lo largo de los años. ¿Cuántas etiquetas <h1> puedo usar en cada página, y cómo debería implementarlas?

Generalmente hay dos motivos para hacerse esta pregunta. El primero y el más común tiene que ver con el SEO; asegurarse de que el contenido está formateado de la mejor forma posible para facilitar la indexación de los motores de búsqueda. La segunda es la corrección técnica; asegurarse de que el código que define la estructura de una página está escrito conforme a los estándares de las especificaciones de W3C.

Con la llegada de HTML5 la respuesta a esta pregunta ha cambiado de forma significativa tanto en lo concerniente al SEO como a los aspectos técnicos. Ahora no solo es posible disponer varias etiquetas de nivel <h1> dentro de una misma página haciendo que tenga sentido para los motores de búsqueda, sino que actualmente está recomendado en la mayoría de los casos.

Sin embargo, como la especificación HTML5 todavía no goza de una amplia comprensión, todavía existen muchos consejos flotando por ahí, algunos incluso escritos bastante recientemente, que se basan en las reglas del diseño web anterior a HTML5.

En este tutorial vamos a aclarar algunas confusiones. Veremos en profundidad qué implica HTML5 en el uso de las etiquetas <h1>, asimismo veremos cómo puedes aprovechar las mejoras disponibles para crear páginas web más ricas semánticamente y mejor estructuradas que nunca.


La Antigua Regla “Solo una Etiqueta"

Durante mucho tiempo se consideró como regla cardinal de HTML y de SEO que cada página individual solo debería tener un titular de nivel <h1>, y solo uno. Además, la regla prescribió que este único titular <h1> debería hacer referencia al tema principal de la página.

Generalmente esta regla se seguía con el objetivo de ayudar a que los motores de búsqueda entendiesen el tema principal de cada página, de forma que pudiesen determinar su relevancia para varias frases de búsqueda, mejorar la precisión de los resultados ofrecidos por los buscadores y en consecuencia mejorar el posicionamiento de las páginas de calidad, creadas y estructuradas adecuadamente.

Tomemos como ejemplo una página web de empresa anterior a la aparición de HTML5. En este ejemplo el nombre de este sitio web empresarial se muestra en la sección del encabezado de todas las páginas, la página de inicio presenta una descripción de la empresa, y en otra área de la web hay publicados artículos especializados.

Siguiendo la regla de la "etiqueta <h1> única", la página de inicio del sitio web aplica etiquetas <h1> en ell nombre de la empresa que aparece en la sección del encabezado o “header”, indicando que el tema principal de esa página es la propia empresa.

Sin embargo, en un artículo publicado en otro lugar de este mismo sitio web, las etiquetas <h1> son eliminadas del nombre de la empresa en el header y en su lugar se usa el título del artículo correspondiente. Eso se hace porque el título del artículo proporciona una etiqueta más representativa del tema principal de la página en cuestión, que ahora es el contenido del artículo en contraposición a la descripción de la empresa que aparecía en la página de inicio.

Por tanto, la versión pre-HTML5 de este sitio web estaría marcada de una forma parecida a esto:

html4markup

Por Qué Son Importantes los Titulares: Describen el Documento

A pesar de que durante un largo tiempo la atención se ha centrado en las etiquetas <h1>, nunca han sido un elemento que funcionase de forma aislada e independiente del resto del documento. Existe una razón tras la importancia de la cuidadosa ubicación de la etiqueta, tanto en la era HTML5 como en la pre-HTML5, se trata de la generación de un esbozo de los temas principales que se tocan en el documento.

Document outlines are something akin to a table of contents for a website. They are automatically generated from the markup on any given webpage.

Antes de la parición de HTML5, los titulares de un documento se generaban a partir del uso de las etiquetas <h1> hasta la <h6>. Cada uso de un titular implica el inicio de una nueva sección de contenido.

Toma como ejemplo el siguiente html, observa la ubicación de las etiquetas <h1>, <h2>, y <h3>, que determinarán la estructura del documento:

El código de arriba, antes de la aparición de HTML5, habría generado la siguiente estructura de documento:

  • 1. (documento) El uso adecuado de los cacahuetes
    • 1. (h2) Cómo comer cacahuetes
      • 1. (h3) Métodos Expertos de comer cacahuetes
    • 2. (h2) Uso incorrecto de los cacahuetes

El primer elemento <h1> es considerado como la etiqueta de todo el documento. Los siguientes titulares son considerados como etiquetas para las secciones del contenido del documento, creando una estructura jerárquica en forma de árbol en el mismo.

El ejemplo anterior es bastante sencillo, pero las páginas web reales rara vez lo son. Cuando necesitamos presentar contenido más complejo con código anterior a HTML5 nos encontramos con grandes dificultades, y la razón es que anteriormente solo podíamos usar un titular de nivel <h1> por página.

En el ejemplo anterior solo se expone un único tema: “El empleo adecuado de los cacahuetes”. Pero, ¿qué sucedería si la exposición del tema se presentase en una página compuesta por otros artículos de igual importancia como suele ocurrir en las páginas de archivo de un blog?

Observa este html que contiene un segundo artículo, (cada artículo está envuelto entre dos etiquetas <div>):

Antes de la aparición de HTML5, este código habría generado la siguiente estructura de titulares:

  • 1. (documento) El uso adecuado de los cacahuetes
    • 1. (h2) Cómo comer cacahuetes
      • 1. (h3) Métodos Expertos de comer cacahuetes
    • 2. (h2) Uso incorrecto de los cacahuetes
  • 2. (h1) Hervir judías
    • 1. (h2) ¿Merece verdaderamente la pena hervir las judías?

Ahora, aunque existen en la página dos artículos con igual importancia, el primer titular, "The proper use of peanuts" todavía se interpreta como la etiqueta que representa a todo el documento simplemente porque es la que aparece en primera posición. Esto significaría por tanto que la temática de todo el documento es "The proper use of peanuts", aunque el segundo artículo versa sobre un asunto totalmente distinto.

El método habitual de evitar esto consistía en crear un titular que englobase al resto dentro de las etiquetas <h1> de primer nivel  siempre que existiesen secciones de contenido con igual importancia, intentando con ello representarlas a todas en la medida de lo posible. Como ocurre en el siguiente ejemplo:

Observa la adición del titular genérico con etiqueta <h1>, y la estructura formada a través de cada uno de los siguientes titulares de nivel inferior.

Ahora la estructura del documento generada a partir de sus titulares sería la siguiente:

  • 1. (documento) Blog Literario Sobre las Leguminosas
    • 1. (h2) El uso adecuado de los cacahuetes
      • 1. (h3) Cómo comer cacahuetes
        • 1. (h4) Métodos Expertos de comer cacahuetes
      • 2. (h3) Uso incorrecto de los cacahuetes
    • 2. (h2) Hervir judías
      • 1. (h3) ¿Merece verdaderamente la pena hervir las judías?

Problemas Ocasionados por la Estructura de Documento Previa a HTML5

Aunque esta estructura de titulares de documento era lo mejor que se podía hacer antes de la aparición de HTML5, presentaba algunos problemas importantes:

  • La etiqueta general para el conjunto de la página debilita su relevancia.
    Tenemos el titular "Legume Literature Blog" entre etiquetas <h1> y haciendo la función de titular general para toda la página, pero su texto representa de forma muy vaga el contenido. Esto disminuye la capacidad de los motores de búsqueda para interpretar la temática real de la página y la relevancia como respuesta a las adecuadas frases de búsqueda.
  • Los artículos independientes son vistos como subsecciones de una única pieza e contenido.
    No hay forma de distinguir los dos artículos en la misma página como algo independiente, de igual importancia y entidades por sí mismas. Ambas son concebidas como partes de una única pieza de contenido global, aunque no lo sean.
  • Se necesita diferente código de estructura para distintas áreas del sitio web.
    Para que un visitante vea cada uno de los artículos como algo independiente, como se puede hacer en un blog típico, el código de la estructura debería rehacerse de forma que las etiquetas <h1> sean aplicadas los titulares del artículo en lugar de al título de del sitio web, tal y como he mostrado en el apartado anterior a través del ejemplo de la web de mi propia empresa.
  • Existen multitud de restricciones en lo que respecta a la naturaleza de la etiqueta de un documento o título del sitio web.
    Aquí es donde HTML5 nos asiste magníficamente para resolver cada uno de estos problemas. En muchas situaciones el título de un sitio web, que tiende a jugar el papel de etiqueta para el documento incluso en HTML5, no está relacionado con su contenido en cuanto al significado. Por ejemplo, podría crear un blog con cuyo título de sitio fuese “Kezz Says” y podría publicar en él un artículo sobre código HTML y otro sobre cachorritos monos. En este caso no tendría sentido que el título del sitio se interpretase como representativo de ninguno de estos artículos, así que tendría que cambiar el nombre de mi blog. Esto podría suponer un problema, especialmente si el sitio web desea promocionarse por medio de un nombre de marca memorable, aunque no tenga necesariamente ningún significado.

Aquí es donde resulta útil HTML5 al resolver cada uno de estos problemas.


El Algoritmo HTML5 de la Estructura del Documento

Si reflexionas sobre cada uno de los problemas que acabamos de describir, todos ellos tienen un origen común y bastante simple: Asumen que cada página web es un documento independiente con una temática única que solo necesita una etiqueta.

Una solución igualmente sencilla a estos problemas estaría en la posibilidad de indicar cuando una página web cuenta con secciones independientes, que en potencia puedan versar sobre distintos temas y cada una con una etiqueta significativa propia.

Si fuese posible especificar que los artículos contenidos en una página son independientes entre sí, se podrían etiquetar con titulares significativos que representasen apropiadamente sus respectivos contenidos, y dar a cada uno la misma importancia.

Si fuese posible aclarar cuando el título de un sitio no representa el contenido de la página, el problema de la pérdida de relevancia estaría resuelto.

Con la introducción de una clara indicación sobre las diferencias entre el título del sitio, los artículos y los títulos de los artículos, ya no sería necesario cambiar la estructura el código de un área a otra. Un titulo para el sitio web con la etiqueta <h1> podría mantener el resto de etiquetas <h1> en el resto del sitio.

Y como se dejaría claro cuando el título del sitio no representa el contenido del artículo en la página, podríamos establecer que fuese cualquier cosa que deseásemos, incluso algo muy abstracto.

HTML5 posibilita todas estas cosas mediante la introducción de sus elementos semánticos y el algoritmo HTML5 que define la estructura del documento.

Aspectos clave del Algoritmo HTML5 para la Estructura del Documento 

Mientras la estructura de documento previa a HTML5 estaba formada casi exclusivamente por etiquetas de titulares, el algoritmo de la estructura HTML5 usa los siguientes aspectos clave:

  • Sección raíz: Una sección raíz es un contenedor que proporciona un espacio para otras distintas secciones de contenido que serán definidas en él. Cada una de estas secciones obtendrá su propia estructura de contenido. El elemento de sección de nivel superior en cualquier página está formado por sus etiquetas <body>, de manera que siempre habrá una estructura generada para cada página de la web, empezando por las etiquetas <body> y continuando con las secciones en las que se divide.
    • Etiquetas raíz para las secciones: <body>, <blockquote>, <figure>, <td>, <details>, <dialog>, <fieldset>
  • Secciones del contenido: Cada sección raíz está dividida en una serie de secciones de contenido. Estas secciones se crean colocando etiquetas para elementos de secciones de contenido alrededor de distintas piezas del mismo. Los elementos para las secciones de contenido son semánticas y se pueden anidar. Dependiendo del tipo de contenido que vayas a presentar deberás usar unas u otras. (veremos cómo usar cada elemento para las secciones de contenido más adelante).
    • Etiquetas para las secciones de contenido: <section>, <article>, <nav>, <aside>
  • Contenido de titulares: Etiquetas de texto para las secciones de contenido. En ausencia de etiquetas de sección de contenido, la presencia de una etiqueta seguirá siendo interpretada como el inicio de una nueva sección de contenido.
    • Etiquetas para los titulares: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>

Entender cómo se emplean estos aspectos de HTML5 es relativamente fácil, y normalmente el proceso funciona de la siguiente manera:

  1. La sección raíz del documento está formada por sus etiquetas <body>.
  2. Dentro de esta sección raíz, el documento se divide en otras subsecciones de contenido, por ej. enmarcando los artículos dentro de etiquetas <article>.
  3. Las etiquetas de los titulares se colocan según se necesiten dentro de estos contenido, con la primera etiqueta de encabezado de cualquier sección actuando como etiqueta (label) de dicha sección.

Existen muchos otros aspectos en lo que respecta al algoritmo de la estructura del documento con HTML5. Existe amplia información sobre este tema en W3C.

En cualquier caso, los aspectos que hemos listado arriba son suficientes para resolver los problemas descritos en la primera parte de este tutorial.

Resolviendo los Viejos Problemas de la Estructura del Documento

Echemos otro vistazo a nuestro “Blog Dedicado a las Legumbres”, ya que su estructura podría crearse con código HTML5. Hemos realizado las siguientes sencillas modificaciones:

  1. 1. Hemos añadido <!DOCTYPE html> para invocar HTML5.
  2. 2. Se han añadido etiquetas <article> para envolver cada artículo, en sustitución de las etiquetas <div> habituales.
  3. 3. En los titulares de los artículos se han cambiado las etiquetas de <h2> a <h1>.
  4. 4. Las otras etiquetas en cada artículo se han actualizado en consecuencia aumentando un nivel.
  5. 5. Se usa un título para el sitio sin significado y cuyo propósito es el branding.

Ahora el algoritmo de la estructura HTML5 del documento nos proporciona lo siguiente:

  • 1. (documento) ¡Whackamoon legumbres!
    • 1. (article) Uso adecuado de los cacahuetes
      • 1. (h2) Cómo comer cacahuetes
        • 1. (h3) Métodos Expertos de comer cacahuetes
      • 2. (h2) Uso incorrecto de los cacahuetes
    • 2. (article) Hervir judías
      • 1. (h2) ¿Merece verdaderamente la pena hervir las judías?

Lo primero que notarás será el aspecto del elemento (article) en la estructura, y junto a ellos los encabezados para cada uno de nuestros artículos.

Advierte que en HTML5, las etiquetas <article> se usan específicamente para indicar “una composición completa, o contenida de forma independiente en un documento, página, aplicación, o sitio web y en principio es eso, distribuido de forma independiente o reusable, por ejemplo en una sindicación de contenido. Podría tratarse de una publicación en un foro, un artículo de una revista o un periódico, una entrada en un blog, el comentario enviado por un usuario, un widget o un gadget, o cualquier pieza de contenido independiente.”  (fuente: W3C)

La aparición del elemento (article) junto a los encabezados de nuestros artículos, en lugar de las etiquetas de encabezado que usábamos y vimos antes, nos indican que ahora en la estructura están ocurriendo las siguientes cosas:

  • Cada artículo ha sido reconocido como una pieza independiente de contenido con igual importancia entre sí.
  • Que los encabezados del artículo se están emparejando ahora correctamente con sus respectivos artículos con etiquetas significativas y que representan su temática.
  • Como los artículos están etiquetados correctamente con sus propio e idóneos encabezados, el título del sitio web ya no es interpretado como representativo del contenido de dichos artículos.

Esto significa que todos los problemas que hemos señalado anteriormente han sido resueltos de inmediato:

  • Resuelto: La etiqueta genérica para toda la página que reduce la relevancia.
    Ya no tenemos la disminución de la relevancia de las etiquetas genéricas, ya que la etiqueta de cada artículo está claramente en relación con él.
  • Resuelto: Los artículos independientes son vistos como subsecciones de una única pieza de contenido.
    La página ya no es vista como una sola pieza de contenido, ya que la presencia de las etiquetas article indican los lugares en los que la página se divide en secciones independientes.
  • Resuelto: Se requiere distinto código de marcado de estructura para distintas áreas del sitio web.
    Como todas las etiquetas <h1> usadas en le código se interpretan ahora correctamente, y ya no tenemos que preocuparnos sobre las etiquetas que disminuyen la relevancia, no necesitamos aplicar ya distintas etiquetas al título del sitio, este puede permanecer con la etiqueta de nivel <h1>.
  • Resuelto: Existen restricciones en la naturaleza de la etiqueta del documento o título del sitio web.
    Como el título del sitio ya no se interpreta como etiqueta para el contenido del artículo, somos libres para establecerlo a lo que más nos guste. Ya no tiene que actuar más como algo representativo de todo el contenido de la página, de forma que puede ser un título abstracto o cuyo objetivo sea el branding y que no tenga ninguna relación con el contenido del artículo.

Por Qué Multiples Etiquetas <h1> Son Correctas

Puedes incluso ver ahora en la estructura HTML5 del documento generada por tu código que permite perfectamente usar tantas etiquetas <h1> como requiera tu documento; es decir una por sección raíz o sección de contenido.

También puedes comprobar en este ejemplo cómo sería menos correcto usar un único conjunto de etiquetas <h1> aquí, y que multiples grupos de etiquetas <h1> representan el contenido de forma más adecuada.

Si todavía tienes etiquetas <h1> aplicadas únicamente al título del sitio, y etiquetas <h2> aplicadas a los títulos de tu artículo, la estructura de tu artículo no será aplicada de forma efectiva.

Esto es así porque al marcar los encabezados de tu artículo con etiquetas <h2> estás indicando que son encabezados con etiquetas de nivel 2, incluso aunque sean realmente encabezados de primer nivel dentro de la sección <article>.

En su lugar, los encabezados de segundo nivel de tus artículos serán necesariamente marcados como etiquetas <h3>, y establecidos incorrectamente como de tercer nivel, y tus encabezados de tercer nivel con etiquetas <h4>, y así consecutivamente.

En la especificación HTML5 es posible usar encabezados de nivel inferior <h1> apara las etiquetas de una sección, y en ocasiones lo podrías querer así por razones de presentación, como para mostrar encabezados de menor tamaño en la sección de una columna lateral que presenta todas las entradas de un blog. Sin embargo, te recomiendo hacer esto solo en secciones no principales, que no pertenezcan a secciones de contenido o de artículos de tu sitio web e los que no sea una prioridad el nivel de los encabezados para crear una estructura que conforme una tabla de contenidos eficaz.

Lo mejor que puedes hacer en cualquier caso es considerar cuidadosamente y de antemano el contenido, y determinar la mejor forma de estructurar las secciones y etiquetarlas basándote en lo que conoces ahora sobre el algoritmo HTML5 para la estructuración del documento.


Nuevas Reglas de Uso de la Etiqueta <h1>

Sí, es cierto. Ahora puedes usar muchos grupos de etiquetas <h1> según te convenga, mediante HTML5. Pero eso no significa que las puedas añadir libremente en ubicaciones arbitrarias.

Al igual que existían reglas para el empleo de las etiquetas <h1> que venían de la antigua estructura para el documento, también existen ahora nuevas reglas basadas en el algoritmo HTML5 para la estructura del documento.

Aquí las tienes listadas brevemente:

  • Usa un conjunto de etiquetas <h1> por sección raíz o sección de contenido.
  • Siempre debería haber un titular de nivel <h1> entre la etiqueta de apertura <body> y la primera sección de contenido
  • Cuando un encabezado con nivel <h1> se usa para etiquetar una sección de contenido, debería ser el primer encabezado que aparezca en la sección, porque el primer encabezado siempre se interpretará como etiqueta de sección.
  • Si se usa un encabezado de nivel <h1> para etiquetar una sección, cualquier otro encabezado que uses en ella debe ser de nivelo inferior para crear una estructura de documento adecuada.

Como he mencionado anteriormente, las etiquetas de las secciones no tienen que ser obligatoriamente etiquetas <h1>. La especificación HTML5 permite que cualquier etiqueta de encabezado funcione como etiqueta de sección, desde <h1> hasta <h6>. Sin embargo, nuevamente, siempre recomiendo usar etiquetas de nivel <h1> para la estructura del contenido de un artículo.

Pero si decides usar una etiqueta distinta a <h1> para la etiqueta de una sección, asegúrate de seguir las mismas reglas que hemos enumerado aquí arriba, sustituyendo <h1> en cada regla con la etiqueta que hayas elegido.


Sobre las Etiquetas para Secciones de Elementos de Contenido

Existen solo cuatro grupos de etiquetas para elementos que puedes usar para denotar una secciones de contenido dentro de tu página web, aunque puede resultar un poco confuso comprenderlas al principio.

Son las siguientes:

  • <article>
  • <section>
  • <nav>
  • <aside>

Las dos que probablemente más vayas a usar son las etiquetas <article> y <section>. Son muy similares entre sí, pero con una diferencia importante. Son bastante similares entre sí, pero con una diferencia importante.

Las etiquetas <article> deberían usarse en los lugares en los que una pieza de contenido pueda extraerse completamente de la página y esta siga teniendo por sí misma sentido aún sin ir acompañada del contenido de su anterior contexto.

Las etiquetas <section>, al contrario, deberían usarse para aquel contenido que está agrupado con el resto por su temática, y que sólo tiene sentido dentro del contexto del contenido que lo rodea.

Si quieres ver detallados ejemplos sobre cómo usar cada una de estas etiquetas, tómate un momento para consultar estas páginas de W3C:

Las etiquetas <nav> están diseñadas para indicar grandes bloques de navegación en una página web, como por ejemplo una barra de menú de navegación o una paginación. No debería aplicarse a los enlaces comunes, únicamente a las secciones significativas que están totalmente dedicadas a la navegación.

Las etiquetas <aside> podrían realmente describirse como “todo lo demás”, es decir para denotar elementos del contenido que no son ni artículos, ni secciones ni navegación. W3C prescribe el uso de esta etiqueta en las ocasiones en las que algo está relacionado con el contenido que lo rodea de forma tangencial, pero está separado del contenido principal de la página, por ejemplo, las columnas laterales o “sidebars”, los “blogrolls”, etc.

Para ampliar la información sobre las etiquetas <nav> y <aside> consulta las siguientes páginas:


Consejo Rápido: Trabajar con Titulares

Ahora sabemos que con HTML5 podemos usar felizmente etiquetas <h1> para los titulares de en cualquier área de nuestro sitio. Sin embargo, a pesar de ser una práctica bastante común, en términos técnicos, las etiquetas <h1> no deberían usarse para subtitulares ni para lemas o eslóganes.

W3C comenta lo siguiente:

Los elementos h1-h6 no deben ser empleados para etiquetar los subencabezados, subtitulares, ni titulares o eslóganes alternativos a menos que su propósito sea el de funcionar a modo de encabezado para una nueva sección o subsección.

La razón de esto es que la estructura HTML5 del documento siempre interpreta las etiquetas de encabezado como el inicio de una nueva sección de contenido, con independencia de que existan etiquetas de sección de contenido o no.

Durante un tiempo existió un atajo alternativo para esto en el que las etiquetas <h2> podían ser empleadas para un subtitular si estaba agrupado junto con el titular principal, entre etiquetas <hgroup>. Sin embargo, la etiqueta <hgroup> ha sido eliminada en la especificación HTML5 y su uso puede causar errores de validación.

Así que ahora la mejor forma de gestionar los subtitulares es mediante etiquetas <div> o <p> y usando CSS para que tengan el aspecto necesario, consiguiendo la presencia deseada sin afectar negativamente la estructura de tu documento.


Otros Elementos HTML5 Que Puedes Usar

En este tutorial nos hemos centrado en las etiquetas <h1> de HTML5 y en cómo funciona el nuevo algoritmo de la estructura del documento. Por eso no he tocado ningún otro elemento HTML5 que no tenga relación con el algoritmo de la estructura del documento.

Sin embargo, sería una falta por mi parte no indicarte la dirección correcta en lo que respecta a algunas de las etiquetas HTML5 más útiles que podrías usar en tu código para hacerlo más rico desde el punto de vista semántico.

El Elemento <main>

Se debería usar el elemento <main> una única vez por página para señalar cuál es su contenido principal.

Si estás mostrando un grupo de artículos, esta etiqueta debería envolverlos a todos ellos. Como sucede en este ejemplo:

Más información: El elemento main (artículo original en inglés).

El Elemento <header>

El elemento <header> se puede usar al principio de cualquier sección raíz, o sección de contenido, para agrupar contenido introductorio para dicha sección.

Podrías usarlo para contener el título y el eslogan de tu sitio web, o el título de un artículo o de una categoría del blog. Por ejemplo:

Más información: El Elemento Header

El Elemento <footer>

El elemento <footer> es básicamente lo opuesto a al elemento <header>, es decir, puede usarse al final de cualquier sección raíz, o sección de contenido para agrupar contenido complementario para esa sección.

W3C recomienda su uso para elementos como la información del autor, enlaces, los mensajes de copyright, etc. Por ejemplo:

Más información: El Elemento Footer


Resumiendo

En conclusión, echemos un vistazo al sitio web de nuestra empresa y observemos cómo podría estructurarse usando las etiquetas que acabamos de explicar:

html5markup

Este sencillo ejemplo muestra lo fácil que es usar un comprensible algoritmo HTML5 de documento para resolver los viejos problemas suscitados por las etiquetas <h1>, y asegurarnos que el contenido de tus páginas web se transmite de forma más precisa y adecuada.

Lecturas recomendadas

Herramientas recomendadas

  • Headings Map 2.0.5 para Firefox - "Las extensiones generan un mapa del contenido o índice a partir de cualquier documento web estructurado con titulares o con secciones en HTML5. Muestra la estructura de titulares, los errores de la estructura (por ej. niveles incorrectos), y sirve también para desvelar la estructura HTML5.
  • HTML5 Outliner para Chrome - "Esta extensión está usando el algoritmo de estructura de HTML5 para crear una tabla de contenidos. Es posible hacer clic sobre la tabla de contenidos y la herramienta intenta, también, resaltar el titular o la sección en cuestión tras dirigirnos a él.
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.