HTML

Integración HTML + CSS + JS: orden de carga y ejecución

Aprende cómo conectar estilos y scripts sin bloquear render, con patrones claros para `defer`, `async`, `module` y carga crítica.

¿Cuánto sabes de HTML?

📘 Teoría

CSS en el `head`: por qué y cuándo

Regla base: estilos principales arriba para evitar FOUC. 🎨

El CSS bloquea render porque el navegador necesita estilos para pintar correctamente. Por eso el stylesheet principal debe ir en el `head`.

Si cargas muchos CSS no críticos, parte de la interfaz puede tardar en aparecer. Divide entre estilos críticos y secundarios cuando el proyecto lo requiera.

Mantén un CSS principal estable para el primer render.
Evita encadenar demasiados `@import`.
Carga CSS específico por página solo si realmente reduce coste inicial.

Patrón recomendado de estilos

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="stylesheet" href="/css/base.css" />
  <link rel="stylesheet" href="/css/curso-html.css" />
</head>

Scripts: `defer`, `async` y `module` sin confusiones

Aquí se gana o se pierde rendimiento de verdad. ⚡

`defer` descarga en paralelo y ejecuta al terminar el parseo del HTML, respetando orden entre scripts diferidos.

`async` también descarga en paralelo, pero ejecuta en cuanto esté listo, sin respetar orden. Úsalo para scripts independientes (analytics, widgets).

`type="module"` funciona de forma diferida por defecto, permite `import/export` y promueve arquitectura más limpia.

defer

Ideal para lógica principal de la página.

async

Para terceros o scripts sin dependencias de orden.

module

Código moderno con imports nativos.

Comparativa práctica

<!-- App principal -->
<script src="/js/app.js" defer></script>

<!-- Analítica independiente -->
<script src="https://example-analytics.com/a.js" async></script>

<!-- Módulos ES -->
<script type="module" src="/js/main.js"></script>

Orden de ejecución y anti-patrones comunes

No es teoría: estos errores rompen producción.

Si tu script necesita acceder al DOM y lo cargas sin `defer` en el `head`, puede ejecutarse antes de que exista el nodo objetivo.

Otro error frecuente: usar `async` en dos scripts con dependencia entre ellos; a veces funciona, a veces falla, y cuesta depurarlo.

Evita scripts sin `defer/async` en el `head` salvo casos muy controlados.
No uses `async` si hay dependencia de orden.
Si hay dependencias, empaqueta o usa módulos.

Plantilla base profesional para proyectos reales

Un head bien montado evita muchos problemas desde el día uno. 🧱

Base recomendada

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Curso de HTML profesional</title>
    <meta name="description" content="Aprende HTML moderno con semántica, SEO, rendimiento y accesibilidad." />
    <link rel="stylesheet" href="/css/app.css" />
    <script type="module" src="/js/main.js"></script>
  </head>
  <body>
    <h1>Curso de HTML</h1>
  </body>
</html>

1 CSS en el `head`: por qué y cuándo 2 Scripts: `defer`, `async` y `module` sin confusiones 3 Orden de ejecución y anti-patrones comunes 4 Plantilla base profesional para proyectos reales

🧭 Visuales clave

Relación entre HTML, CSS y JavaScript

Ayuda a recordar qué papel juega cada capa antes de entrar en orden de carga, estilos y scripts.

Esquema visual de cómo se relacionan HTML, CSS y JavaScript en una página web

HTML y DOM: del documento al árbol manipulable

Conecta esta lección con JavaScript al mostrar cómo el navegador transforma el HTML en una estructura que scripts y estilos pueden recorrer.

Diagrama del DOM como representación en árbol del HTML en el navegador

Segunda vista del DOM en el navegador

Sirve como refuerzo visual para la idea de que el HTML no se queda como texto plano, sino que se convierte en un árbol operativo dentro del navegador.