HTML5, la última versión del Hypertext Markup Language (HTML), es la versión más radical del lenguaje a la fecha. Esta presenta muchos recursos nuevos en una variedad de áreas. Algunas de las adiciones más notables incluyen:

• Etiquetas integradas multimedia para audio y video
• Un bastidor para dibujar contenido en el navegador
• Formatos más inteligentes que le permiten hacer cosas como validación mediante el uso de un atributo requerido

Con un nuevo conjunto de etiquetas estructurales, HTML5 revisa la forma en que están estructurados los documentos HTML. Las nuevas etiquetas estructurales se enfocan en dividir un documento HTML en partes lógicas. El nombre de la etiqueta describe el tipo de contenido que se pretende que contenga. En este artículo, aprenda sobre estas nuevas etiquetas con más detalle.

Un poco de contexto

Tim Berners-Lee creó el HTML original en 1989 para solucionar las deficiencias de los métodos existentes para acceder a información en Internet. Desde que se concibió, encontrar su camino en Internet era una tarea difícil. El contenido en Internet era tratado como documentos individuales, sin que hubiesen métodos sencillos para navegarlos. En esencia, usted tenía que conocer la dirección del documento que estaba buscando e ingresarla manualmente. Para solucionar este problema, Berners-Lee creó dos tecnologías: Hypertext Transfer Protocol (HTTP) y HTML.

HTTP es un protocolo de servicio utilizado para entregar contenido. El comienzo de un URL en su navegador Web (suponiendo que el navegador muestre el URL completo) muy probablemente comenzará con http://. Esta parte del URL le dice al navegador qué tipo de protocolo usar cuando esté haciendo la solicitud al servidor Web. Cuando el servidor recibe una solicitud de documento, es probable que ese documento esté escrito o sea convertido a HTML. El documento HTML es lo que se envía de regreso al navegador que hace la solicitud.

HTML es un lenguaje de scripting que le dice al navegador Web cómo presentar el contenido. En este contenido puede haber enlaces a otros documentos, proporcionando un método fácil de usar para navegar entre documentos en Internet.

La combinación de HTTP y HTML ofrece una navegación rápida y fácil por el contenido en Internet, al permitirle simplemente hacer clic en los enlaces de texto para navegar entre documentos. Después de crear estas dos tecnologías, Berners-Lee continuó y fundó el World Wide Web Consortium (W3C). El W3C fue la fuerza guía detrás de las cuatro primeras versiones de HTML.

La intención original de Internet era servir documentos de texto simples. Los primeros navegadores todos estaban basados en texto (sin ventanas lujosas — sólo texto en una pantalla). Incluso la adición de imágenes era un gran problema cuando se introdujo al principio. Ahora, las personas hacen de doto, desde enviar mensajes de e-mail hasta ver televisión en Internet. Internet se ha convertido en mucho más que un mecanismo para transportar documentos de texto simples. Con los recursos y usos llegaron nuevos retos y problemas que el lenguaje HTML nunca fue diseñado para manejar.

El W3C intentó resolver los problemas del Internet de hoy con el estándar Extensible Hypertext Markup Language (XHTML) 2.0. Sin embargo, este estándar no fue bien recibido y fue abandonado en gran medida. En el 2004, mientras el W3C se estaba enfocando en el estándar XHMTL 2.0, un grupo llamado el Web Hypertext Application Technology Working Group (WHATWG) comenzó a trabajar en el estándar HTML5, que tuvo una acogida más cálida que el estándar XHTML 2.0. El W3C abandonó el estándar XHTML 2.0 y está trabajando ahora con WHATWG en el desarrollo del HTML5.

Navegadores soportados

Para el momento de este escrito, HTML5 no ha sido lanzado oficialmente. La mayoría del contenido en la Web todavía está siendo escrito para la especificación HTML4. No obstante, varios navegadores incluyen soporte para la especificación HTML5. Como cada navegador puede soportar solo ciertos recursos de HTML5, las cosas se complican un poco. Antes de escribir un sitio basado en HTML5, revise cada uno de sus navegadores objetivo para asegurarse de que soporten los recursos que va a utilizar para su sitio.

Lista de Elementos HTML5

Todos los elementos del estandar HTML5 están listados aquí, descritos por su etiqueta de apertura y agrupados por su función. Contrariamente al indice de elementos HTML  el cual lista todas las posibles etiquetas, estandar, no-estandar, válidas, obsoletas o aquellas en desuso, esta lista solamente los elementos válidos de HTML5. Solamente aquellos elementos listados aquí son los que deberían ser usados en nuevos sitios Web.

