HTML (HyperText Markup Language) o Lenguaje de Marcado de Hipertexto es el lenguaje de marcado estándar y fundamental utilizado universalmente para estructurar, diseñar y dar contenido a las páginas web y aplicaciones en Internet.
No es un lenguaje de programación tradicional (ya que no realiza operaciones lógicas ni bucles por sí mismo), sino un sistema basado en etiquetas que indica a los navegadores web (como Chrome, Firefox o Edge) cómo deben interpretar y desplegar los distintos elementos visuales y textuales de un sitio (párrafos, imágenes, enlaces, tablas y formularios).
¿Cómo funciona la estructura básica de HTML?
El código HTML se compone de una jerarquía de elementos delimitados por etiquetas angulares que suelen estructurarse en parejas de apertura y cierre:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Título de la página</title>
</head>
<body>
<h1>Cabecera principal</h1>
<p>Este es un párrafo de contenido en HTML.</p>
</body>
</html>- <DOCTYPE html>: Define la versión del estándar actual (HTML5) e indica al navegador que debe renderizar el documento bajo los estándares modernos.
- <head>: Contiene los metadatos ocultos de la página, como la codificación de caracteres, enlaces a hojas de estilo CSS y el título de la pestaña.
- <body> Agrupa todo el contenido visible y estructurado que el usuario final visualiza en la pantalla del navegador.
Evolución de los estándares y tecnologías asociadas
| Tecnología Web | Nombre Completo / Estándar | Propósito Principal en el Desarrollo |
|---|---|---|
| HTML | HyperText Markup Language | Estructura semántica, organización de contenidos y jerarquía de textos. |
| CSS | Cascading Style Sheets | Diseño visual, estilos, colores, tipografías y maquetación adaptativa (responsive). |
| JavaScript | Lenguaje de programación web | Interactividad dinámica, lógica del lado del cliente y control de eventos. |
| W3C / WHATWG | World Wide Web Consortium | Organismos internacionales encargados de definir, mantener y actualizar los estándares web oficiales. |
Características principales:
- Es independiente de la plataforma y del sistema operativo; cualquier dispositivo equipado con un navegador web moderno puede leer e interpretar documentos HTML de forma nativa.
- Permite el uso de hipervínculos (enlaces mediante la etiqueta
á), lo que constituye la esencia misma de la navegación interconectada en la World Wide Web. - A partir de la especificación moderna de HTML5, se introdujeron etiquetas con significado semántico avanzado (como
<header>,<nav>,<section>o<article>) que facilitan enormemente el posicionamiento SEO y la accesibilidad web. - Se integra de manera totalmente transparente con hojas de estilo CSS para el diseño estético y con scripts de JavaScript para dotar de dinamismo a las aplicaciones.
- Su sintaxis estricta y tolerante a fallos permite que los navegadores muestren el contenido incluso si existen pequeños errores de marcado en el código fuente.
Analogía: Imagina la construcción de una casa. El código HTML actúa exactamente como la estructura de hormigón, los tabiques de ladrillo, las tuberías maestras y las puertas que definen las habitaciones y los espacios principales de la vivienda. Por sí solo no tiene pintura bonita ni muebles (para eso está el CSS) ni interruptores automáticos complejos (para eso está el JavaScript), pero es el esqueleto imprescindible y fundamental sin el cual la casa no podría existir.
Actividad práctica
Objetivo:
Crear un documento HTML básico utilizando un editor de texto plano, validar su estructura semántica y visualizarlo localmente en un navegador web.
Tareas:
- Abre un editor de texto plano en tu sistema (como Nano, VS Code o Bloc de notas) y redacta un documento HTML mínimo que incluya una cabecera y un párrafo explicativo.
- Guarda el fichero en tu ordenador con el nombre
index.htmlasegurándote de que la codificación de caracteres esté configurada en UTF-8. - Haz doble clic sobre el archivo guardado para abrirlo automáticamente en tu navegador web predeterminado (Google Chrome, Firefox, etc.).
- Utiliza la herramienta de inspección de código del navegador (pulsando
F12) para comprobar la jerarquía de etiquetas del documento que acabas de crear.
Preguntas de reflexión:
- ¿Por qué se afirma que HTML es un lenguaje de marcado y no un lenguaje de programación tradicional?
- ¿Qué diferencia fundamental existe entre la sección
<head>y la sección<body>dentro de la estructura de una página web? - ¿Qué ventajas de accesibilidad y posicionamiento SEO aportan las etiquetas semánticas introducidas en HTML5 frente a la utilización genérica de contenedores visuales?
- ¿Cómo se complementa el lenguaje HTML con las hojas de estilo CSS y el lenguaje de programación JavaScript en el desarrollo web moderno?
- ¿Qué organismo internacional o consorcio es el encargado de supervisar la evolución y estandarización del lenguaje HTML en la actualidad?
Haz clic aquí para ver las soluciones y explicaciones
1. ¿Por qué se afirma que HTML es un lenguaje de marcado y no un lenguaje de programación tradicional?
Porque HTML no contiene lógica de programación, variables, estructuras condicionales ni bucles. Su única función es estructurar y organizar el contenido de un documento mediante etiquetas o marcas (*markup*), indicando al navegador qué es un título, un párrafo o una imagen, pero sin ejecutar algoritmos informáticos.
2. ¿Qué diferencia fundamental existe entre la sección <head> y la sección <body> dentro de la estructura de una página web?
La sección <head> contiene los metadatos de la página (como el título, la codificación de caracteres, enlaces a hojas de estilo o scripts externos), información que no se muestra directamente al usuario en la pantalla. La sección <body>, en cambio, contiene todo el contenido visual y funcional visible que interactúa directamente con el usuario (textos, imágenes, botones y formularios).
3. ¿Qué ventajas de accesibilidad y posicionamiento SEO aportan las etiquetas semánticas introducidas en HTML5 frente a la utilización genérica de contenedores visuales?
Las etiquetas semánticas (como <header>, <nav>, <article> o <footer>) otorgan un significado claro y explícito al contenido. Esto permite que los motores de búsqueda indexen y comprendan mejor la jerarquía de la página (mejorando el SEO) y facilita que los lectores de pantalla y tecnologías de asistencia interpreten correctamente la estructura para personas con discapacidad (mejorando la accesibilidad).
4. ¿Cómo se complementa el lenguaje HTML con las hojas de estilo CSS y el lenguaje de programación JavaScript en el desarrollo web moderno?
Trabajan en una división de responsabilidades conocida como separación de intereses: HTML proporciona la estructura y el contenido base; CSS se encarga del diseño visual, la estética y la adaptabilidad (*responsive design*); y JavaScript aporta la interactividad, el dinamismo y la lógica de programación en el lado del cliente.
5. ¿Qué organismo internacional o consorcio es el encargado de supervisar la evolución y estandarización del lenguaje HTML en la actualidad?
Actualmente, el estándar de HTML es desarrollado y mantenido por el WHATWG (*Web Hypertext Application Technology Working Group*), un consorcio formado por los principales fabricantes de navegadores web (Apple, Google, Mozilla y Microsoft) que desplazó al tradicional W3C en la evolución del estándar vivo de HTML.