Referencia de etiquetas

Etiqueta html: estructura del documento e idioma

La etiqueta <html> representa el elemento raíz de un documento HTML: contiene sus metadatos y su contenido. Úsala al preparar una página completa para reunir <head> y <body> y declarar el idioma principal. Por ejemplo, una página escrita en español empieza su elemento raíz con <html lang="es">.

Ejemplo mínimo: tu primera página

Guarda este código como mi-pagina.html, con codificación UTF-8, y abre el archivo en el navegador. No necesita servidor, CSS ni JavaScript.

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <title>Mi página</title>
  </head>
  <body>
    <p>Hola, mundo.</p>
  </body>
</html>

En la página aparece el párrafo «Hola, mundo.» y en la pestaña, el título «Mi página». El atributo lang="es" declara el español sin añadir texto visible. <html> no dibuja por sí mismo un recuadro ni un encabezado.

Sintaxis y estructura básica de HTML

<html> abre el elemento y </html> lo cierra. Su contenido es un <head> seguido de un <body>. En un documento HTML común, la raíz pertenece al documento; no se coloca dentro de un párrafo, una sección ni otro <html>. El HTML Living Standard para <html> define este modelo.

Cada parte cumple una función:

<!DOCTYPE html> es la declaración inicial que permite al navegador usar el modo estándar. Está antes de la raíz y no tiene etiqueta de cierre.
<html> reúne los elementos del documento y permite establecer información global, como el idioma.
<head> contiene metadatos: en el ejemplo, la codificación y el título. No es la cabecera visible de la página.
<body> contiene el texto y los demás elementos que forman el contenido de la página.

¿Es <html> lo mismo que doctype? No. El primero es un elemento; el segundo es una declaración que influye en el modo de procesamiento del documento. Si retiras el doctype del ejemplo, el navegador entra en modo quirks, aunque siga mostrando el párrafo. Consulta la guía de doctype para ampliar la comparación.

HTML es el lenguaje de marcado. <html> es uno de sus elementos, con una posición concreta; su nombre no significa que cada fragmento HTML necesite su propia raíz.

La raíz en el DOM

Al leer el archivo, el navegador construye el DOM: un árbol de objetos que representa el documento. En este ejemplo, <html> tiene como hijos a <head> y <body>; el párrafo está dentro del segundo.

La propiedad JavaScript document.documentElement devuelve el elemento raíz, que en estos documentos es <html>. El inspector muestra el árbol construido por el navegador, no necesariamente una copia exacta del código fuente: el analizador puede completar etiquetas omitidas o recuperar una estructura incorrecta.

Cómo declarar el idioma con lang

lang="es" indica que el idioma principal es español. El valor sigue las etiquetas de idioma BCP 47; puedes usar es-MX cuando corresponda identificar específicamente el español de México. No escribas lang="español".

El idioma se hereda: los elementos sin una declaración propia toman el de su antecesor. Si una cita está en inglés, usa lang="en" en el elemento que la contiene. Según las reglas de lang del estándar, esa declaración describe el idioma del contenido; no lo traduce.

El idioma correcto ayuda a los lectores de pantalla a elegir una pronunciación adecuada, siempre que la combinación de lector y voces disponibles admita ese idioma. También permite elegir reglas de separación de palabras: la hifenación automática con CSS, mediante hyphens: auto, depende del idioma y de los diccionarios del navegador. Declarar lang por sí solo no añade guiones.

Caso práctico: cuaderno con una cita en inglés

Guarda el documento como cuaderno.html en UTF-8 y ábrelo. La frase citada se ha creado para este ejercicio. El ejemplo no depende de archivos adicionales ni de scripts.

<!DOCTYPE html>
<html lang="es" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Cuaderno de aprendizaje</title>
  </head>
  <body>
    <main>
      <h1>Cuaderno de aprendizaje</h1>
      <p>Hoy practicamos una frase en otro idioma.</p>
      <blockquote lang="en">
        <p>Learning starts with one small step.</p>
      </blockquote>
      <p>El resto del cuaderno continúa en español.</p>
    </main>
  </body>
