Cuál es la diferencia entre HTML y HTML 5

HTML o lenguaje de marcado de hipertexto es el lenguaje central de la World Wide Web. Este lenguaje ayuda a los desarrolladores de websites a definir de qué manera los elementos –hipervínculo, texto, archivos multimedia y otros– se muestran en el navegador. HTML funciona de modo estático. Sin embargo, es posible crear una función de sitio web dinámica o interactiva por medio de él. HTML únicamente cambia los elementos estáticos del sitio, como el pie de página, la posición de las páginas o el encabezado. Para crear un sitio llamativo, es preciso combinar HTML con un mínimo de dos lenguajes de front-end: JavaScript y Cascading Style Sheet o CCS.

Por otra parte, el lenguaje HTML emplea varias etiquetas –como tablas, párrafos y encabezados– a fin de delimitar la estructura de texto de una página. Cada una de esas etiquetas se identifica con la fórmula <A> y </A> . A ellas se les llama etiquetas de “apertura” y de “cierre”. Un ejemplo práctico: si se desea cambiar un estilo de texto recto a su versión cursiva, se puede emplear <i>escribe tu texto aquí</i>. Así, el navegador renderizará el contenido por medio de estas etiquetas y lo mostrará en la pantalla.

Origen

Tim Berners-Lee, uno de los pioneros de la Web, lanzó HTML en 1991. Desde entonces, fue actualizado en numerosas oportunidades. En 1995 se conoció HTML 2.0; en 1997, HTML 3.2; en 1999, HTML 4.01 y en 2000, XHTML.

HTML5 es la versión más actual, presentada en 2014.

Características adicionales

HTML5 presenta varias características adicionales que se suman a las de las versiones precedentes. Entre ellas, se encuentran:

. Elementos de contenido específico –pie de página, navegación, cabecera y otros–. . Soporte de almacenamiento de medios sin conexión. . Soporte de incrustación de video y audio. . Doctype inline simplificado.

Las diferencias centrales entre HTML y HTML5

El objetivo de la creación de HTML5 fue el de mejorar la tarea de los desarrolladores de sitios y los usuarios finales de la Web. Hoy, las principales diferencias entre HTML y el relativamente nuevo HTML5, son:

. HTML5 es enteramente compatible con Scalable Vector Graphics o SVG, canvas y otros gráficos vectoriales. Por su lado, HTML solo permitía emplear gráficos vectoriales a través de tecnologías como Silverlight, Flash y Vector Markup Language o VML.

. En HTML5, las bases de datos web SQL se usan para almacenar datos temporalmente. Con HTML solo era posible usar el caché del navegador con esa meta.

. JavaScript es ejecutable dentro de un navegador web si se emplea HTML5. Con HTML únicamente es factible que JavaScript se ejecute en el hilo de la interfaz del navegador.

. HTML no tiene como base SGML. Por ende, el lenguaje posee mejores reglas de análisis sintáctico que ayudan a una mayor compatibilidad. . Se puede emplear MathML y SVG con HTML5 de modo inline en el texto. Con HTML su uso es limitado.

. Algunos elementos como noframes, acronym, applet, isindex, big, font, frame, frameset, dir, center, strike y tt se han eliminado en la versión HTML5.

. HTML5 es capaz de soportar nuevas clases de controles de formularios: número, rango, tel, url, búsqueda, fechas y horas, y correo electrónico entre otros.

. Entre los elementos y características nuevos presentes en HTML se encuentran: command, data, datalist, time, aside, audio, summary.

Ventajas destacables de HTML5 para los desarrolladores

HTML5 tiene como meta brindar mayor flexibilidad al momento de desarrollar websites. Entre las ventajas sobresalientes se encuentran:

. Errores persistentes: su manejo Gran parte de los navegadores poseen soporte para el análisis de código HTML incorrecto en cuanto a lo sintáctico o lo estructural. A pesar de esto, hasta no hace mucho no existía un proceso estándar para manejar este tema. De modo que los desarrolladores de navegadores debían realizar pruebas de documentos HTML que se encontraban mal formateados, en diferentes navegadores a fin de crear procesos de manejo de errores usando ingeniería inversa. Ahora, el manejo consistente de errores en HTML5 implica una diferencia sustancial. Los algoritmos de análisis sintácticos mejorados que se emplean en HTML5 conllevan un ahorro enorme en tiempo y en recursos.

