HTML — HyperText Markup Language

El lenguaje de marcado estándar para crear la estructura del contenido en la web. Define el significado y la organización de cada elemento que el navegador renderiza, desde un título hasta un formulario de pago.

1993 Primera especificación pública
HTML5 Living Standard (WHATWG)
~110 Elementos en la especificación
A11y Accesibilidad desde la semántica

¿Qué es HTML?

HTML (HyperText Markup Language) es el lenguaje de marcado con el que se define la estructura y el significado del contenido web. No es un lenguaje de programación — no tiene variables, bucles ni condiciones — sino un sistema de etiquetas (tags) que envuelven el contenido para decirle al navegador qué es cada pieza: un título, un párrafo, una imagen, un enlace, un formulario…

Fue creado por Tim Berners-Lee en el CERN en 1991. La versión actual, HTML5, es un estándar vivo mantenido por el WHATWG (Web Hypertext Application Technology Working Group) con contribuciones continuas. Los navegadores actualizan su soporte de forma incremental, sin versiones mayores futuras planeadas.

HTML trabaja siempre junto a CSS (que da estilo visual) y JavaScript (que añade comportamiento e interactividad). Los tres forman la tríada fundamental del desarrollo frontend:

HTML

Estructura y semántica del contenido. Define qué es cada cosa.

CSS

Presentación visual. Define cómo se ve cada cosa.

JavaScript

Comportamiento dinámico. Define qué hace cada cosa.

Anatomía de un elemento HTML

Un elemento HTML típico tiene cuatro partes: etiqueta de apertura, atributos, contenido y etiqueta de cierre.

<a etiqueta
de apertura
 
href nombre del
atributo
=
"https://ejemplo.com" valor del
atributo
>  
 
Visita el sitio contenido
del elemento
 
</a> etiqueta
de cierre
  • Etiqueta de apertura — <nombre>. Inicia el elemento. Puede incluir atributos.
  • Atributos — pares nombre="valor" separados por espacios dentro de la etiqueta de apertura. Los booleanos no necesitan valor: <input disabled>.
  • Contenido — texto, otros elementos HTML, o ambos. Puede estar vacío.
  • Etiqueta de cierre — </nombre>. Obligatoria en la mayoría de elementos. Los elementos vacíos no la tienen.

Tipos de elementos

Los elementos HTML se clasifican según su comportamiento de renderizado por defecto:

Elementos de bloque

Ocupan todo el ancho disponible y fuerzan un salto de línea antes y después. Se apilan verticalmente.

<div> <p> <h1>–<h6> <ul> <ol> <table> <form> <section> <article> <header> <main> <footer> <blockquote> <pre>

Elementos en línea

Fluyen dentro del texto, solo ocupan el espacio de su contenido y no fuerzan saltos de línea.

<span> <a> <strong> <em> <code> <img> <button> <label> <abbr> <mark> <kbd> <time> <sub> <sup>

Elementos vacíos (void)

No tienen contenido ni etiqueta de cierre. Pueden escribirse como <br> o <br /> — ambas son válidas en HTML5.

<br> <hr> <img> <input> <link> <meta> <source> <track> <wbr> <area> <base> <col> <embed>

CSS puede cambiar el comportamiento de cualquier elemento con display: block, display: inline, display: flex o display: grid, pero el HTML semántico no cambia.

Atributos globales

Todos los elementos HTML aceptan estos atributos independientemente de su tipo:

Atributos que acepta cualquier elemento idstringIdentificador único en el documento. Usado por CSS, JS y anclas de enlace. classlistLista de clases CSS separadas por espacios. No tiene que ser única. langBCP 47Idioma del contenido: es, en, fr, pt-BR… direnumltr (izq. a der.), rtl (der. a izq.), auto (detecta el idioma). hiddenbooleanOculta el elemento semánticamente. Equivale a display:none pero con significado HTML. tabindexinteger0 = enfocable en orden natural, -1 = solo por JS, valores positivos no recomendados. contenteditableenumtrue, false, plaintext-only. Hace el elemento editable por el usuario. data-*stringDatos personalizados accesibles desde JS via element.dataset. titlestringTooltip al pasar el cursor. En <abbr>, contiene la expansión. aria-*variesAtributos de accesibilidad ARIA: roles, estados y propiedades para tecnologías asistivas.

Estructura básica de un documento HTML5

Todo documento HTML debe comenzar con esta estructura mínima. Cada parte tiene un propósito específico:

<!DOCTYPE html> ← Activa el modo estándar (sin DOCTYPE → Quirks Mode)
<html lang="es"> ← Elemento raíz; lang es obligatorio para a11y
  <head> ← Metadatos, invisible para el usuario
    <meta charset="UTF-8"> ← Siempre primero; evita errores de codificación
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    ← viewport: activa el diseño responsive en móviles
    <title>Título de la Página — Nombre del Sitio</title>
    ← Aparece en la pestaña, marcadores y resultados Google (50-60 chars)
    <meta name="description" content="Descripción de la página (150-160 chars)">
    <link rel="stylesheet" href="styles.css"> ← CSS externo
  </head>
  <body> ← Todo el contenido visible va aquí
    <header>
      <h1>Título principal de la página</h1>
    </header>
    <main> ← Contenido único de esta página
      <article>
        Contenido principal...
      </article>
    </main>
    <footer>© 2025 Mi Sitio</footer>
    <script src="app.js" defer></script> ← JS al final o con defer
  </body>
</html>

Semántica y accesibilidad

HTML semántico significa usar el elemento correcto para cada tipo de contenido, no el que quede mejor visualmente. Un <nav> le dice al navegador (y a los lectores de pantalla) que ese bloque es navegación; un <div> no dice nada.

Los beneficios son concretos: los lectores de pantalla ofrecen atajos de teclado basados en landmarks semánticos (<main>, <nav>, <aside>), los motores de búsqueda entienden mejor la jerarquía del contenido, y el código es más mantenible para otros desarrolladores.

  • Usa <button> para acciones, <a> para navegación — nunca al revés.
  • Añade lang en <html>. Es requerimiento WCAG 3.1.1 (Level A).
  • Todo <img> necesita alt. Las imágenes decorativas usan alt="".
  • Los formularios deben vincular <label> a sus <input> con for/id.
  • No uses encabezados (h1–h6) solo por el tamaño visual — respeta la jerarquía.

Referencia rápida de reglas esenciales

  • Siempre incluye <!DOCTYPE html> como primera línea.
  • Siempre incluye lang en <html>.
  • Siempre incluye <meta charset="UTF-8"> como primer hijo de <head>.
  • Un solo <h1> por página. No saltes niveles de encabezado.
  • Todo <img> necesita alt; las imágenes decorativas usan alt="".
  • No uses tablas para maquetar páginas — usa CSS Flexbox o Grid.
  • Usa elementos semánticos (<nav>, <main>, <article>) antes de recurrir a <div>.
  • Añade rel="noopener noreferrer" a todos los enlaces con target="_blank".
  • Los scripts externos deben tener defer o colocarse antes de </body>.
  • Valida tu HTML en validator.w3.org antes de publicar.