El lenguaje de marcado de hipertexto (HTML) es un lenguaje de marcado que sirve para estructurar y representar el contenido de una página web. Las páginas web se muestran en navegadores y pueden incluir texto, enlaces, imágenes, sonido y vídeo, entre otros elementos. El HTML indica al navegador cómo deben organizarse y presentarse esos distintos tipos de contenido; además, permite añadir metainformación (datos sobre la página), como el autor o la descripción, que normalmente no se muestra directamente en pantalla. Las hojas de estilo en cascada (CSS) se utilizan para dar estilo a los elementos HTML, mientras que JavaScript se utiliza para manipular la estructura HTML y los estilos CSS y añadir interactividad.

¿Qué hace HTML?

  • Define la estructura del contenido mediante elementos (también llamados etiquetas), por ejemplo <h1> para títulos, <p> para párrafos o <img> para imágenes.
  • Permite enlazar recursos y páginas con la etiqueta <a> (hipervínculos).
  • Incluye metadatos en la sección <head> (como <meta>, <title> y enlaces a hojas de estilo).
  • Soporta formularios (<form>, <input>, <button>) para la interacción y el envío de datos.
  • Integra multimedia (audio y vídeo) y gráficos (SVG, <canvas>).

Estructura básica de un documento HTML

  • DOCTYPE: la primera línea suele ser <!DOCTYPE html>, que indica al navegador que se trata de HTML5.
  • Raíz: el elemento <html> contiene todo el documento y puede incluir el atributo lang para especificar el idioma.
  • Cabeza (<head>): metadatos, título, enlaces a CSS y scripts que deben cargarse antes del contenido visible.
  • Cuerpo (<body>): contenido visible por el usuario—texto, imágenes, enlaces, formularios, etc.

Etiquetas y atributos

Las etiquetas (por ejemplo <div>, <section>, <article>) envuelven contenido y pueden llevar atributos que modifican su comportamiento o proporcionan información (por ejemplo, id, class, src en imágenes, alt en <img>). HTML5 introdujo etiquetas semánticas como <header>, <nav>, <main>, <aside> y <footer> que ayudan a expresar la estructura lógica del contenido y mejorar la accesibilidad y el SEO.

HTML5 y su evolución

HTML ha evolucionado desde sus inicios y hoy en día las especificaciones las mantienen organismos como el World Wide Web Consortium (W3C) y el WHATWG, que trabaja en el "Living Standard" de HTML. HTML5 trajo muchas mejoras respecto a versiones anteriores: soporte nativo para audio y vídeo, APIs para almacenamiento local, nuevas etiquetas semánticas, mejor manejo de formularios y control multimedia, entre otras.

Accesibilidad y buenas prácticas

  • Usar etiquetas semánticas en lugar de <div> genéricos siempre que sea posible.
  • Proporcionar textos alternativos (alt) en las imágenes para lectores de pantalla.
  • Asegurar una estructura lógica de encabezados (<h1>–<h6>) y controles de formulario con etiquetas (<label>).
  • Evitar contenido que dependa únicamente del color; comprobar el contraste y la navegabilidad por teclado.
  • Usar atributos ARIA cuando sea necesario para mejorar la interpretación por tecnologías asistivas.

Interacción con CSS y JavaScript

HTML define la estructura, CSS define la apariencia y JavaScript añade comportamiento. Separar responsabilidades (estructura en HTML, presentación en CSS y lógica en JavaScript) facilita el mantenimiento y la accesibilidad. Los navegadores modernos interpretan las tres tecnologías para ofrecer páginas ricas e interactivas.

Compatibilidad y validación

Existen distintas versiones y recomendaciones, por lo que es importante validar el HTML y probar páginas en varios navegadores y dispositivos. Herramientas de validación y linters ayudan a detectar errores y a seguir las buenas prácticas del estándar.

Resumen

HTML es la base de la web: organiza contenido, permite integrar multimedia y formularios, y junto con CSS y JavaScript crea experiencias web completas. Su evolución continua (con aportes de organizaciones como el World Wide Web Consortium y el WHATWG) garantiza nuevas capacidades y compatibilidad con los navegadores actuales.