Saltar al contenido

HTML

Formato HTML: La Fundación de la World Wide Web

5 min read

Formato HTML: La Fundación de la World Wide Web

Si estás leyendo este artículo, estás viendo HTML. Cada sitio web que has visitado, desde simples blogs personales hasta complejas aplicaciones web como Netflix o Gmail, se basa en una única tecnología fundamental: el formato HTML.

HTML (HyperText Markup Language o Lenguaje de Marcado de Hipertexto) es el esqueleto invisible que da estructura a Internet. Sin él, los navegadores web no sabrían cómo mostrar texto, dónde poner imágenes o cómo vincular una página con otra.

En esta guía, exploraremos qué es un archivo HTML, cómo funciona, una breve historia de su evolución y por qué sigue siendo el bloque de construcción indiscutible de la web.


¿Qué es un archivo HTML?

Un archivo .html o .htm es un archivo de texto sin formato (plain text) que contiene código escrito en HyperText Markup Language. No es un lenguaje de programación como Python o JavaScript; es un lenguaje de marcado.

Un lenguaje de programación utiliza la lógica (como "si esto sucede, haz aquello"), mientras que un lenguaje de marcado es puramente descriptivo. Utiliza "etiquetas" (tags) para anotar el texto de modo que una máquina (específicamente, un navegador web como Chrome o Safari) sepa cómo dar formato y mostrar ese texto.

Por ejemplo, si deseas que una oración aparezca como un encabezado grande, la envuelves en una etiqueta <h1>. Si deseas que una palabra esté en negrita, la envuelves en una etiqueta <strong>.

La Anatomía de un Archivo HTML

Un archivo HTML estándar tiene una estructura muy específica. Aquí hay un ejemplo simple:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Mi Primer Sitio Web</title>
</head>
<body>
    <h1>¡Bienvenido a la Web!</h1>
    <p>Este es un párrafo de texto que explica lo <strong>increíble</strong> que es HTML.</p>
    <a href="https://example.com">¡Haz clic aquí para visitar otro sitio!</a>
</body>
</html>

Desglosemos los componentes clave:

  • <!DOCTYPE html>: Le dice al navegador que este archivo utiliza el moderno estándar HTML5.
  • <html>: El elemento raíz (root) que envuelve todo el contenido de la página.
  • <head>: Contiene metadatos (datos sobre datos), como el título de la página, el conjunto de caracteres y enlaces a hojas de estilo. Esta parte no es visible en la página web en sí.
  • <body>: Aquí es donde va todo el contenido visible: encabezados, párrafos, imágenes, videos y enlaces.

El "Hipertexto" (HyperText) en HTML

La característica más revolucionaria de HTML está justo en su nombre: HyperText.

Antes de la World Wide Web, leer documentos en una computadora era una experiencia lineal, muy parecida a leer un libro físico. Leías la página 1, luego la página 2, luego la página 3.

HTML introdujo el concepto de hipervínculos (a través de la etiqueta <a> o "ancla"). Un hipervínculo permite al usuario hacer clic en una palabra en un documento y ser transportado instantáneamente a un documento completamente diferente, alojado en un servidor diferente, ubicado en un país diferente. Esta "red" (web) de información no lineal e interconectada es lo que le dio su nombre a la World Wide Web.


La Evolución: De la Web 1.0 a HTML5

HTML fue inventado en 1990 por Tim Berners-Lee, un físico del CERN, que quería una forma sencilla para que los científicos compartieran documentos de investigación a través de diferentes redes informáticas.

Los Primeros Días (HTML 1.0 - 4.01)

En la década de 1990 y principios de la de 2000, HTML era bastante básico. Los sitios web parecían libros de texto digitales. Los desarrolladores comenzaron a usar etiquetas HTML para cosas para las que no fueron diseñadas (como usar etiquetas <table> para crear diseños de página complejos) porque no había una mejor manera de controlar el diseño. El código era desordenado y las páginas eran estáticas.

La Revolución de CSS y JavaScript

Para arreglar el desorden, los estándares web evolucionaron para separar la estructura de una página web de su diseño y su comportamiento.

  • HTML siguió siendo la estructura (los huesos).
  • CSS (Hojas de Estilo en Cascada) se introdujo para manejar el diseño (la piel y la ropa: colores, diseños, fuentes).
  • JavaScript se introdujo para manejar el comportamiento (los músculos: interactividad, ventanas emergentes, datos dinámicos).

HTML5: El Estándar Moderno

Lanzado en 2014, HTML5 fue un gran salto adelante. Introdujo etiquetas "semánticas" como <article>, <nav> y <footer>, que hicieron que el código fuera mucho más fácil de leer y mejoraron enormemente el SEO (Optimización de Motores de Búsqueda) y la accesibilidad para los lectores de pantalla.

Lo que es más importante, HTML5 introdujo soporte nativo para multimedia a través de las etiquetas <audio> y <video>. Esto eliminó oficialmente la necesidad de complementos (plugins) de terceros torpes e inseguros como Adobe Flash, allanando el camino para la web moderna rápida y compatible con dispositivos móviles.


Por Qué HTML Sigue Siendo Indispensable

Con herramientas modernas como React, Vue y creadores de sitios web complejos (como Wix o Squarespace), podrías preguntarte si los desarrolladores todavía necesitan saber HTML. La respuesta es un rotundo sí.

  1. Todo se Compila a HTML: No importa qué marco de trabajo (framework) avanzado de JavaScript utilices, el navegador solo entiende HTML, CSS y JS. Todos los frameworks web modernos finalmente generan HTML.
  2. SEO (Optimización de Motores de Búsqueda): Los algoritmos de búsqueda de Google dependen en gran medida del HTML bien estructurado. Si usas una etiqueta <h1>, Google sabe que es el tema más importante de la página. Si solo usas texto grande y en negrita sin la etiqueta adecuada, tu clasificación de búsqueda se verá afectada.
  3. Accesibilidad: Un HTML adecuado es crucial para la accesibilidad web. Los lectores de pantalla utilizados por usuarios con discapacidad visual dependen completamente de las etiquetas HTML (como el texto alt en las imágenes y las estructuras de encabezado adecuadas) para navegar por una página web.

Conclusión

Podría decirse que HTML es el lenguaje más exitoso e impactante jamás creado. Transformó las computadoras de máquinas de cálculo aisladas en una red globalmente conectada de conocimiento, comercio y entretenimiento. Ya sea que desees formatear una simple publicación de blog, aprender a codificar o construir la próxima startup tecnológica de miles de millones de dólares, tu viaje comienza con la humilde etiqueta <html>.

Buy me a coffee