Lo primerísimo que hay que saber sobre HTML5 es que no es un lenguaje de programación, sino que es un lenguaje de marcado en su última versión y cuyas siglas corresponden a "HyperText Markup Language". Así se definen cada una de las siglas de HTML:
- HyperText o hipertexto. El hipertexto es un texto que enlaza con otros contenidos que pueden ser bien otros textos u otros archivos. Esta es la base del funcionamiento de la web, que se basa en recursos y páginas interconectadas.
- Markup, que significa marca o etiqueta. Todas las páginas web están construidas basándonos en etiquetas. Un ejemplo de una etiqueta HTML es la que identifica a un párrafo, que se compone de la etiqueta párrafo, el contenido de la etiqueta y el cierre del párrafo: <p>Hola</p>.
- Language o lenguaje. HTML es un lenguaje, es decir, tiene sus normas, su estructura y una serie de normas que sirven para definir tanto la estructura como el contenido de un sitio web.
¿De qué se compone el código HTML?
En HTML se utiliza el término 'elemento' para referirse a cada una de las partes que componen un documento HTML. A veces se usan de forma indiferenciada los términos 'elementos' y 'etiquetas', pero en la práctica un elemento es mucho más que una etiqueta y está formado por:
- Etiqueta de apertura.
- Cero o más atributos.
- Texto dentro de la etiqueta.
- Etiqueta de cierre.
El texto ubicado dentro de la etiqueta no tiene por qué incluirse siempre, ya que hay etiquetas HTML que no pueden estar vinculadas a ningún texto.
Vamos a ver un ejemplo de elemento:
En este ejemplo el elemento está compuesto por una etiqueta, atributos y contenidos de texto. Las etiquetas se utilizan para marcar el inicio y el fin de un elemento, en el caso del ejemplo anterior lo que se indica es el inicio y el fin de un párrafo.
Por otro lado, el contenido de un elemento pueden ser caracteres, comentarios u otro tipo de contenido que esté delimitado dentro de las etiquetas de inicio y de cierre. En este caso el contenido es "Este es el contenido de un párrafo".
Los atributos de un elemento siempre se colocan dentro de la etiqueta de inicio y se componen de un nombre (ej.: class) y un valor (ej.: normal).
Las grandes ventajas de HTML5
En tu día a día interactúas con HTML5 sin darte cuenta. ¡Estoy segura de que con estas curiosas ventajas de usar este lenguaje de marcado entenderás de lo que hablo!
- Capacidad de arrastrar y soltar elementos en una página web, lo que permite una interacción más intuitiva con el usuario.
- Compatibilidad con diferentes plataformas y dispositivos, desde portátiles hasta smartphones, lo cual simplifica mucho la creación de sitios web responsive.
- Posibilidad de guardar información localmente en el dispositivo del usuario sin necesidad de conexión a internet.
- Esta versión del lenguaje tiene una función llamada "canvas" que permite crear gráficos y animaciones complejas directamente en la página web.
¿Cómo interactúa HTML5 con nuestro navegador?
Los navegadores web interpretan el lenguaje HTML para mostrar los sitios y aplicaciones web tal y como nosotros los vemos como usuario. En la primera imagen que aparece a continuación se muestra un sitio web y en la segunda, se puede ver el lenguaje HTML de la misma web.
Diferencias entre HTML5 y HTML4/XHTML
La principal diferencia radica en la capacidad de HTML5 para incorporar nuevas etiquetas como audio, video y canvas. Además, HTML5 también ofrece una mayor flexibilidad, lo que hace que sea más fácil y eficiente escribir código limpio y semántico, ayudando también a la accesibilidad para dispositivos móviles.
En cuanto a XHTML y HTML4, son tecnologías más antiguas que no tienen estas capacidades avanzadas. Sin embargo, todavía son utilizados en el desarrollo web debido a su compatibilidad con navegadores más antiguos.
Funcionamiento HTML5
Para que una web se muestre tal y como la solemos ver tiene que pasar por un proceso. Desde el navegador se solicita una petición al servidor mediante una dirección https://.../index.com.
Posteriormente, el servidor recupera esa página del disco duro, la devuelve al navegador y la página se muestra.
¿Qué novedades tiene HTML5?
Como mencionaba al inicio, HTML5 es la última versión de HTML publicada en el 2014. Esta versión incluye varias novedades que reflejan las necesidades actuales del web developer. Por ejemplo, permite la reproducción interna de vídeos, audios y juegos sin que sea necesario utilizar programas o plug-ins externos. Por eso programas como Adobe Flash están perdiendo valor de forma tan llamativa.
HTML5 también tiene como objetivo mejorar el orden de la información en la red, de tal manera que el contenido sea más comprensible para las personas y también para las máquinas, al indicar el tipo de contenido que contiene cada elemento con etiquetas semánticas, como por ejemplo encabezados, párrafos, imágenes o formularios. Usado de la forma correcta, se mantiene el entendimiento sin comprometer el posicionamiento en los motores de búsqueda web.
Una vez estructurada la web en HTML, ¿qué más se puede hacer?
El siguiente paso para seguir configurando un sitio o aplicación web es aplicar los estilos de manera selectiva con las hojas de estilo CSS3 a los elementos del documento HTML. De esta forma se puede generar el diseño visual de páginas web e interfaces de usuario.
¿Cómo se relaciona HTML5 con CSS3?
HTML5 y CSS3 son fundamentales en el desarrollo web moderno y normalmente les verás lado a lado. HTML5, como ya lo hemos visto, es responsable de la estructura del contenido, mientras que CSS3 se enfoca en el aspecto visual, es decir, los estilos y diseños.
La relación entre ambos es muy estrecha, ya que trabajan juntos para crear una experiencia agradable al usuario. HTML5 proporciona la estructura necesaria para ubicar los elementos visuales del CSS3 en su lugar adecuado.
¿Qué necesito para aprender desarrollo web?
Al estudiar programación aprendes a utilizar varias herramientas que permiten crear y desarrollar proyectos con mayor libertad y sumar un valor diferencial, ya que se puede aportar un estilo más trabajado y una estructura más personalizada que marque la diferencia.
Los bootcamps de Programación Web de HACK A BOSS consiguen en tan solo 16 semanas convertir en Full Stack Developers a personas con diferentes perfiles y que no necesariamente tienen experiencia previa en la materia. De esta forma, y teniendo la base de conocimientos necesarios de las tecnologías más punteras y de las materias blandas, puedes conseguir hacer realidad y llevar al siguiente nivel todos tus proyectos.