El simbolo indica que el elemento fue añadido en HTML5. Nótese que otros elementos listados aqui pueden haber sido modificados o extendido en su significado por la especificación HTML5.

Elemento raíz

Metadatos del documento

Scripting

Secciones

Elemento	Descripción
<body>	Representa el contenido principal de un documento HTML. Solo hay un elemento <body> en un documento.
<section>	Define una sección en un documento.
<nav>	Define una sección que solamente contiene enlaces de navegación
<article>	Define contenido autónomo que podría existir independientemente del resto del contenido.
<aside>	Define algunos contenidos vagamente relacionados con el resto del contenido de la página. Si es removido, el contenido restante seguirá teniendo sentido
<h1>,<h2>,<h3>,<h4>,<h5>,<h6>	Los elemento de cabecera  implementan seis niveles de cabeceras de documentos; <h1> es la de mayor y <h6> es la de menor impotancia. Un elemento de cabecera describe brevemente el tema de la sección que introduce.
<header>	Define la cabecera de una página o sección. Usualmente contiene un logotipo, el título del sitio Web y una tabla de navegación de contenidos.
<footer>	Define el pie de una página o sección. Usualmente contiene un mensaje de derechos de autoría, algunos enlaces a información legal o direcciones para dar información de retroalimentación.
<address>	Define una sección que contiene información de contacto.
<main>	Define el contenido principal o importante en el documento. Solamente existe un elemento <main> en el documento.

Agrupación de Contenido

Elemento	Descripción
<p>	Define una parte que debe mostrarse como un párrafo.
<hr>	Representa un quiebre temático entre parrafos de una sección o articulo o cualquier contenido.
<pre>	Indica que su contenido esta preformateado y que este formato debe ser preservado.
<blockquote>	Representa una contenido citado desde otra fuente.
<ol>	Define una lista ordenada de artículos.
<ul>	Define una lista de artículos sin orden.
<li>	Define un artículo de una lista ennumerada.
<dl>	Define una lista de definiciones, es decir, una lista de términos y sus definiciones asociadas.
<dt>	Representa un término definido por el siguiente <dd>.
<dd>	Representa la definición de los terminos listados antes que él.
<figure>	Representa una figura ilustrada como parte  del documento.
<figcaption>	Representa la leyenda de una figura.
<div>	Representa un contenedor genérico sin ningún significado especial.

Semántica a nivel de Texto

Elemento	Descripción
<a>	Representa un  hiperenlace , enlazando a otro recurso.
<em>	Representa un texto  enfatizado , como un acento de intensidad.
<strong>	Representa un texto especialmente  importante .
<small>	Representa un  comentario aparte , es decir, textos como un descargo de responsabilidad o una nota de derechos de autoría, que no son esenciales para la comprensión del documento.
<s>	Representa contenido que ya  no es exacto o relevante .
<cite>	Representa el  título de una obra .
<q>	Representa una  cita textual  inline.
<dfn>	Representa un término cuya  definición  está contenida en su contenido ancestro más próximo.
<abbr>	Representa una  abreviación  o un  acrónimo ; la expansión de la abreviatura puede ser representada por el atributo title.
<data>	Asocia un equivalente legible por máquina a sus contenidos. (Este elemento está sólamente en la versión de la  WHATWG del estandar HTML, y no en la versión de la W3C de HTML5).
<time>	Representa un valor de fecha y hora; el equivalente legible por máquina puede ser representado en el atributo datetime.
<code>	Representa un código de  ordenador .
<var>	Representa a una variable, es decir, una expresión matemática o contexto de programación, un identificador que represente a una constante, un símbolo que identifica una cantidad física, un parámetro de una función o un marcador de posición en prosa .
<samp>	Representa la salida de un programa o un ordenador.
<kbd>	Representa la entrada de usuario o usuaria, por lo general desde un teclado, pero no necesariamente, este puede representar otras formas de entrada de usuario o usuaria, como comandos de voz transcritos.
<sub>,<sup>	Representan un subíndice y un superíndice, respectivamente.
<i>	Representa un texto en una voz o estado de ánimo alterno, o por lo menos de diferente calidad, como una designación taxonómica, un término técnico, una frase idiomática, un pensamiento o el nombre de un barco.
<b>	Representa un texto hacia el cual se llama la atención para  propósitos utilitaros.  No confiere ninguna importancia adicional y no implica una voz alterna.
<u>	Representa una anotación no textual sin-articular, como etiquetar un texto como mal escrito o etiquetar un nombre propio en texto en Chino.
<mark>	Representa texto resaltado con propósitos de referencia, es decir por su relevancia en otro contexto.
<ruby>	Representa contenidos a ser marcados con anotaciones ruby,  recorridos cortos de texto presentados junto al texto. Estos son utilizados con regularidad en conjunto a lenguajes de Asia del Este, donde las anotaciones actúan como una guía para la pronunciación, como el furigana Japonés.
<rt>	Representa el  texto de una anotación ruby .
<rp>	Representa los paréntesis alrededor de una anotación ruby, usada para mostrar la anotación de manera alterna por los navegadores que no soporten despliegue estandar para las anotaciones.
<bdi>	Representa un texto que debe ser aislado de sus alrededores para el formateado bidireccional del texto.  Permite incrustar un fragmento de texto con una direccionalidad diferente o desconocida.
<bdo>	Representa la direccionalidad de sus descendientes con el fin de anular de forma explícita al algoritmo bidireccional Unicode.
<span>	Representa texto sin un significado específico.  Este debe ser usado cuando ningún otro elemento semántico le confiere un significado adecuado, en cuyo caso, provendrá de atributos globales como class, lang, o dir.
<br>	Representa un salto de línea.
<wbr>	Representa una oportunidad de salto de línea, es decir, un punto sugerido de envoltura donde el texto de múltiples líneas puede ser dividido para mejorar su legibilidad.

