Guía básica HTML 5

Descripción

Etiqueta introducida en HTML5. Define el encabezado de la página. Normalmente contiene elementos de identidad del Sitio Web, título principal y frecuentemente el menú principal.

<header>
    <!-- Logo/icono/Título principal/menú de navegación -->
</header>
                

Descripción

Etiqueta introducida en HTML5. Define un conjunto de enlaces para navegar en los contenidos del Sitio o la página. Pueden existir varias etiquetas nav dentro de una misma página, en función de la estructura de contenidos y las necesidades de navegación del Sitio.

<nav>
    <!-- Enlaces de navegación del Sitio Web -->
</nav>
                

Descripción

Etiqueta introducida en HTML5. Define el bloque de contenido principal, en él se encuentra todo el contenido informativo de la página.

<main>
    <!-- Contenido principal -->
</main>
                

Descripción

Etiqueta introducida en HTML5. Define secciones que agrupan grandes bloques de información y contenido.

<section>
    <!-- Gran bloque de contenido -->
</section>
                

Descripción

Etiqueta introducida en HTML5. Define bloques de contenido individual o especifico. Por ejemplo, entradas (posts), sub-temas de un capítulo, notas de una sección de noticias, etc.

<article>
    <!-- Entrada de un blog / apartado de una sección / etc. -->
</article>
                

Descripción

Etiqueta introducida en HTML5. Define el área de pie de página. Suele contener datos de contacto, copyright, enlaces de referencia externos, menús de navegación secundarios, entre otros.

<footer>
    <!-- Datos de pie de página -->
</footer>
                

Descripción

Define un contenedor genérico. Podría decirse que es el contenedor de bloque más elemental. Se recomienda para organizar el contenido al interior de etiquetas de mayor peso semántico como section o article y lograr así mayor control de la estructura de la página mediante CSS.

<div>
    <!-- Fracción de un bloque de contenido -->
</div>
                

Descripción

Similar a div, esta etiqueta podría considerarse como el contenedor in-line más elemental. Se emplea para agrupar otros elementos en línea o definir bloques específicos dentro de ellos, por ejemplo, etiquetar un fragmento de texto dentro de un párrafo. Facilita la implementación precisa de estilos a elementos in-line puntuales mediante CSS.

<span>
    <!-- Fragmento de texto o grupo de elementos in-line -->
</span>