Este documento pretende ser una referencia completa del formato HTML5. Tanto el documento como el propio formato HTML5 se encuentran todavía en desarrollo, por lo que puede encontrar omisiones, errores y fallos. Sé indulgente: estoy trabajando en ello.
En este documento sólo hago referencia a HTML5. No se hago referencia a ningún elemento no definido, ni a aquellos marcados como obsoletos. Esto es porque me parece absurdo habiendo sido eliminados del formato o si se pretende eliminar en un futuro cercano. Aun así, dado que el documento está en desarrollo, no puede asumirse que si no se hace referencia a una etiqueta o atributo, esta no exista. Son todos lo que están, pero no están todos lo que son.
También se pretende que el propio documento sea un ejemplo de uso de HTML5. Así puede verse cómo se utilizan las diferentes etiquetas sólo con ver la fuente.
Un documento HTML está formado por una serie de elementos anidados en forma de árbol, de igual forma que en un archivo XML. En esta sección se describen los elementos elementales que contienen toda la información del documento.
La primera línea del indica el tipo. En el caso de HTML5 esta línea es <!DOCTYPE html>. Ha de tenerse en cuenta que este elemento ha de ser el primero del archivo. No debe ser precedido por ningún caracter (salto de línea, espacio...) o el navegador no identificará el formato correctamente y lo procesará "a la vieja usanza".
A continuación se encuentra el elemento raíz <html>, el cual contiene las dos secciones <head> y <body>, las cuales definen el documento.
Un ejemplo de documento mínimo podría ser el siguiente:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Hola mundo en HTML5<title>
</head>
<body>
<p>¡Hola, Mundo!</p>
</body>
</html>Aunque se supone que HTML5 puede ser procesado correctamente incluso en navegadores que no lo implementan, tal como se describe en esta sección de Dive Into HTML5, el navegador Internet Explorer anterior a la versión 9 tiene problemas para procesarlo. Como solución se propone añadir el siguiente código en la cabecera del documento HTML:
<!--[if lt IE 9]>
<script>
var e = ("abbr,article,aside,audio,canvas,datalist,details," +
"figure,footer,header,hgroup,mark,menu,meter,nav,output," +
"progress,section,time,video").split(',');
for (var i = 0; i < e.length; i++) {
document.createElement(e[i]);
}
</script>
<![endif]-->Léase la descripción detallada del problema y la solución en la citada sección.
Estos atributos son comunes a todas las etiquetas y puede utilizarse en cualquiera de ellas, aunque en ocasiones no tendrán efecto alguno.
Contiene el cuerpo del documento.
Define los "metadatos" del documento, tal como la codificación de caracteres, el título, el autor, el estilo, etc.
Es el elemento raíz de un documento HTML. Contiene el documento por completo y únicamente el DOCTYPE está fuera de él.
Debe contener dos y sólo dos elementos: head y body.
El texto siguiente está desorganizado.
A modo de ayuda para la organización de documentos HTML5, existe un "outliner" que analiza el documento pasado y devuelve la estructura del mismo en forma de árbol. El enlace es este.
Los elementos aquí descritos son contenidos dentro de la cabecera del documento <head>.
<meta>Permite (re)definir información enviada por la cabecera HTTP.
El atributo charset permite definir la codificación de caracteres utilizada. Debe utilizarse siempre ya que una codificación incorrecta, además de hacer ilegible el texto, puede provocar problemas graves.
<link>Define relaciones con recursos externos, como puede ser el estilo.
El atributo rel define el tipo de relación:
type.type, dada la variedad de formatos y usos posibles.type.sizes.Hay más valores para el atributo rel, sin embargo son específicos a ciertas aplicaciones, especialmente bitácoras y foros, por lo que no se muestran aquí. En Dive Into HTML5
hay una descripción de varios de estos valores en el capítulo 3.
El atributo href define la ruta donde se encuentra el recurso.
El atributo type indica el tipo de recurso. No siempre es necesario indicarlo, aunque a veces sí.
El atributo sizes permite definir los tamaños del icono, de la forma "<ancho>x<alto>" separando varios tamaños con un caracter de espacio.
Elementos utilizados dentro de la sección <body>.
Nota: En esta sección hay texto en inglés ya que lo he copiado directamente de Dive Into HTML5
para ganar tiempo.
<section>Representa una sección genérica, una agrupación temática del contenido, normalmente con una cabecera. Ejemplos pueden ser capítulos, páginas de un diálogo paginado (tabbed), etc.
<nav>The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links. Not all groups of links on a page need to be in a nav element — only sections that consist of major navigation blocks are appropriate for the nav element. In particular, it is common for footers to have a short list of links to various pages of a site, such as the terms of service, the home page, and a copyright page. The footer element alone is sufficient for such cases, without a nav element.
<article>The article element represents a component of a page that consists of a self-contained composition in a document, page, application, or site and that is intended to be independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a Web log entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.
Ejemplo:
<article>
<header>
<h1>A syndicated post</h1>
</header>
<p>Lorem ipsum blah blah…</p>
</article><aside>The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography. The element can be used for typographical effects like pull quotes or sidebars, for advertising, for groups of nav elements, and for other content that is considered separate from the main content of the page.
<hgroup>The hgroup element represents the heading of a section. The element is used to group a set of h1–h6 elements when the heading has multiple levels, such as subheadings, alternative titles, or taglines.
<header>The header element represents a group of introductory or navigational aids. A header element is intended to usually contain the section’s heading (an h1–h6 element or an hgroup element), but this is not required. The header element can also be used to wrap a section’s table of contents, a search form, or any relevant logos.
Ejemplo:
<header>
<hgroup>
<h1>My Weblog</h1>
<h2>A lot of effort went into making this effortless.</h2>
</hgroup>
…
</header><footer>The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like. Footers don’t necessarily have to appear at the end of a section, though they usually do. When the footer element contains entire sections, they represent appendices, indexes, long colophons, verbose license agreements, and other such content.
<time>The time element represents either a time on a 24 hour clock, or a precise date in the proleptic Gregorian calendar, optionally with a time and a time-zone offset.
Atributos:
<fecha>[T<hora><zona>]. Por ejemplo: datetime="2009-10-22T13:59:47-04:00"pubdate="pubdate".<mark>The mark element represents a run of text in one document marked or highlighted for reference purposes.