. Elemento: semántica mejorada En varios de los elementos de HTML se introdujeron mejoras en los aspectos semánticos. El objetivo: reforzar el significado del código. Los nuevos elementos –header, nav, article y section– sustituyen a la mayoría de los elementos div. Estos han quedado obsoletos. Con esta innovación, la tarea de búsqueda de errores es mucho menos compleja dado que los elementos poseen mayor simplicidad.

. Características de aplicaciones web: soporte mejorado En HTML5, uno de sus principales fines es ayudar a que los navegadores web actúen como plataformas para aplicaciones. Con ello, brinda a los desarrolladores un control más amplio acerca del rendimiento de sus websites. Antes, los desarrolladores se veían obligados a usar soluciones alternativas ya que muchas tecnologías del lado del servidor al igual que las extensiones del navegador, no se encontraban disponibles. En el presente, ya no es obligatorio usar ninguna solución centrada en JavaScript o Flash –como sucedía con HTML4–. ¿El motivo? Existen elementos en HTML5 que ofrecen todas las funcionalidades.

.Web móvil: mayor adaptación El crecimiento exponencial de usuarios de teléfonos inteligentes o smartphones, conllevó una mejora de los estándares de HTML. Hoy, cada usuario desea acceder a los recursos web en todo momento y desde cualquier tipo de dispositivo móvil –teléfono celular, tablet, smartwatch–. Por lo tanto, contar con un sitio web se ha vuelto imprescindible. HTML5 ha simplificado enormemente el soporte móvil. En particular, para los dispositivos de baja potencia –tablets y smartwatches–.

. Elemento canvas: sus beneficios Una característica destacable de HTML5 es el elemento . Con él, resulta sencillo dibujar componentes varios como cajas, texto, círculos, imágenes. La comodidad que ofrece HTML5 para delinear gráficos con una diversidad de formas y colores mediante scripts –por caso, JavaScript– hace pensar que Flash quedará fuera de uso en poco tiempo. A pesar de esto, hay que indicar que el elemento es solo un contenedor de gráficos. Por ello, para definir los gráficos se hace imprescindible ejecutar un script. Lo que sigue es un ejemplo en el que se emplea JavaScript junto con el elemento:

var c = document.getElementById(“TestCanvas”);

var context = c.getContext(“2d”);

context.fillStyle = “#FF0000”;

context.fillRect(0,0,140,75);

. Elemento menú Los elementos <menú> y constituyen componentes de la especificación de elementos de interacción. Ambos ayudan a mejorar la interactividad del sitio web. La etiqueta <menú> conlleva un conjunto de comandos de menú al estilo de las aplicaciones de escritorio y móviles. Una posible utilización de esa etiqueta es: <body contextmenu=”new-menu”> <menu id=” new-menu” type=”context”> <menuitem>Hello!</menuitem> </menu> </body>

. Datos personalizados: atributos Es factible sumar atributos personalizados a las versiones previas de HTML, pero implica riesgos. Por caso: los atributos personalizados, en cierta ocasiones impiden que una página se renderice de modo total en HTML4, y eso da lugar a documentos inválidos o incorrectos. Para finalizar con ese problema, HTML5 incorporó el atributo data-*. Con él se puede acceder al atributo data de un elementos a través de jQuery y estilizar elementos de CSS. Pero su función central es almacenar información extra sobre los diversos elementos. Ahora es factible incluir datos personalizados. Con ello, los desarrolladores de sitios tienen la capacidad de crear páginas sorprendentes y eficientes, sin necesidad de introducir complejas peticiones del lado del servidor, llamadas Ajax.

. Para reemplazar las cookies: almacenamiento web HTML5 utiliza el almacenamiento web o local a fin de reemplazar las cookies. En la versión previa de HTML, si el desarrollador deseaba almacenar algo, estaba obligado a hacer uso de las cookies que contienen una diminuta cantidad de datos –unos 4 kb–. El tema es que las cookies muestran algunas desventajas: limitan el uso de datos completos –únicamente permiten cadena de caracteres–, pueden vencer y hacen más lenta la acción del servidor web ya que lo carga con scripts adicionales. Por el contrario, el almacenamiento web permite que los datos se alojen en la computadora del cliente de modo constante –si el usuario no los borra–. Además, ese tipo de almacenamiento de datos tiene mayor capacidad –de 5 MB– y no conlleva una carga adicional al ser solicitada al servidor.