Seleccionar página
HTML5 es la más reciente evolución del estándar que define el lenguaje HTML. El término representa dos conceptos distintos: es la nueva versión del lenguaje HTML con nuevos elementos, atributos y comportamientos, y un conjunto más grande de tecnologías que permite sitios y aplicaciones Web más diversas y poderosas.

Un típico documento HTML5 contiene las siguiente partes como mínimo:

Se requiere especificar el atributo lang en la etiqueta de apertura <html>, en este caso es por español, pero si el contenido fuera en otro idioma, se deberá especificar ahí mismo, por ejemplo en en inglés o fr para francés.

A continuación agregaremos las etiquetas de encabezado o <head>:

Dentro de las etiquetas <head> se agregarán el título de la página, las etiquetas META con diversa información sobre el sitio, scripts, estilos, enlaces externos, etc. Lo que se escriba entre las etiquetas <head> no aparecerá directamente en la página, sin embargo, alguna información como el título aparecerá en el encabezado del navegador del usuario visitante, así como el favicon aparecen también en el navegador.

Después agregaremos la etiqueta <body>, que representa toda la parte visible del documento:

Procedamos ahora a agregar la información dentro de las etiquetas principales:

El ejemplo anterior contiene ya muchas de las etiquetas que pueden formar parte de la nueva estructura de HTML5. Existen más etiquetas de formato como <hgroup> dentro de <header> y <figure> y <figcaption> para las imágenes.

Aquí hay una lista parcial:

<header> Este elemento presenta información introductoria y puede ser aplicado en diferentes secciones del documento. Tiene el propósito de contener la cabecera de una sección pero también puede ser utilizado para agrupar índices, formularios de búsqueda, logos, etc…

<nav> Este elemento indica una sección de enlaces con propósitos de navegación, como menús o índices. No todos los enlaces dentro de una página web tienen que estar dentro de un elemento <nav>, solo aquellos que forman partes de bloques de navegación.

<section> Este elemento representa una sección general del documento. Es usualmente utilizado para construir varios bloques de contenido (por ejemplo, columnas) con el propósito de ordenar el contenido que comparte una característica específica, como capítulos o páginas de un libro, grupo de noticias, artículos, etc…

<aside> Este elemento representa contenido que está relacionado con el contenido principal pero no es parte del mismo. Ejemplos pueden ser citas, información en barras laterales, publicidad, etc…

<footer> Este elemento representa información adicional sobre su elemento padre. Por ejemplo, un elemento <footer> insertado al final del cuerpo proveerá información adicional sobre el cuerpo del documento, como el pie normal de una página web. Puede ser usado no solo para el cuerpo sino también para diferentes secciones dentro del cuerpo, otorgando información adicional sobre estas secciones específicas.

<article> Este elemento representa una porción independiente de información relevante (por ejemplo, cada artículo de un periódico o cada entrada de un blog). El elemento <article> puede ser anidado y usado para mostrar una lista dentro de otra lista de ítems relacionados, como comentarios de usuarios en entradas de blogs, por ejemplo.

<hgroup> Este elemento es usado para agrupar elementos H cuando la cabecera tiene múltiples niveles (por ejemplo, una cabecera con título y subtítulo).

<figure> Este elemento representa una porción independiente de contenido (por ejemplo, imágenes, diagramas o videos) que son referenciadas desde el contenido principal. Esta es información que puede ser removida sin afectar el fluido del resto del contenido.

<figcaption> Este elemento es utilizado para mostrar una leyenda o pequeño texto relacionado con el contenido de un elemento <figure>, como la descripción de una imagen.

<mark> Este elemento resalta un texto que tiene relevancia en una situación en particular o que ha sido mostrado en respuesta de la actividad del usuario.

<small> Este elemento representa contenido al margen, como letra pequeña (por ejemplo, descargos, restricciones legales, declaración de derechos, etc…).

<cite> Este elemento es usado para mostrar el título de un trabajo (libro, película, poema, etc…).

<address> Este elemento encierra información de contacto para un elemento <article> o el documento completo. Es recomendable que sea insertado dentro de un elemento <footer>.

<time> Este elemento se utiliza para mostrar fecha y hora en formatos comprensibles por los usuarios y el navegador. El valor para los usuarios es ubicado entre las etiquetas mientras que el específico para programas y navegadores es incluido como el valor del atributo datetime. Un segundo atributo optativo llamado pubdate es usado para indicar que el valor de datetime es la fecha de publicación