Si estás comenzando a adentrarte en el mundo del diseño de páginas web y programación seguro tendrás muchas dudas. Acá hablaremos de HTML5, para iniciar a despejar todas las dudas, el HTML5 es una colección de estándares que se usan en el diseño y desarrollo de páginas web. ¿Qué quiere decir eso? Esta colección lo que hace es representar la forma en la que se presenta la información en un explorador de Internet, y al mismo tiempo la forma en la que se interactúa con ella.
El HTML fue desarrollado por Ian Hickson de Google Inc y Dave Hyatt de Apple Inc, esto junto con un equipo de personas que participan en la Web Hypertext Application Technology Working Group.
La quinta revisión del lenguaje básico de la World Wide Web (www), es un lenguaje markup, que es más que una herramienta que se usa para estructurar y presentar el contenido en las diferentes páginas webs. Se considera uno de los principales aspectos en el funcionamiento de una web, pero no es el más importante. La versión estándar de esta revisión se realizó en 1990.
El nuevo HTML5 tiene relación con el HTML4, sin embargo, con HTML5 las posibilidades para explotar las webs usando menos recursos son mayores. Con esta nueva revisión también entra es desuso el formato XHTML. Se espera que esta nueva generación de HTML domine pronto el desarrollo en Internet.
¿Para qué sirve el HTML5?
Permite una mayor interacción entre las páginas web y el contenido multimedia, lo que quiere decir con vídeos, audios, fotos, entre otros. Así como también facilita el proceso de codificar el diseño básico de la web.
Es un sistema que deja formatear el layout de una página web, y permite hacer ajustes al aspecto. Los navegadores de internet como Chrome o Firefox pueden saber cómo deben mostrar la web con todos sus elementos. Por eso el HTML5 no tiene grandes cambios al lado de su predecesor, pero se eleva en sofisticación.
Se diseñó para utilizarse en todos los desarrolladores de Open Web, es una página que tiene diversos recursos sobre la tecnología de HTML5 y, se clasifica en distintos grupos de acuerdo a su función:
- Semántica: Que permite describir con mejor precisión el contenido de la web.
- Conectividad: Deja al usuario comunicarse con el servidor de una manera más innovadora.
- Sin conexión y almacenamiento: Les da la oportunidad a las páginas web de almacenar datos locales y lograr operar sin conexión de una forma más eficiente.
- Multimedia: Permite un soporte para utilizar el audio y video nativo.
- Gráficos y efectos 2D y 3D: Ofrece una amplia gama de nuevas características que manejan los gráficos de la página como Canvas 2D, WebGL, entre otros.
- Rendimiento e Integración: Permite una mejor optimización de la velocidad y usar el hardware de mejor manera.
- Acceso al dispositivo: Permite el uso de APIs con diferentes componentes internos de entrada y salida en los dispositivos.
- CSS3: Ofrece una mejor y más amplia variedad de diseños sofisticados.
Esta nueva versión se basó en un diseño común para las páginas web del todo el mundo, para así llegar a un estándar de etiquetas, estas mismas realizarán las tareas de una forma eficiente y en poco tiempo.
Etiquetas HTML5
Las etiquetas son una herramienta fundamental para que todos los navegadores puedan traducir los códigos correctamente y que el usuario pueda ver las imágenes, texto, párrafo y todos los elementos de la página web, correctamente. Imagina que los navegadores con traductores de las etiquetas y con HTML5 se agregaron nuevas que ayudan a ahorrar el uso de productos que utilizaban para complementar y hacer tareas simples con el HTML.
Para que te hagas una idea de lo que esto significa, te ponemos un ejemplo. Un diseño nuevo para una página web, estará reflejado en etiquetas, como por ejemplo: <header>, <footer>, <nav>, <section>,<article>, estás reemplazarán las necesidades de tener una etiqueta para cada parte de la página. Lo que se propone es tener etiquetas destinada para cada función.
Si se quiere incorporar un video en la página web basta con poner <video> para insertar el reproductor de vídeo, antes para poner un reproductor se utilizaba la etiqueta <embed>. Esto lo que hace es evitarnos tener que insertar el código <object>, así como ya no será necesario usar el Flash Player para reproducir videos. Igual pasa si queremos agregar un audio, se pone la etiqueta <audio>, remplazando la <embed>.
HTML5 se creó con el objetivo de que el proceso para escribir el código sea mucho más simple y lógico. Y es que, como ya mencionamos, la sintaxis de HTML5 es en el ámbito multimedia. La idea es que se pueda visualizar el contenido multimedia variado que se encuentra en Internet así lo busquemos desde un dispositivo de baja gama.
Funciones de etiquetas
Estas son las etiquetas más importantes creadas en esta versión:
- Article: esta etiqueta se usa para definir un artículo, un comentario de usuario o una publicación independiente dentro de la web.
- Header, footer: estas etiquetas individuales evitan tener que insertar IDs para cada uno, como se hacía antes. También, se pueden insertar headers y footers para cada sección, en vez de hacerlo general.
- Nav: En el markup se puede introducir directamente la navegación, en medio de las etiquetas que permitan hacer listas que oficien la navegación.
- Section: esta es una de las etiquetas más importantes de las novedades, se puede definir todo tipo de secciones dentro de un documento.
- Embed: con esta etiqueta se puede marcar la presencia de un contenido interactivo o aplicación externa.
- Canvas: Es una etiqueta que te permitirá introducir un “lienzo” dentro del documento para dibujar gráficos por vectores con el uso de JavaScript.
- Audio y Video: Ya te lo mencionamos, pero lo volvemos a destacar. Son las etiquetas más importantes en HTML5, por la facilidad con la que permite acceder al contenido multimedia.
Existen otras nuevas etiquetas incorporadas a HTML5, pero solo destacamos las que consideramos más importantes.
Ahora, si hablamos de las etiquetas que ya conocíamos, introducen nuevos funcionamientos, como es el caso de “header” y “footer”, que en esta nueva versión permite separar las secciones y no solamente el principio o final de una página. El DOCTYPE también viene renovado, ahora es más simple de usar y menos complicado y lleno de términos incomprensibles.
Estructura
Como se comentaba antes, la HTML nos servirá para crear páginas web, darles forma y estructura al contenido, por ejemplo:
<html> <body> <p>Acá podríamos colocar un párrafo dándole la bienvenida a los usuarios.</p> </body> </html>
En HTML el esqueleto básico, es conocido por todos ya que se usa desde el inicio del lenguaje. No es más que una estructura que comienza con “HTML” y dentro de ella encontraremos los bloques “Head” y “Body”.
Uno de los aspectos más importantes de la estructura es el “Body” o cuerpo, antes de la nueva actualización se usaban etiquetas como <DIV>, <SPAN>, <B>, entre otras. Sin embargo, todas las etiquetas que se usaban no decían mucho al sistema que las terminara leyendo.
Ahora se recomienda usar etiquetas que aportan un mejor significado al contenido. Por supuesto sin dejar de usar las etiquetas antiguas, solo que ahora se tiene una serie con valor semántico, que aporta otras facilidades.
A continuación, te mostramos otro ejemplo de cómo sería la estructura dentro del “BODY”:
<header>
Esta es la cabecera de una página o un bloque de contenido
<nav>
Esta es la barra de navegación principal del sitio
</nav> </header> <main> <section>
El <aside> contiene información accesoria, que no suele añadir un valor significativo a la temática del sitio. Por ejemplo, es habitual usar para la barra lateral con una serie de banners o widgets sociales.
</aside> <footer>
Esto es un pie de página
</footer>
Estructura de las etiquetas
Cada una de las etiquetas deben terminar como su homóloga de cierre. Por ejemplo, con la etiqueta <body> debe cerrarse con </body>, igual para <p> con </p>, y todas las demás.
¿Por qué? Si no cerramos correctamente las etiquetas tendríamos un código malo, por lo que el navegador lo interpretaría de una forma muy diferente a lo que en realidad queremos. Podría pasar que nos muestre la web como una página de error o quede en blanco.
Empieza a aplicarla
La idea detrás de HTML5 es que podamos visualizar el contenido multimedia variado que podemos encontrar en Internet aún cuando nos encontramos en dispositivos de gama baja que no podrían soportarlo cuando tienen que instalar infinidad de plug-ins. No solamente contamos con etiquetas especiales como audio, video y canvas, sino también integración con contenidos de gráficos en vectores (que anteriormente se conocía como la etiqueta object. Con estas etiquetas, los usuarios pueden consumir videos y canciones, por ejemplo, sin necesidad de instalar nada de forma adicional.
Ya repasamos qué es HTML5, y cuáles son sus usos principales y sus innovaciones más importantes. Para los diseñadores, es algo que debería, y de hecho, ya se está haciendo, implementarse inmediatamente. Las posibilidades son muchas. Esperamos poder haber aclarado algunas dudas importantes, o haber despertado algo de curiosidad para que averigüen más.
Si deseas profundizar más tus conocimientos sobre HTML5, puedes ver los siguientes tutoriales:
