The Head: title, meta, charset, viewport, SEO Basics

10 min read

What Goes in the Head?

The <head> element contains metadata about your document. None of it is directly visible to users, but it controls the browser tab title, search engine previews, character encoding, and responsive behaviour.

html

<head>
  <!-- Character encoding -->
  <meta charset="UTF-8" />

  <!-- Responsive viewport -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <!-- Page title (shown in tab and search results) -->
  <title>Learn HTML Online | CPCODELAB</title>

  <!-- Meta description (shown in search engine snippets) -->
  <meta name="description" content="Free beginner to advanced HTML course. Learn by doing with real projects." />

  <!-- Open Graph (for social media previews) -->
  <meta property="og:title" content="Learn HTML Online | CPCODELAB" />
  <meta property="og:description" content="Master HTML from scratch with our structured course." />
  <meta property="og:image" content="https://cpcode.io/og-image.jpg" />
  <meta property="og:type" content="website" />

  <!-- Favicon -->
  <link rel="icon" href="/favicon.ico" />

  <!-- Stylesheet -->
  <link rel="stylesheet" href="/styles/main.css" />
</head>

SEO Essentials in HTML

Title tag — Keep it under 60 characters. Include your primary keyword near the start.
Meta description — 150-160 characters. A compelling summary that improves click-through rates.
One `<h1>` per page that matches the topic of the page.
Canonical link — <link rel="canonical" href="url" /> tells search engines the preferred URL for this content.
Structured data — JSON-LD scripts inside <head> give search engines rich, machine-readable information.

The viewport meta tag is essential for responsive design. Without it, mobile browsers render your page at a desktop width and then shrink it — making it unreadable. Always include it.

Ready to test yourself?

Practice HTML— quiz & coding exercises