Estructura HTML5

<figure>

<footer>

<article>

<section>

<nav>

ESTRUCTURA CON HTML5

Estructura y agrupa el contenido por su significado y relación entre la información.

Elementos de HTML 5

<header>

En esta etiqueta colocaremos:

<header>

Encabezado de la página

• Título principal de la página <h1>
• Logotipo de la empresa o persona
• Menú de navegación principal <nav>
• Redes sociales

En este elemento de html estructuraremos:

<nav>

Menú de navegación principal

• Vínculos o anclas <a> a otras páginas web o a otras secciones de la misma página
• Solamente podemos usar un <nav> por página web
• En caso de requerir un menú alterno de navegación insertamos un <aside>

En este etiqueta de html insertaremos:

<section>

Contenido relacionado con un tema

• Encabezado del tema se etiqueta con <h2>
• Contenido relacionado a un mismo tema.
• El contenido se etiqueta con párrafos <p> o listas ordenadas <ol>, desordenadas <ul> o de definición <dl>
• Si requerimos dividir los temas en subtemas agregamos artículos <article>

En este etiqueta de html integraremos:

<article>

Contenido organizado por subtemas

• Encabezado del subtema se etiqueta con <h3>
• Contenido organizado por subtemas relacionados al tema de un <section>

En este etiqueta de html integraremos la siguiente información:

<footer>

Pie de página

• Copyright o Licencia de creative commons
• Año de creación de la página
• Aviso de privacidad
• Nombre del desarollador o diseñador
• Datos de contacto (teléfono, correo, dirección)

• Redes sociales (vínculo a los sitios)
• Vínculos a otros sitios web

En este etiqueta de html insertaremos:

<figure>

Contenido relacionado con material gráfico

• Imágenes, gráficas e ilustraciones <img> que acompañen el contenido de los textos
• Videos en tres formatos: webm, ogv y mp4
• Audios en tres formatos: ogg y mp3
• Imágenes, vídeos y audios pueden llevar un texto al pie de cada elemento para describirlo y se usa un <figcaption>