A continuación vamos a ver qué es HTML y para qué se utiliza, de modo que puedas comenzar a aprender este lenguaje, ampliamente utilizado en muchísimos ámbitos.
Qué es HTML
HTML es un lenguaje de marcado de hipertexto mediante al cual podemos crear documentos que pueden ser consumidos por un navegador web. El nombre de HTML es un acrónimo de HyperText Markup Language.
Dado que HTML es un lenguaje interpretado, podemos modificar la apariencia de los documentos HTML en tiempo real. Por ejemplo, es habitual modificar el modo en el que se muestra el código HTML según el dispositivo en el que se ejecute o en base a ciertos parámetros como el ancho de pantalla, obteniendo diseños responsivos que se adaptan a todo tipo de pantallas.
Historia de HTML
HTML fue creado por Tim Bernes-Lee en 1991 como un lenguaje basado en el lenguaje de marcado SGML. Sin embargo, la versión inicial de HTML no se presentó hasta 1993. A HTML le siguió HTML2, también basado en SGML y publicado en el año 1995. A pesar de tratarse de la segunda versión de HTML, los documentos HTML 2 eran todavía muy simples, por lo que no se soportaban elementos que a día de hoy son básicos como las tablas.
El consorcio W3C había estado detrás de las últimas versiones de HTML, aunque desde ahora cambiaría la tendencia debido a ciertas decisiones de esta organización, provocando una división en dos ramas de las futuras versiones de HTML.
Mientras que en el pasado era el consorcio W3C «World Wide Web Consortium» el encargado de definir el estándar HTML, en la actualidad es la comunidad WHATWG la que se encarga de definirlo.
El nombre WHATWG es un acrónimo de Web Hypertext Application Technology Working Group, que es una organización formada por gente que trabaja en los navegadores web más utilizados, como Chrome, Firefox, Safari, Opera o Edge. Es decir, que los miembros de esta organización son responsables de Microsoft, Apple, Google, Opera y Mozilla.
El motivo de que el control del estándar pasase a esta nueva organización fue que el consorcio W3C prefiríó que la siguiente versión de HTML pasase a adoptar el estándar de XHTML, que fue una idea con mala recepción por parte de la comunidad. Si nunca has escuchado hablar de XHTML, has de saber que a principios de siglo muchos pensaban que el futuro de Internet estaba en el lenguaje XML, por lo que HTML dejó de estar basado en SGML para pasar a ser un lenguaje de marcado XML bajo el nombre de XHTML, publicado en el año 2000.
El cambio de SGML a XML supuso un gran cambio, con más y más estrictas reglas que debían ser definidas. Sin embargo, las empresas encargadas de desarrollar los navegadores más utilizados se dieron cuenta de que esta decisión no era una buena idea, por lo que crearon su propio estándar, que es lo que actualmente conocemos como HTML5, que es el estándar que sigue vigente. El desarrollo de HTML5 duró varios años y se publicó oficialmente en el año 2014, incorporando etiquetas que soportaban varios tipos de contenido multimedia en los documentos HTML sin la necesidad de usar addons.
El consorcio W3C no estaba de acuerdo con las decisiones entorno al estándar HTML5, por lo que durante varios años existieron dos estándares compitiendo por hacerse un hueco, siendo HTML5 el más aceptado. Sin embargo, a principios del 2019 el consorcio W3C cedió e hizo oficial que el estándar real y definitivo de HTML era el publicado por la asociación WHATWG y no el suyo.
Tras 20 años, todo lo que quedaba de XHTML ha desaparecido, siendo ahora HTML5 todo lo que tenemos, que es un término que describe una serie de tecnologías. Además de definir de las reglas HTML, HTML5 agrega también diversos estándares y APIs como SVG o WebGL, que permiten la creación de gráficos vectoriales y la inclusión de elementos 3D respectivamente.
A día de hoy ya no es de esperar que exista una nueva versión de HTML, ya que HTML ha pasado a estar formado por un conjunto de muchos módulos independientes que agregan nuevas funcionalidades. Los navegadores se van adaptando poco a poco a todos estos módulos que aparecen. Lo mismo ocurre con CSS3, lenguaje del cual se ha dejado de hablar para referirse él simplemente como CSS. Del mismo modo, también podríamos decir lo mismo de JavaScript, que incorpora nuevas funcionalidades con cada nueva versión anual. Si quieres, puedes consultar todos los datos acerca del estándar actual de HTML aquí.
Conceptos Básicos de HTML
El código HTML puede editarse en archivos estáticos. Sin embargo, no tardó en generarse dinámicamente en los servidores y en el navegador del usuario, al que también nos referimos como cliente, para crear así aplicaciones más complejas. Podemos crear o generar código HTML de diversas formas:
- El método más sencillo mediante el cual podemos agregar código HTML consiste en agregarlo manualmente a cualquier archivo HTML, al cual podemos acceder mediante algún navegador web. Se suele hacer referencia a este código agregado manualmente como código HTML estático. Este método es el esencial y el más adecuado cuando queremos aprender HTML.
- Otro método mediante el cual podemos agregar código HTML consiste en generarlo dinámicamente mediante algún script del lado del servidor. Es decir, que le podemos indicar a un lenguaje de programación que muestre código HTML que pueda ser consumido por un navegador. Es lo que sucede cuando accedes a muchos sitios web. Podemos generar código HTML mediante lenguajes como PHP, Ruby, Python o JavaScript gracias a Node.js.
- Finalmente también podemos generar el código HTML de forma dinámica del lado del cliente, en el navegador del usuario, mediante JavaScript. Es decir, que tras cargar los archivos JavaScript, el navegador los ejecutará, pudiendo ejecutar una aplicación web en el navegador del usuario que solamente necesite acceder al servidor para obtener o almacenar datos.
Vamos a centrarnos en el primer método, dejando los otros métodos para otros tutoriales.
Los archivos HTML tienen por defecto la extensión .html, aunque también podrían tener la extensión .htm. En el interior de los archivos HTML organizaremos los contenidos mediante etiquetas, que son los elementos o bloques fundamentales que nos permitirán crear documentos HTML.
Cada etiqueta HTML tiene un propósito y además, muchas también permiten que incluyamos otras etiquetas anidadas en su interior, pudiendo así crear complejas estructuras.
En este ejemplo usamos la etiqueta <img> para agregar una imagen:
<img src="/imagen.jpg">Tal y como puedes ver, las etiquetas se definen entre los símbolos < y >, siguiendo el formato <etiqueta>. En cuanto al elemento src, se trata de un atributo, tal y como veremos más adelante, que en este caso tiene el valor /imagen.jpg, que es la ruta de la imagen que queremos agregar.
En el siguiente ejemplo usamos una etiqueta <p>, que es la que usamos cuando queremos definir un párrafo:
<p>Esto es un párrafo</p>A diferencia de la etiqueta <img>, la etiqueta <p> incluye contenido en su interior, por lo que agregamos la etiqueta de apertura <p>, luego el contenido de la etiqueta y finalmente la etiqueta de cierre </p>. Las etiquetas de cierre siguen el formato </etiqueta>, siendo como las etiquetas de apertura pero incluyendo una barra inclinada antes del nombre de la misma.
También podemos anidar etiquetas, tal y como ocurre con las listas, cuyos elementos se definen entre la etiqueta de apertura de lista <ul> y la de cierre de lista </ul>. Usaremos la etiqueta <li> para definir cada uno de los elementos de la lista:
<ul>
<li>Primer elemento de la lista</li>
<li>Segundo elemento de la lista</li>
<li>Tercer elemento de la lista</li>
</ul>Cuando una página HTML se muestra en el navegador, las etiquetas son interpretadas y el navegador muestra los elementos en función de las reglas que definen la apariencia visual de los mismos. Algunas de estas reglas se incluyen por defecto, como por ejemplo el orden de los elementos de una lista o los estilos con los que se muestran los enlaces, subrayados y en color azul. Sin embargo, la mayor parte de las reglas deben se deben definir mediante CSS.
HTML no se centra en cómo se verá un documento, sino en cómo se define y en cómo se estructura. La apariencia de un documento HTML depende tanto del navegador como de los estilos CSS que se apliquen.
Edu Lázaro: Ingeniero técnico en informática, actualmente trabajo como desarrollador web y programador de videojuegos.
