The head and meta tags

The <head> holds information about the page. Nothing in it appears in the page itself, but it controls how the page is named, displayed, found and shared.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Python loops · CodeMIRAI</title>
  <meta name="description" content="Learn for and while loops in Python with runnable examples.">

  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="stylesheet" href="/styles.css">
  <script src="/app.js" defer></script>
</head>
<body>
  ...
</body>
</html>

The essentials

Tag	What it does
`<meta charset="utf-8">`	reads the file as UTF-8, so é, ₹ and emoji show correctly; put it first
`<meta name="viewport" ...>`	makes the page fit a phone screen, instead of showing a shrunken desktop page
`<title>`	names the browser tab and bookmarks, and is the headline in search results
`<meta name="description">`	is often shown under the title in search results

The head, from the page's point of view

The head isn't visible, but scripts can read it:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>My first full page</title>
  <meta name="description" content="A page with a proper head.">
  <style>
    body { font-family: system-ui; max-width: 40em; margin: 20px auto; }
  </style>
</head>
<body>
  <h1>Hello!</h1>
  <ul id="facts"></ul>
  <script>
    const facts = [
      "Title: " + document.title,
      "Description: " + document.querySelector('meta[name="description"]').content,
      "Character set: " + document.characterSet,
      "Language: " + document.documentElement.lang,
    ];
    const list = document.querySelector("#facts");
    for (const fact of facts) {
      const li = document.createElement("li");
      li.textContent = fact;
      list.append(li);
    }
  </script>
</body>
</html>

When a link is shared on WhatsApp, LinkedIn, Slack or X, the preview card is built from Open Graph tags:

HTML

<meta property="og:title" content="Python loops">
<meta property="og:description" content="For and while loops, with examples you can run.">
<meta property="og:image" content="https://codemirai.com/og/python-loops.png">
<meta property="og:url" content="https://codemirai.com/learn/python/loops/">
<meta name="twitter:card" content="summary_large_image">

Use a full URL for the image, ideally 1200 × 630 pixels. Without these tags, apps guess, and often show a bare link.

Stylesheets, scripts and icons

HTML

<link rel="stylesheet" href="styles.css">
<script src="app.js" defer></script>
<script type="module" src="main.js"></script>
<link rel="icon" href="favicon.ico">
<link rel="apple-touch-icon" href="apple-touch-icon.png">

defer downloads a script without holding up the page, then runs it once the HTML has been read, so the script can safely find any element. Module scripts are deferred automatically.

For search engines

HTML

<link rel="canonical" href="https://codemirai.com/learn/python/loops/">
<meta name="robots" content="noindex">

canonical says which address is the "real" one when the same page can be reached at several URLs.
robots with noindex asks search engines not to list the page, which suits thank-you pages and drafts.

The essentials

The head, from the page's point of view

Social previews: Open Graph

Stylesheets, scripts and icons

For search engines