HTML Head and Meta Tags

What goes in the head?

The <head> holds information about the page. It isn't displayed, but it matters enormously for search results and link previews:

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Learn HTML — Free Tutorial | ReadyCamel</title>
  <meta name="description" content="Learn HTML step by step with examples you can edit and run.">
  <link rel="canonical" href="https://example.com/tutorials/html">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="stylesheet" href="/styles.css">

  <!-- Link previews in WhatsApp, Slack, LinkedIn, X, Facebook -->
  <meta property="og:title" content="Learn HTML — Free Tutorial">
  <meta property="og:description" content="Learn HTML step by step with runnable examples.">
  <meta property="og:image" content="https://example.com/og/html.png">
  <meta property="og:url" content="https://example.com/tutorials/html">
  <meta name="twitter:card" content="summary_large_image">
</head>

The important ones

• <title> — shown in the browser tab and as the headline in search results. Keep it unique and under ~60 characters.
• meta description — often used as the snippet under the search result. About 150 characters, unique per page.
• viewport — required for pages to render properly on phones.
• Open Graph (og:) tags — control the title, text and image of link previews when your page is shared.
• canonical — tells search engines the preferred URL when the same content is reachable at several URLs.

Scripts

<script src="app.js" defer></script> in the head loads JavaScript without blocking rendering; defer runs it after the HTML is parsed.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Head demo</title>
  <meta name="description" content="A page showing what the head is for.">
  <style>body { font-family: sans-serif; }</style>
</head>
<body>
  <p>The title and description aren't visible here, but this script can read them:</p>
  <p id="out"></p>
  <script>
    const desc = document.querySelector('meta[name="description"]').content;
    document.getElementById("out").textContent = `Title: "${document.title}" — Description: "${desc}"`;
  </script>
</body>
</html>