Guía completa de HTML 5

Enlaces patrocinados

HTML 5 es la próxima revisión de HTML (Lenguaje de Marcado de Hipertexto) que básicamente es el lenguaje universal de la web.

HTML5 introduce una serie de nuevos elementos y atributos que son típicos en los sitios Web modernos. Algunos de ellos reemplazan semánticamente a los elementos <div> y <span>, por ejemplo <nav> (bloque de navegación web) y <footer>. Otros elementos proporcionan una funcionalidad nueva a través de una interfaz estandarizada, como los elementos o etiquetas <audio> y <video>.

El objetivo de HTML es guardar contenido y es por eso que algunos elementos obsoletos de HTML 4.01 se han eliminado, incluyendo elementos para la presentación de contenido como <font> y <center>, cuyos efectos se consiguen mediante las Hojas de Estilo en Cascada o CSS.

Enlaces patrocinados

La sintaxis de HTML5 ya no se basa en SGML a pesar de la similitud de sus marcas. Sin embargo, ha sido diseñado para ser compatible con las versiones anteriores de HTML. Viene con una nueva línea de introducción que se parece a una declaración de tipo de documento SGML, <!> DOCTYPE html, que permite la  compatibilidad con los estándares en todos los navegadores que utilizan “DOCTYPE sniffing”.

Nuevo API

Además de especificar el marcado, HTML5 especifica interfaces de scripting. Entre las actuales Document Object Model (DOM). También hay nuevas APIs, tales como:

  1. El elemento de lienzo para dibujar en 2D
  2. Reproducción multimedia
  3. Base de datos de almacenamiento off-line
  4. Edición de documento
  5. Arrastrar y soltar
  6. Mensajería entre documentos
  7. Gestión del historial

Algunas de las nuevas características son parte de HTML5, principalmente porque no hay voluntarios para dividir HTML5 y mantener especificaciones distintas de estas características.

Diferencias con HTML 4 y XHTML

La siguiente es una lista de las diferencias y algunos ejemplos específicos.

  1. Nuevas reglas de parsing; no se basa en SGML
  2. Capacidad para utilizar en línea SVG y MathML en text / html
  3. Nuevos elementos: article, aside, audio, canvas, command, details, datalist, dialog, embed, figure, figcaption, footer, header, hgroup, keygen, mark, meter, nav, progress, output, rp, rt, ruby, section, source, summary, time, video
  4. Los nuevos tipos de controles de formulario – dates and times, email, url, search
  5. Nuevos atributos – ping (on a and area), charset  (on meta), async (on script)
  6. Los atributos globales (que se pueden aplicar para cada elemento) -id, tabindex, hidden, data
  7. Los formularios tendrán soporte para los métodos PUT y DELETE además de GET y POST
  8. Elementos obsoletos – center, font, frameset, strike

Nuevos Elementos

  • section: Puede ser un capítulo, una sección de un capítulo o básicamente cualquier cosa que incluya su propio encabezamiento.
  • header: La cabecera de una página. No confundir con el elemento head
  • footer: El final de la página.
  • nav: Una colección de links a otras páginas
  • article: Una entrada independiente en un blog, revista, etc.
  • aside: Es un bloque semántico que representa una nota, un consejo una explicación….
  • figure: Se utilizará para representar una imagen
  • dialog: Se utilizará para representar una conversación entre varias personas
  • time: Se utilizará para marcar un momento temporal en una historia
  • meter: Se utilizará para indicar ciertas medidas dependiendo de los atributos
  • progress: Representará el estado de cierto proceso
  • video: Archivo de video
  • audio: Archivo de audio
  • details: Más detalles
  • datagrid: Una tabla, una recopilación de datos formateados
  • menu: Menu de navegación

Elementos modificados

  • El elemento <a /> sin href ahora creará un enlace al sitio.
  • El elemento <address /> es ahora un nuevo concepto de sección.
  • El elemento <b /> ahora representa un trozo de texto a ser estilizado sin ninguna importancia.
  • Para elementos <label /> el navegador no debe mover el foco desde la etiqueta al control a menos que el comportamiento sea estandar para el interfaz utilizado en la plataforma.
  • <menu /> ha sido redefinido para ser usado con los actuales menús.
  • El elemento <small /> ahora representa una impresión pequeña.
  • El elemento <strong /> definitivamente representa el enfasis puesto en trozo de nuestro texto.

Elementos Eliminados

  • acronym
  • applet
  • basefont
  • big
  • center
  • dir
  • font
  • frame
  • frameset
  • isindex
  • noframes
  • noscript (solo en XHTML5)
  • s
  • strike
  • tt
  • u

Nuevos Atributos

  • 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 /&gt; <button /> y <form /> que le afectará cuando el contenido del elemento sofra algún cambio.
  • data: Para <form />, <select /&gt; 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.

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 />

Quake en HTML 5

Una aplicación impresionante de HTML 5 fue el port del juego Quake :D en un navegador.

Imagina de lo que son capaces 3 desarrolladores de Google… :yes: Han creado una versión del célebre Quake II corriendo en un navegador. Este Quake II GWT emplea HTML5 y WebGL para la aceleración gráfica

 

Etiquetas: guia html5, guia de html5, html5 2011, html5 guia, atributos html5, guia html 5

Enlaces patrocinados

4 pensamientos en “Guía completa de HTML 5

  1. Pingback: Aprendiendo mas de HTML5 « Sabelita's Blog

  2. Pingback: Las 10 cosas que un maquetador web debería saber

  3. Jose

    Buenas, estoy estudiando en la universidad, y voy a tener que hacer un proyecto de streaming.

    Como requerimientos de la tecnología, me han exigido que pueda restringir el acceso al video y que sea https, por lo tanto tengo que evitar que se pueda acceder al vídeo solamente sabiendo su URL.

    Teniendo en cuenta que necesito esa funcionalidad ya mismo, ¿Puedo utilizar html5? He estado buscando información y no encuentro nada al respecto…

    Gracias por la atención, espero vuestra respuesta.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>