Introducción a HTML5

En esta publicación haremos una breve introducción a HTML5. Al entrar al mundo del desarrollo web, hay dos términos que debemos tener muy en cuenta con el fin de entender los fundamentos de la construcción y el diseño de un sitio web: estos términos son HTML y CSS. Estas son las dos principales tecnologías utilizadas en la construcción de sitios web. Así que hoy vamos a explicar, en términos simples, el propósito de HTML.

¿Qué es HTML?

HTML (Hipertext Markup Language), es un lenguaje de marcas diseñado para permitir la creación de sitios web (estructuras). Estos sitios web pueden ser vistos por cualquier persona conectada a Internet.

HTML5 es la última versión disponible de HTML. Fue lanzado en octubre de 2014 y tiene muchas características nuevas y mejoradas, fue diseñada pensada en los Smartphones y Tabletas, lo que garantiza una mejor experiencia para el usuario en estos dispositivos.

En particular, HTML5 añade nuevas etiquetas simples que se pueden utilizar para crear contenido enriquecido y multimedia. Algunos de estos incluyen: <video> , <audio> , <canvas> y <blockquote>. HTML5 también añade la capacidad de integrar contenido SVG (Contenido 3D y elementos animados). Esto permite a los desarrolladores web incluir fácilmente contenido gráfico y multimedia en la web sin tener que utilizar las complejas librerias Javascript API. Otra característica atractiva de la nueva tecnología es una característica CSS3 llamada "fontface" , que permite a cualquier fuente que se hace referencia en el servidor web pueda ser utilizado en su documento html sin necesidad de que el cliente tenga la fuente instalada de forma nativa.

¿Qué son los elementos semánticos en HTML?

Los elementos semánticos son etiquetas diseñadas para que los motores de búsqueda, recopiladores de información, navegadores de voz, etc. comprendan qué tipo de información se encuentra debajo de estas etiquetas. Por ejemplo, una etiqueta <p> indica que el texto adjunto es un párrafo. Por lo tanto esta etiqueta lo identifica como un párrafo y los motores de búsqueda también.

Por otro las, tenemos etiquetas como <b> e <i> que no son semánticas. Estas etiquetas solo definen cómo debe verse el texto (negrita o cursiva) y no proporcionan ningún significado adicional al marcado.

Elementos semánticos comunes de HTML5

Si alguna vez ha mirado el código fuente de una página web, es posible que haya visto códigos como: <div id="header"> para describir que se trata de un encabezado o <div id="footer"> para indicar un pie de página. Sin embargo <div> no es un elemento semántico. Una etiqueta <div> puede contener cualquier tipo de información, por lo que, por definición, no le proporciona un significado.

Aunque, muchos desarrolladores lo pasan por alto asignándole identificadores y clases, como se ve en el ejemplo anterior. A continuación, nombraremos los elementos semánticos comunes de HTML5 (ordenados por nombre, ascendente):

• <article>
• <aside>
• <details>
• <figcaption>
• <figure>
• <footer>
• <header>
• <main>
• <mark>
• <nav>
• <section>
• <summary>
• <time>

Elementos de uso común que no son semánticos

A pesar de no encontrarse en la lista de elementos semánticos estas dos etiquetas son usadas con bastante frecuencia al trabajar con codificación HTML.

• <div>
• <spam>

Esto no quiere decir que los elementos no semánticos no tengan un papel importante en el desarrollo web, y ese es un tema que tocaremos en otro artículo, pero tenga en cuenta que ambos <div> y <spam> no son semánticos.

Beneficios de usar HTML5

• Compatibilidad del navegador. Es totalmente compatible con los principales navegadores: Google Chrome, Internet Explorer, Firefox, Safari, Opera, y más. El único problema es la forma que se muestra HTML5 en versiones muy antiguas, pero hay soluciones.

• Mobile-friendly. HTML5 es un apoyo increíble para el desarrollo móvil. Su diseño adaptable o responsive design (desarrollado con un componente del marco Bootstrap) es entendido por todos los navegadores móviles como Opera Mobile, Android y iOS Safari. Además, los nuevos menús de navegación expandibles y plegables que no estaban disponibles en versiones anteriores de HTML hacen que sea más fácil de construir las estructuras en los dispositivos moviles.

• El comercio electrónico móvil: HTML5 también amplifica la funcionalidad de su carrito de compras móvil.

Características

HTML5 ha incorporado nuevas características, como la reproducción y efectos de vídeo, que los desarrolladores sólo podían poner en práctica antes con la ayuda de plug-ins de terceros como Adobe Flash, Microsoft Silverlight, o Google Gears.

• Nuevas APIs: HTML5 tiene un par de nuevas APIs (interfaces de programación de aplicaciones) que añaden una excelente funcionalidad, incluyendo:
• Geolocalización: accede a la ubicación geográfica de un usuario (con aprobación previa del usuario).

• Almacenamiento local: la API de almacenamiento local de HTML5 es un excelente reemplazo para las cookies.

• Cache de aplicaciones: esta API permite a un usuario acceder a una aplicación web sin una conexión mediante la creación de una versión en línea. Esto pone menos tensión en el servidor, hace que las cosas funcionen más rápido, y permite la navegación sin conexión.

• Nuevos elementos semánticos: en HTML 4, la falta de elementos semánticos bien estructurados como <sección> o <footer> significaba que era muy difícil para los motores de búsqueda identificar el contenido de un sitio web. Los nuevos elementos semánticos de HTML5, como <header>, <nav> y <article> hacen secciones mas descriptivas y fáciles de identificar.
• Vídeo nativo: permite correr vídeos sin necesidad de plugin u otros software, para ser visualizados en iPhones y iPads.
• Los nuevos elementos gráficos: HTML5 añadió nuevos elementos gráficos, como <canvas>, que permite dibujar a través de JavaScript en un navegador, y "gráficos vectoriales escalables"<svg> y gráficos 2D basados ​​en XML.
• Ubicación: HTML5 puede aprovechar el reconocimiento de ubicación, lo que permite a los navegadores acceder a la ubicación del usuario a través del GPS de teléfono, dirección IP, etc.

¿Qué herramientas necesito para crear sitios web HTML5?

Los puristas dirán que no se necesita ninguna herramienta, puede comenzar a desarrollar en HTML5 con un bolígrafo y un trozo de papel, si lo desea, pero otros prefieren herramientas como Dreamweaver de Adobe. Adobe también tiene Edge, una herramienta desarrollada para crear animaciones en HTML5.

¿Dónde puedo ver algunas demos HTML5? Existe un sitio web astutamente llamado http://html5demos.com/ donde encontraras algunas demostraciones.