HTML
Estructura mínima de un documento HTML con doctype, idioma, head, codificación, viewport, título, body y contenido principal.
Un documento completo declara su modo de parsing, idioma, codificación, metadata básica y contenido visible.
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Portfolio de Nicolás Garzón</title>
</head>
<body>
<main>
<h1>Nicolás Garzón</h1>
</main>
</body>
</html><!doctype html>Activa standards mode. No es una etiqueta ni una referencia a una DTD moderna.
Omitirlo puede activar quirks mode y comportamientos heredados.
<html lang="es">Es la raíz. lang comunica idioma a lectores de pantalla, correctores, traducción y buscadores.
<html lang="es-CO">Usa la variante regional solo cuando aporta.
Contiene metadata y relaciones con recursos:
<meta charset="utf-8">Debe aparecer temprano. El header HTTP tiene prioridad; ambos deben ser coherentes.
<meta
name="viewport"
content="width=device-width, initial-scale=1"
>Permite que el viewport CSS siga el ancho del dispositivo.
No bloquees zoom mediante user-scalable=no o límites rígidos.
<title>Proyectos | Nicolás Garzón</title>Se utiliza en pestañas, historial, marcadores y superficies de búsqueda. Cada página necesita un título específico.
Contiene el contenido y la interfaz. Debe existir un solo body.
El parser puede crearlo implícitamente, pero escribirlo hace visible la estructura.
<main>
<h1>Servicios</h1>
</main>Representa el contenido principal activo de la vista.
En text/html, algunas etiquetas pueden omitirse bajo reglas precisas. El DOM seguirá conteniendo html, head y body.
Para código de aplicación, escríbelas explícitamente.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>...</title>
<meta name="description" content="...">
<link rel="stylesheet" href="/styles.css">
</head>La codificación debe estar temprano. El resto depende de carga y mantenimiento.
<link rel="stylesheet" href="/styles.css">
<script type="module" src="/main.js"></script>Un module script se difiere por defecto y participa en un grafo de módulos.
<link rel="icon" href="/favicon.svg" type="image/svg+xml">Puede utilizarse en pestañas, marcadores y otras superficies.
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>SpendControl | Nicolás Garzón</title>
<meta
name="description"
content="Aplicación para registrar gastos y visualizar el presupuesto disponible."
>
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="stylesheet" href="/styles.css">
</head>
<body>
<main>
<h1>SpendControl</h1>
<p>Controla tu presupuesto desde el navegador.</p>
</main>
<script type="module" src="/main.js"></script>
</body>
</html>html es la raíz y declara idioma.head contiene metadata; body, contenido.title y h1 cumplen tareas distintas.¿Por qué <title> no reemplaza al <h1> visible?
Porque title nombra el documento en el navegador; h1 comunica el encabezado principal dentro del contenido.
Sintaxis, elementos y atributos explica cómo se escribe el markup.