Estructura del documento

<!DOCTYPE html>: la primera línea

La primera línea de todo documento HTML moderno es <!DOCTYPE html>. No es un elemento — es una declaración que le dice al navegador: “lo que sigue es HTML moderno”.

Los navegadores tienen dos modos de interpretar HTML: quirks mode (compatibilidad con páginas viejas de los años 90, con comportamientos impredecibles) y standards mode (según las especificaciones actuales). Si el DOCTYPE falta, el navegador puede activar quirks mode, y el CSS puede comportarse de formas inesperadas.

<!DOCTYPE html>
<!-- Todo el resto del documento va acá abajo -->

El DOCTYPE siempre va primero, sin nada antes — ni un espacio, ni un salto de línea.

<html lang="">: el elemento raíz

Después del DOCTYPE, todo el documento vive dentro de un único elemento: <html>. Es el elemento raíz — contiene absolutamente todo lo demás.

El elemento <html> lleva el atributo lang con el código del idioma del contenido:

<html lang="es">
  <!-- todo el documento va acá -->
</html>

¿Por qué importa lang?

  • Accesibilidad: los lectores de pantalla usan lang para saber con qué voz y pronunciación leer el contenido. Sin él, un lector de pantalla puede pronunciar español con reglas del inglés.
  • Tipografía: el navegador usa lang para las reglas de guionado automático en CSS.
  • Búsqueda: los motores de búsqueda lo usan para indexar en el idioma correcto.

Valores comunes: "es" (español), "es-AR" (español argentino), "en" (inglés), "en-US" (inglés americano). Para la mayoría de los casos, el código de dos letras es suficiente.

En la siguiente lección vas a ver qué va dentro de <head>.

Sandbox libre — probá lo que aprendiste:

Preview

En la referencia