HTML
Síntesis de cómo se relacionan sintaxis, parser, DOM, semántica, accesibilidad, formularios, metadata, seguridad y rendimiento dentro de HTML.
HTML es el lenguaje que describe qué contiene un documento, cómo se relacionan sus partes y qué capacidades nativas puede ofrecer el navegador antes de añadir CSS o JavaScript.
bytes y headers
↓
decodificación
↓
tokens y parsing
↓
árbol DOM
↓
semántica y accessibility tree
↓
recursos, formularios e interacción nativa
↓
CSS y JavaScript mejoran la experienciaEl servidor envía:
Content-Type: text/html; charset=utf-8Eso permite interpretar bytes como un documento HTML.
<!doctype html>
<html lang="es">El doctype activa standards mode y lang comunica el idioma principal.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Portfolio | Nicolás Garzón</title>
</head>head concentra codificación, identidad, metadata, recursos y políticas declarativas.
No contiene el contenido principal visible.
<table>
<tr><td>Dato</td></tr>
</table>El DOM puede incluir un tbody implícito.
source HTML ≠ siempre DOM finalEl tokenizer y tree builder corrigen errores mediante reglas definidas. No dependas de esa recuperación para escribir markup descuidado.
<p>
Texto <strong>importante</strong>.
</p>P acepta phrasing content, no una section o lista.
El anidamiento válido depende de:
CSS no cambia esas reglas.
<button type="button">Guardar</button>No es solamente una caja clicable. Representa una acción con foco, teclado y estados nativos.
<a href="/portfolio">Ver proyectos</a>Representa navegación.
Elegir el elemento correcto reduce trabajo y mejora accesibilidad, resiliencia y mantenimiento.
<div class="project-grid">...</div>
<span class="price">$100</span>Son contenedores neutros para layout, estilos o hooks técnicos cuando no existe un significado más preciso.
HTML semántico no significa reemplazar todo div por section.
<h1>Portfolio</h1>
<h2>Proyectos recientes</h2>
<h3>DomiSys</h3>Los headings forman una estructura temática. Los landmarks permiten recorrer regiones como nav, main, aside y footer.
Orden visual, DOM y foco deben contar la misma historia.
<strong>Importante</strong>
<em>hoy</em>
<code>main</code>
<time datetime="2026-07-23">23 de julio</time>Cada elemento representa una relación: importancia, énfasis, código, fecha, cita, término o edición.
No se eligen por bold, italic o tamaño.
link → lleva a otro recurso o ubicación
button → ejecuta una acciónLos links necesitan destinos reales y textos comprensibles. Los buttons necesitan un type correcto, especialmente dentro de forms.
<a href="../services">Servicios</a>El resultado depende de la URL actual, trailing slash y base.
Query, fragment y scheme cumplen funciones diferentes. Las URLs generadas necesitan validación y encoding.
<img
src="dashboard.webp"
alt="Panel con ventas, pedidos activos y alertas de stock"
width="1200"
height="750"
>El alt sustituye lo que la imagen aporta en ese contexto. Decorativas utilizan alt="".
Srcset, sizes y picture permiten seleccionar resolución, formato o composición sin sacrificar significado.
<video controls>
<track kind="captions" ...>
</video>Captions, transcripción y descripciones resuelven necesidades distintas.
Autoplay, preload e iframes afectan control, datos, privacidad y rendimiento.
<th scope="col">Precio</th>
<th scope="row">Teclado</th>
<td>$320.000</td>Caption identifica la tabla y headings explican cada celda.
No uses tablas para layout ni destruyas sus relaciones al adaptarlas a mobile.
<label for="email">Correo</label>
<input id="email" name="email" type="email" required>label → identidad visible
id → relaciones del documento
name → clave enviada
type → propósito y comportamientoUn control sin name no participa normalmente en el envío. Placeholder no reemplaza label.
<input type="number" min="1" max="100" required>Required, pattern, min/max y type ayudan al usuario, pero cualquiera puede modificar la solicitud.
cliente → feedback temprano
servidor → autoridadconst data = new FormData(form);Contiene strings y Files, admite names repetidos y solo incluye controles exitosos.
No transforma automáticamente números, booleanos o objetos.
<button>Guardar</button>es preferible a reconstruir un botón con div y ARIA.
ARIA modifica la exposición accesible; no añade automáticamente comportamiento, foco o teclado.
<label for="password">Contraseña</label>
<input id="password" aria-describedby="password-help">
<p id="password-help">Mínimo 12 caracteres.</p>Nombre identifica. Descripción complementa.
Texto visible debe coincidir con lo que usuarios de voz y asistencia encuentran.
Tab → orden lógico del documentoHidden, inert, disabled y aria-hidden no son equivalentes.
WNC0
<dialog>...</dialog>
<div popover>...</div>Disclosure, modalidad y top layer ya tienen primitivas del navegador.
Aun necesitas nombres, foco, salida, estados y contenido apropiados.
<script defer src="app.js"></script>
<script type="module" src="main.js"></script>Import maps resuelven specifiers; no reemplazan bundlers.
<project-card></project-card>Template, Shadow DOM y slots ayudan a encapsular componentes, pero el custom element debe mantener:
<title>...</title>
<meta name="description" content="...">
<link rel="canonical" href="...">
<meta property="og:image" content="...">SEO, previews y structured data dependen de información coherente y contenido real. No garantizan ranking o presentación exacta.
element.textContent = userInput;Es preferible para texto frente a insertar HTML.
CSP, SRI, sandbox, referrerpolicy y Permissions Policy limitan riesgos diferentes. Ninguna política sustituye la validación, encoding y autorización.
<img width="1200" height="750" ...>
<link rel="preload" ...>HTML determina descubrimiento y prioridad. Lazy loading, preload y fetchpriority deben usarse con medición.
Más hints no significa más velocidad.
Recorre las notas Esencial en orden y escribe cada ejemplo.
Estudia las notas Aplicado mientras construyes una página real con:
Usa las notas avanzadas al trabajar con custom elements, políticas de seguridad, metadata o componentes complejos.
Para cualquier elemento, pregunta:
¿Qué significa?
¿Dónde puede aparecer?
¿Qué puede contener?
¿Qué comportamiento aporta?
¿Cómo se nombra?
¿Participa en foco o formularios?
¿Qué se envía o carga?
¿Qué ocurre sin CSS o JavaScript?
¿Qué riesgo o costo introduce?Cuando una estructura HTML parezca dudosa, vuelve a estas preguntas:
¿Qué intenta comunicar este contenido?
¿Existe un elemento nativo para esa función?
¿Qué DOM construirá el parser?
¿El orden sigue siendo lógico sin CSS?
¿Puede usarse con teclado?
¿Qué nombre recibirá?
¿Qué ocurre si el recurso no carga?
¿Qué datos se enviarán realmente?
¿El servidor volverá a validarlos?
¿Qué verá un buscador o preview sin ejecutar JavaScript?Responderlas convierte HTML en una arquitectura comprensible, no en una lista de tags.