HTML 5 (HyperText Markup Language, versión 5) es la quinta revisión importante de la lengua básica de la World Wide Web, el HTML. HTML 5 especifica dos variantes de la misma lengua, un "clásico" en HTML (text / html) la variante conocida como HTML 5 y una variante XHTML conocida como XHTML 5. Esta es la primera vez que HTML y XHTML se han desarrollado en paralelo.
Las
ideas detrás de HTML 5, originalmente
denominadas Aplicaciones Web
1.0, aparecieron por primera
vez en 2004 en la Web Hypertext
Application Technology Working
Group (WHATWG); HTML 5 incorpora
Web Forms 2.0, otro WHATWG estándar.
El estándar HTML 5 se adoptó
como punto de partida de la labor
del nuevo grupo de trabajo HTML
de la W3C en 2007. El grupo de
trabajo publicó el primer Proyecto
Público de Trabajo de la especificación
el 22 de enero de 2008. La especificación
es el trabajo en curso, y se
espera que siga siéndolo durante
muchos años, aunque algunas partes
del HTML 5 se van a terminar
y ponerse en práctica en los
navegadores antes de que todo
concluya y la especificación
final adquiera estado de Recomendada.
Los editores son Ian Hickson
de Google, Inc. y David Hyatt,
Apple Computer, Inc.
El Doctype
Es importante especificar el Doctype en todos los documentos HTML, a fin de que el navegador sepa qué tipo de documento recibe.
En HTML 4.01 es necesaria una referencia a un DTD (HTML 4.01), porque se basa en SGML. HTML 5 por el contrario no se basa en SGML, y no requiere una referencia a un DTD, pero igualmente es necesario el doctype para que los navegadores se comporten como debieran.
Declaración de Doctype en Html 4
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">Declaración de Doctype en XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">En HTML 5 la declaración de Doctype es realmente simple:
<!DOCTYPE HTML>HTML
5 establece una serie de nuevos
elementos y atributos que reflejan
el uso típico de los sitios Web
modernos. Algunos de ellos son
técnicamente similares a <div> <span> y
etiquetas, pero tienen un significado
semántico, por ejemplo <nav> (navegación
de bloque del sitio web) y <footer>.
Tales etiquetas facilitarían
la indexación por los motores
de búsqueda y manipulación de
los dispositivos de pantalla
pequeña o lectores de voz para
los discapacitados visuales.
Otros elementos proporcionan
nuevas funcionalidades a través
de una interfaz, como
<audio> y <video>.
La mayoría de las páginas HTML 4 incluye una variedad de estructuras comunes, tales como cabeceras, pies de página o columnas. En la actualidad, es bastante común para marcarlas utilizar elementos <div>, aplicando una descriptiva clase (<div class="contenedor-principal">) o id (<div id="encabezado">) a cada una.
HTML 4 carece de los elementos necesarios para describir la semántica de los elementos que componen un documento. HTML 5 mejora este problema mediante la introducción de nuevos elementos para la representación de cada una de las diferentes secciones.
Nuevos atributos que aparecen en la nueva versión:
- media:
Para conseguir una mayor consistencia
con el link en los elementos <a
/>
- ping:
Especificacremos una lista
separada por espacios donde
produciremos un ping cuando
se siga el enlace, para los
elementos <area
/> y <a
/>
- target: Disponible para mejorar la consistencia con el elemento <a />.
- autofocus: Destinado para indicar el elemento <input /> (no hidden), <select />, <textarea /> o <button /> que ha de coger el foco al cargar la página.
- form: Atributo para <input />, <ouput />, <select /> <textarea />, <button /> y <fieldset /> que permite que se sococien con un simple formulario.
- replace: atributo para <input /> <button /> y <form /> que le afectará cuando el contenido del elemento sofra algún cambio.
- data: Para <form />, <select /> y <datalist />.
- required: Para elementos <input /> (Excepto hidden e image) y <textarea />, indica que el campo es obligatorio.
- inputmode: Atributo para <input /> y <textarea />.
- disabled: Para <fieldset />, permite desactivar el fieldset completo.
- autocomplete, min, max, pattern, step: Para elementos <input /> permite delimitar las posibilidades de nuestros elementos de entrada.
- list: Para elementos <datalist /> y <select />.
- template: Para <input /> y <button /> podrá usarse para repetir templates.
- scoped: Para elemento <style />, permitirá usar hojas de estilo "scoped" ??
- async: Para el elemento <script /> el ajax hecho atributo.
Elementos que pasan a ser obsoletos en la nueva versión:
- acronym
- applet
- basefont
- big
- center
- dir
- font
- frame
- frameset
- isindex
- noframes
- noscript (solo en XHTML5)
- s
- strike
- tt
- u
Atributos eliminados:
- rev y charset en <link /> y <a />
- target en <link />
- nohref en <area />
- profile en <head />
- version en <html />
- name en <map />
- scheme en <meta />
- archive, classid, codetype, declare y standby en <object />
- valuetype en <param />
- charset en <script />
- summary en <table />
- header, axis y abbr en <td /> y <th />
Hace un tiempo se ha lanzado la nueva versión del mejor navegador del medio, Mozilla Firefox 3.5, con nuevas capacidades tales como el soporte para algunas de las nuevas extensiones multimedia que incorpora HTML5, que son <video> y <audio>, que nos permitirán visualizar archivos multimedia sin tener que contar con un plugin extra, ya sea Flash, QuickTime o cualquier otro.
La web se hace mayor y a partir de ahora HTML no será sólo texto sino que también podrá incluir multimedia de forma nativa. Aunque pueda parecer una tontería las ventajas son notables ya que nuestro navegador no depende de terceras aplicaciones para ofrecernos estas capacidades.
La forma más sencilla de incrustar un vídeo es utilizar un elemento de video y permitir que el navegador por defecto proporcione una interfaz de usuario. El marcado para insertar el video sería algo como:
<video src="video.ogv" controls poster="poster.jpg"
width="320" height="240">
<a href="video.ogv">Download movie</a>
</video>Integrar audio en una página es muy fácil y se logra utilizando el elemento de audio. La mayoría de los atributos son comunes entre los elementos de audio y video, aunque por razones obvias, el elemento de audio carece de ancho, alto y poster.
<audio src="music.oga" controls>
<a href="music.oga">Download song</a>
</audio>Ventajas de utilizar HTML
- Compatible con los navegadores existentes
- Los autores ya están familiarizados con la sintáxis
- Conveniente sintaxis, por ejemplo, los autores pueden omitir algunos valores de atributos y etiquetas
Beneficios de la utilización de XHTML
- La estricta sintáxis XML alienta a los autores a escribir bien el marcado, lo que significa que el mantenimiento posterior sera más fácil
- Se integra directamente con otros vocabularios XML, como MathML y SVG
- Permite el uso de procesamiento de XML, que algunos autores utilizan como parte de su edición y / o la publicación de los procesos
HTML 5 o XHTML 5?
Si actualmente se utiliza XHTML 1.x es normal pensar en utilizar XHTML 5, la versión compatible con XML de HTML 5. Sin embargo si el sitio web consta de una audiencia/público general esto no es tan así. XHTML 5 debe ser enviado con un tipo de MIME de XML (como application / xhtml + xml), e incluso IE8 todavía no es compatible con esta característica. No obstante, todas las características de codificación XHTML (elementos de escritura en minúsculas, rectificación de anidación, el cierre de etiquetas o elementos opcionales que agregan significado) son compatibles con HTML 5.
Cordialmente,
La Administración
muy buena información, gracias por ese gran aporte
hola hernandez , muy buen dominio tienen ahí.