Ediciones

Contenido incrustado

Elemento	Descripción
<img>	Representa una imagen.
<iframe>	Representa un contexto anidado de navegación, es decir, un documento HTML embebido.
<embed>	Representa un punto de integración para una aplicación o contenido interactivo externo que por lo general no es HTML.
<object>	Representa un recurso externo, que será tratado como una imagen, un sub-documento HTML o un recurso externo a ser procesado por un  plugin.
<param>	Define parámetros para el uso por los plugins invocados por los elementos <object>.
<video>	Representa un  video , y sus archivos de audio y capciones asociadas, con la interfaz necesaria para reproducirlos.
<audio>	Representa un sonido o stream de audio.
<source>	Permite a autores o autoras especificar recursos multimedia alternativos para los elementos multimedia como  <video> o <audio>.
<track>	Permite a autores o autoras especificar una pista de texto temporizado para elementos multimedia como <video> o   <audio>.
<canvas>	Representa un  área de mapa de bits  en el que se pueden utilizar scripts para renderizar gráficos como gráficas, gráficas de juegos o cualquier imagen visual al vuelo.
<map>	En conjunto con <area>, define un mapa de imagen.
<area>	En conjunto con  <map>, define un mapa de imagen.
<svg>	Define una imagen vectorial embebida.
<math>	Define una fórmula matemática.

Datos tabulares

Formularios

Elemento	Descripción
<form>	Representa un formulario, consistendo de controles que puede ser enviado a un servidor para procesamiento.
<fieldset>	Representa un conjunto de controles.
<legend>	Representa el título de un <fieldset>.
<label>	Representa el título de un control de formulario.
<input>	Representa un campo de datos escrito que permite al usuario o usuaria editar los datos.
<button>	Representa un  botón .
<select>	Represents un control que permite la selección entre un conjunto de opciones.
<datalist>	Representa un conjunto de opciones predefiniddas para otros controles.
<optgroup>	Representa un conjunto de opciones, agrupadas lógicamente.
<option>	Representa una opción en un elemento <select>, o una sugerencia de un elemento <datalist>.
<textarea>	Representa un control de edición de texto multi-línea.
<keygen>	Representa un control de par generador de llaves.
<output>	Representa el resultado de un cálculo.
<progress>	Representa el progreso de finalización de una tarea.
<meter>	Representa la medida escalar (o el valor fraccionario) dentro de un rango conocido.

Elementos interactivos

Elemento	Descripción
<details>	Representa un widget desde el que un usuario o usuaria puede obtener información o controles adicionales.
<summary>	Representa un resumen, título o leyenda para un elemento  <details> dado.
<command>	Representa un comando que un usuario o usuaria puede invocar.
<menu>	Representa una lista de comandos