Anatomía y estructura de HTML
Anatomía y estructura
HTML es un lenguaje de marcado basado en elementos: etiquetas, atributos y un esqueleto de documento mínimo que todo navegador espera encontrar.
HTML (HyperText Markup Language) es un lenguaje de marcado: no es código que se ejecuta, sino texto estructurado que describe el significado y la organización del contenido de una página. El navegador lee ese texto, construye un árbol de nodos en memoria — el DOM (Document Object Model) — y a partir de ese árbol decide qué renderizar. Cada nodo del DOM corresponde a un elemento del HTML, y cada elemento tiene una función semántica: un párrafo, un encabezado, una imagen, un enlace.
Entender HTML es entender dos cosas a la vez: la gramática del lenguaje (cómo se escribe un elemento) y la estructura del documento (cómo se organiza el archivo que el navegador recibe). Ambas son independientes pero inseparables: podés escribir sintaxis correcta y aun así tener una estructura de documento rota, o viceversa. Esta categoría cubre las dos dimensiones.
Lo que distingue a HTML de un formato de texto plano es precisamente el marcado: encerrando contenido entre etiquetas, el autor le dice al navegador (y a los lectores de pantalla, y a los motores de búsqueda) qué rol cumple ese contenido. <strong>importante</strong> no solo cambia cómo se ve el texto — declara que ese texto tiene importancia semántica. Esa separación entre significado y presentación es el principio que hace a HTML tan duradero.
Cómo funciona
Gramática del lenguaje
Un elemento HTML tiene tres partes: la etiqueta de apertura, el contenido, y la etiqueta de cierre. La etiqueta de apertura puede contener atributos — pares nombre-valor que configuran el comportamiento o las propiedades del elemento. Los elementos vacíos (void elements) no tienen contenido ni etiqueta de cierre: <img>, <br>, <input> son los más comunes.
Los comentarios (<!-- … -->) son texto que el navegador ignora al renderizar pero que sí lee al parsear — sirven para documentar el código fuente. No se usan como mecanismo de ocultamiento: el contenido de los comentarios es visible en el código fuente de la página.
Esqueleto del documento
Todo documento HTML válido tiene una estructura mínima que el navegador espera: la declaración <!DOCTYPE html>, seguida del elemento raíz <html>, que contiene exactamente dos hijos directos — <head> y <body>.
El <!DOCTYPE html> no es un elemento HTML — es una instrucción de procesamiento que le dice al navegador que interprete el documento según el estándar HTML actual (modo estándar). Sin él, los navegadores activan el modo quirks, un modo de compatibilidad hacia atrás con comportamientos impredecibles que conviene evitar siempre.
El <head> contiene metadata: información sobre la página que el navegador necesita pero que no se renderiza en el viewport. El <body> contiene el contenido visible: texto, imágenes, formularios, todo lo que el usuario ve e interactúa. Esta separación es fundamental: mezclar contenido del head en el body (o viceversa) produce errores de parseo que el navegador intenta corregir de maneras no siempre predecibles.
Cuándo usar qué
| Necesidad | Elemento |
|---|---|
| Definir el tipo de documento | <!DOCTYPE html> — siempre, primera línea |
| Agrupar metadata (título, charset, estilos) | <head> |
| Todo el contenido visible | <body> |
Elementos sin contenido propio (<img>, <br>, <input>) | Elementos vacíos — sin etiqueta de cierre |
| Notas en el código fuente | <!-- comentario --> |
El error más común al arrancar con HTML es omitir el <!DOCTYPE html> o la estructura <html>/<head>/<body>. Los navegadores modernos la infieren e intentan corregirla, pero el DOM resultante puede no ser el esperado, y las herramientas de validación y accesibilidad reportarán errores.
El esqueleto mínimo de cualquier página HTML:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Mi página</title>
</head>
<body>
<h1>Hola mundo</h1>
<p>Este es el contenido visible.</p>
</body>
</html>