Índice

Dos ejemplos de estructura semántica de página

He aquí una estructura semántica muy sencilla con un primer ejemplo.

images/C05-002.png

Tenemos:

  • Un encabezado <header> en la parte superior, con un logotipo y un eslogan, por ejemplo.

  • Una barra de navegación <nav> en la parte izquierda de la página.

  • Toda la actualidad del sitio puede situarse en elementos <article>.

  • Por último, el pie de página <footer> podrá contener las menciones legales, los enlaces de contacto, etc.

He aquí una segunda estructura más elaborada.

images/C05-003.png

Tenemos:

  • Un encabezado <header> en la parte superior.

  • Debajo, una barra de navegación <nav> para la navegación general en el sitio, para navegar de página en página.

  • En la parte izquierda, una segunda sección <nav> se utiliza para la navegación secundaria, para los enlaces vinculados directamente con el contenido de la página que se está mostrando.

  • En la parte derecha, un elemento <aside> que muestra información vinculada con el contenido de la página, como enlaces promocionales, contenidos relacionados...

  • El contenido de la página se muestra en dos elementos <section> que permiten de este modo diferenciar ambos contenidos. Cada <section> contiene un elemento <article> para el contenido de texto y un elemento <aside> para mostrar elementos de información complementaria vinculados con el artículo (iconografía, enlaces...).

  • Por último, ...