¿Conoces HTML? Si tu respuesta es no, seguramente si te suenen términos como web, www o página web. Pues bien, HTML es el lenguaje sobre el cual está construida toda la web. Tanto si vas a concocer por primera vez HTML como si ya tienes experiencia, los siguientes datos te ayudarán a entenderlo mucho mejor.
1. ¿Qué es HTML?
HTML son las siglas de Hyper Text Markup Lenguaje. Es decir, Lenguaje de marcado de hipertexto. Para entender qué significa, analícemoslo por partes:
- Hipertexto. Se refiere a los enlaces (links). Un enlace puede conectar un documento con otro. Aunque hoy es muy común, en su momento fue una revolución.
- Marcado. Un lenguaje de marcado se encarga de estructurar documentos, es decir, indicar las secciones y jerarquía de elementos.
- Lenguaje. HTML es un lenguaje, su mismo nombre lo dice. Ahora bien, ten presente que es un lenguaje de marcado, no de programación.
2. HTML y la web nacieron a la vez
En 1989, Tim Berners Lee trabajaba como físico de partículas en el CERN (Organización Europea para la Investigación Núclear) en Suiza. Como todo científico su investigación requería acceder y compartir documentos con otros científicos. El proceso era arduo y se le ocurre que los mismos documentos tengan enlaces en su contenido. Así se podía tener un índice que conecte los documentos y que cada documento podía referenciar a otros. Entonces comienza a trabajar en HTML.
La primera versión de HTML, tenía solo 18 etiquetas, y en 1990 se publica la primera página web (que puedes ver aqui). En 1993 el CERN libera el código HTML al mundo.
La web es el conjunto de documentos HTML interconectados alrededor del mundo gracias a internet. Así que Tim Bernes Lee no solo es el creador de HTML, sino también el creador de la web (Si quieres ser desarrollador web, HTML es el primer lenguaje que debes aprender).
3. Sintaxis de HTML
HTML es fácil de aprender. Su sintaxis está basada en etiquetas: una de apertura y una de cierre. Y dentro de ellas va el contenido. Por ejemplo:
<etiqueta>Contenido</etiqueta>
Las etiquetas se indican entre los símbolos < y > y la etiqueta de cierre se indica además con /
Las etiquetas pueden contener información adicional indicada con atributos. Los atributos tienen un nombre y un valor. Por ejemplo:
<etiqueta atributo="valor">Contenido</etiqueta>
Un ejemplo con código real:
<a href="https://ed.team">Ir a EDteam</a>
El código anterior muestra el texto Ir a EDteam que al darle click te llevará a https://ed.team
4. W3C
La web fue llamada World Wide Web (Red de alcance mundial) y desde entonces las tres www fueron un sinónimo de web. Sin embargo, cada empresa implementaba HTML a su propio modo, por lo que en 1994 se crea la World Wide Web Consortium (W3C), una organización que fija los estándares web. No solo HTML, sino tecnologías como CSS, SVG, APIs web, etc. El primer presidente de la W3C fue Tim Berners Lee.
Para hacer una analogía, la W3C es para la web lo que la Real Academia Española es para el castellano. Ellos crean las reglas y definen las formas correctas de trabajar pero no pueden obligar a seguirlas (los usuarios puede decidir ignorar esas reglas). Así que cada navegador implementa a su modo los estándares.
5. HTML5 2004
HTML había avanzado hasta la versión 4.01 (1999) y se había vuelto muy confuso. ¡Existían siete versiones de HTML a la vez!:
- HTML transitional
- HTML strict
- HTML frameset
- XHTML transitional
- XHTML strict
- XHTML frameset
- XHTML 1.1
La W3C tenía el proyecto de unificar todo en XHTML2. Lo que significaba la muerte de HTML como tal. Sin embargo, a los desarrolladores no les gustó la idea: era demasiado estricto y con poca compatibilidad con versiones anteriores, así que presentaron un borrador de una nueva versión de HTML pero la W3C la rechazó. Así que crearon una organización alterna: WHATWG (Web Hypertext Application Technology Working Group) para continuar con el desarrollo de HTML.
En 2004 la WHATWG presentó la primera especificación de HTML5 y en 2007 la W3C adopta este documento para continuar el desarrollo de HTML. En 2009, la W3C abandonó XHTML2 definitivamente. HTML había renacido y su versión 5 no fue solo un cambio de número, significó la revolución más grande de la web hasta la fecha.
6. HTML5 es más que solo HTML
Para entender esto hay que considerar que aunque la W3C define los estándares, la última palabra la tienen los desarrolladores y por sobre todo las empresas que crean los navegadores web porque son quienes llevan los estándares al público final. Y justo de de los desarrolladores de estas empresas nació la WHATWG.
HTML5 incluía nuevas etiquetas semánticas pero coincidía con nuevas capacidades de los navegadores como:
- Web sockets
- Storage
- Acceso al dispositivo
- Canvas
- Web GL
- Multimedia
- Animaciones, 3D y efectos avanzados con CSS.
Por lo que el marketing de HTML5 incluía además del lenguaje de marcado, a las APIs web mencionadas, incluso a CSS (al que se le llamó CSS3, aunque técnicamente CSS3 nunca existió). Hasta la fecha al referirse a HTML5, podemos entender no solo al lenguaje, sino a las APIs del navegador (aunque técnicamente son cosas muy diferentes).
7. Web components
Hasta ahora, las etiquetas que usamos en HTML son definidas por el standard e implementadas por los navegadores. No tenemos forma de crear elementos personalizados ni encapsular fragmentos de código para su reutilización. Por ejemplo, si quiero crear mi propio menu:
<ed-menu></ed-menu>
No puedo, porque la etiqueta edmenu no existe en el standard. Sin embargo, los Web Components son el futuro de la web porque resuelven este problema con cuatro tecnologías:
- Custom Elements Podemos crear nuestros propios elementos usando JavaScript.
- Plantillas HTML Con el elemento
<template>de HTML podemos encapsular marcado HTML reutilizable que será llenado con JavaScript. - Shadow DOM Crea un DOM oculto que pertenece a cada Web Componente y está separado del DOM principal.
- HTML Imports Permite importar archivos HTML dentro de otros.
https://developer.mozilla.org/es/docs/Web/Web_Components
8. Un buen código HTML te ayuda al SEO
Ya que HTML es un lenguaje de marcado y su función es darle estructura y jerarquía al contenido, Google tiene en consideración tu código HTML para sus resultados de búsqueda. Tanto así que los análisis SEO suelen empezar por un análisis del código HTML buscando corregir:
- Páginas que no tengan
<h1>(o lo tengan duplicado) - Páginas que no tengan meta description
- Imágenes sin atributo
alt - Páginas sin etiqueta
<title> - Enlaces que apunten a direcciones equivocadas
- Estructura de contenido (titulos de sección, elemento
main, etc.)
Así que si te dedicas al Marketing Digital, deberias aprender HTML.
9 . HTML soporta media queries
Las media queries son consultas a las características de pantalla del dispositivo, como su ancho, su alto, su proporcion de aspecto, su orientación (vertical u horizontal), etc. Estas se pueden consultar con CSS mediante la regla @media y con JavaScript mediante el método matchMedia() Pero, ¿sabías que también puedes usar las media queries con HTML? Con el elemento picture podemos cambiar de imagen según la media query:
<picture>
<source srcset="imagen-l.jpg" media="(min-width: 800px)">
<source srcset="imagen-m.jpg" media="(min-width: 400px)">
<img srcset="imagen-s.jpg" alt="Imagen">
</picture>
10. Existen dos versiones de HTML en paralelo
Aunque históricamente la W3C es la organización que regula los estándares web, existen dos especificaciones de HTML: la de la W3C y la de la WHATWG. Entonces, ¿cuál es la oficial?
Si nos ponemos estrictos, la oficial es la de la W3C por temas históricos e institucionales, sin embargo, en la práctica la especificación más aceptada por los desarrolladores es la de la WHATWG. Hay que recordar que la W3C continuó el desarrollo de HTML (que había abandonado) a partir del trabajo de la WHATWG. Y que incluso la WHATWG acusa públicamente a la W3C de republicar su trabajo y les pide dejar de hacerlo.
Para la W3C, HTML se encuentra en su versión 5.2 mientras que para la WHATWG, HTML no tiene números de versión y le llaman Estándar vivo (living standard). El sitio caniuse.com muy famoso porque permite consultar el soporte de los navegadores para tecnologías web usa el living standar de la WHATWG.
¿Cómo aprender HTML?
HTML es el primer lenguaje que debes aprender si quieres ser un desarrollador web. Además, aunque ya tengas experiencia nunca viene mal repasar las bases de HTML (que son las bases de todo el desarrollo web). Ten en cuenta que no es un lenguaje de programación por lo que con HTML no harás calculos ni formulas. Su función es estructurar contenido, así que aprenderlo es sencillo.
En EDteam tenemos un curso gratis para que aprendas HTML. Puedes empezar hoy mismo. Tu futuro te está esperando.