The Head and Resource Loading - HTML Tutorial

Why the <head> Matters

The <head> contains information the browser needs before it can render the page: metadata, stylesheets, scripts, and hints that speed up loading.

Essential Head Structure

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Page Title</title>
  <meta name="description" content="Short summary of the page" />

  <link rel="stylesheet" href="/styles.css" />
  <script src="/app.js" defer></script>
</head>

CSS and JavaScript Loading

Stylesheets

CSS is render-blocking: the browser waits to paint until critical CSS is downloaded and parsed.

Scripts

Scripts can block HTML parsing. Prefer defer for most scripts so HTML can finish parsing first.

Resource Hints

Tell the browser what to prioritize:

<!-- Warm up connections -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="dns-prefetch" href="//cdn.example.com" />

<!-- Preload critical resources -->
<link rel="preload" href="/critical.css" as="style" />
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin />
<link rel="modulepreload" href="/app.js" />

<!-- Prefetch for next page -->
<link rel="prefetch" href="/next-page.html" />

Font Loading Best Practices

Fonts can block text rendering. Preload critical fonts and use font-display: swap in CSS so text appears quickly.

<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin />

⚠️ Common Head Mistakes

❌ Loading large scripts without defer or async
❌ Missing viewport meta tag on mobile pages
❌ Loading huge fonts without preload or proper caching
❌ Putting CSS at the end of <body>