</html>

Se ven el encabezado, la introducción, la cita con la sangría habitual del navegador y el último párrafo. <head> prepara el documento; <body> contiene esa lectura; <html> establece su idioma y dirección. La cita y su párrafo heredan inglés, mientras que el resto conserva español. dir="ltr" hace explícita la dirección de izquierda a derecha, adecuada aquí para ambos idiomas; omitirlo en este documento conserva esa dirección predeterminada.

Comprueba el resultado paso a paso:

Revisa la raíz y la cita en el inspector: deben tener lang="es" y lang="en", respectivamente.
Con JavaScript habilitado, abre la consola y ejecuta esta consulta:
```
document.documentElement.lang
```
Debe devolver "es". Es una consulta de comprobación; no hace falta insertarla en el archivo.
Cambia el atributo de la raíz a lang="en", guarda y recarga. La consulta devuelve "en", pero las frases españolas siguen escritas en español: cambió la declaración, no el texto. Después restaura lang="es".
Retira solo la apertura y el cierre de <html>, conservando el doctype, <head> y <body>. El navegador crea la raíz y mantiene el contenido visible, pero la consulta devuelve "", porque ya no declaraste su idioma. Restaura las etiquetas con sus atributos.
Desactiva JavaScript y recarga el ejemplo original: toda la lectura permanece. Para revisar los atributos usa el inspector; la consulta de la consola requiere JavaScript.

Atributos, dirección y accesibilidad

<html> admite atributos globales y no tiene atributos específicos vigentes. lang declara idioma y dir declara dirección: uno no sustituye al otro. Los valores de dir son ltr, rtl y auto; el último determina la dirección a partir del contenido y se reserva para texto cuya dirección desconoces. Cambiar lang no establece automáticamente dir="rtl".

Otros globales son id y class. font-size es una propiedad CSS; document.documentElement.lang es una propiedad DOM que refleja el atributo lang. No son atributos específicos de <html>.

En HTML servido como text/html, no necesitas xmlns="http://www.w3.org/1999/xhtml"; la sintaxis HTML no usa ese atributo para declarar el espacio de nombres. Los documentos procesados como XML siguen otras reglas.

No añadas un rol ARIA a la raíz. Declara el idioma real y los cambios locales: beneficia la interpretación y la lectura asistida, sin garantizar mejoras de posicionamiento.

Omisión de etiquetas y errores frecuentes

¿Siempre debo escribir apertura y cierre? Conviene hacerlo al aprender: hace visible la estructura y permite declarar atributos. En text/html, el estándar permite omitir la apertura de <html> si lo primero dentro del elemento no es un comentario, y el cierre si el elemento no va seguido inmediatamente de un comentario. Omitir etiquetas no elimina el elemento del DOM. Las condiciones de omisión de <head> y <body> son distintas; revisa sus guías antes de abreviar una página.

Evita estos errores:

Escribir varias raíces para distintas secciones. Usa una raíz por documento; la recuperación del navegador no convierte esa autoría en válida.
Poner párrafos directamente dentro de <html> o después de </body>. Escríbelos dentro de <body>, aunque el navegador intente recolocarlos.
Confundir lang con charset. El primero identifica idioma; <meta charset="utf-8"> indica cómo interpretar los bytes del archivo. Si ves caracteres dañados, revisa también cómo guardaste el archivo y consulta la guía de <meta>.
Escribir <html /> esperando cerrarlo. En HTML, la barra no autocierra un elemento no vacío.

Compatibilidad y fuentes

<html>, lang y dir tienen soporte en los navegadores actuales. La referencia de MDN para <html>, consultada el 3 de octubre de 2026, complementa las fuentes normativas enlazadas. La disponibilidad de voces e hifenación depende del entorno; el soporte de la etiqueta no garantiza el mismo resultado en todas las tecnologías de asistencia.