The Head: Title & Meta Tags

The <head> of a page is invisible, but it controls a lot: the text on the browser tab, how the page fits a phone screen, which icon appears in bookmarks, which CSS and JavaScript files load, and even the colour of the browser's address bar on some phones.

You met the three essential lines (charset, viewport and <title>) in HTML Document Structure. In this lesson you will build a complete, modern <head>, learn what each line does, and see which old tags you can safely leave out.

A complete modern head

Here is a head you could use for a real small website. Read it once, then the sections below explain each part.

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Fees and Timings | Meera's Tuition Classes, Kochi</title>
  <meta name="description" content="Maths and science tuition for classes 8 to 10 in Kochi. See batch timings, monthly fees and how to join.">

  <link rel="icon" href="/favicon.ico" sizes="32x32">
  <link rel="icon" href="/icon.svg" type="image/svg+xml">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">

  <meta name="color-scheme" content="light dark">
  <meta name="theme-color" content="#0d47a1">

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

The order matters a little. Keep charset first, because the browser must know the encoding before it reads any text, and the standard requires it within the first 1,024 bytes of the file. The viewport and title come next. After that, the order of most other lines is up to you, but a fixed habit makes heads easy to read.

Title and viewport, the right way

The <title> is shown on the tab, in bookmarks and history, and usually as the headline in search results. Make every page's title unique and specific: put the page's topic first and the site name last. "Home" or "Untitled" helps nobody who has ten tabs open. You will learn how search engines use titles in HTML for SEO & Social Sharing.

The viewport line makes the page use the real width of a phone. Do not add maximum-scale=1 or user-scalable=no to it. Those stop people from zooming in, and many users, including people with low vision, need to zoom to read.

The meta description

<meta name="description" content="A short summary of this page in one or two sentences.">

The description is not shown on the page. It is a summary for other software: search engines may show it under your title in their results, and some apps show it when a link is shared. Write a different, honest description for each page, roughly one or two sentences long.

<meta> elements are void elements: they have no closing tag. A name attribute says what kind of information it is, and content holds the value.

Stylesheets, scripts and icons

The <link> element connects the page to other files. Its rel attribute (short for "relationship") says what the file is for.

• <link rel="stylesheet" href="..."> loads a CSS file. You will write these in the CSS tutorial.
• <script src="..." defer></script> loads a JavaScript file. The defer attribute lets the page finish loading before the script runs, so the script can be placed in the head without slowing the page down. Scripts with type="module" behave the same way automatically. Loading & Performance Hints explains this in detail.
• <link rel="icon"> sets the small icon on the browser tab, called a favicon. A classic favicon.ico works everywhere, and an SVG icon stays sharp at any size; you can list both and the browser picks one.
• <link rel="apple-touch-icon"> is the icon used when someone adds your site to an iPhone or iPad home screen. A 180 by 180 pixel PNG is the usual size.
• <link rel="manifest" href="/site.webmanifest"> points to a JSON file that describes an installable web app (its name, icons and colours). Ordinary websites can skip it.

All paths starting with / mean "from the root of the website". For links between pages and files, see HTML Links.

Colours: color-scheme and theme-color

Two meta tags deal with colour.

<meta name="color-scheme" content="light dark"> tells the browser that your page is designed to work in both light and dark mode. When the user's device is set to dark mode, the browser then uses a dark page background, light text and dark form controls and scrollbars by default. Without it, the browser assumes light only.

<meta name="theme-color" content="#0d47a1"> suggests a colour for the browser's own interface around your page, such as the address bar on some mobile browsers. You can give different colours for light and dark mode with a media attribute.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Colour Scheme Demo</title>
  <meta name="color-scheme" content="light dark">
  <meta name="theme-color" content="#0d47a1" media="(prefers-color-scheme: light)">
  <meta name="theme-color" content="#0a1929" media="(prefers-color-scheme: dark)">
</head>
<body>
  <h1>Rohan's Cycle Repair, Lucknow</h1>
  <p>Switch your computer or phone to dark mode and run this again.</p>
  <label for="bike">Bike model</label>
  <input id="bike">
  <select><option>Puncture repair</option><option>Full service</option></select>
  <button>Book</button>
</body>
</html>

There is no CSS in this page, yet in dark mode the background, text, input box and button all turn dark. Remove the color-scheme line and they stay light. For full dark mode styling, see CSS Dark Mode.

Looking inside the head

The head is invisible on the page, but JavaScript can read it, and so can you, using the browser's developer tools (press F12 and open the Elements panel). The example below lists every <meta> element in its own head.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Ananya's Art Classes, Pune</title>
  <meta name="description" content="Weekend drawing and painting classes for children aged 6 to 12 in Pune.">
  <meta name="author" content="Ananya Kulkarni">
</head>
<body>
  <h1>What is in my head?</h1>
  <ul id="list"></ul>

  <script>
    const list = document.querySelector("#list");
    const add = (text) => {
      const item = document.createElement("li");
      item.textContent = text;
      list.append(item);
    };
    add("title: " + document.title);
    for (const meta of document.querySelectorAll("head meta")) {
      const key = meta.getAttribute("name") ?? "charset";
      add(key + ": " + (meta.content || meta.getAttribute("charset")));
    }
  </script>
</body>
</html>

Change the description or add a new <meta> line, then run it again to see it appear in the list.

Old tags you can leave out

You will see these in older pages and templates. None of them are needed today:

• <meta name="keywords">: major search engines ignore it.
• <meta http-equiv="X-UA-Compatible" content="IE=edge">: this was for Internet Explorer, which is retired.
• type="text/css" on <link> and <style>, and type="text/javascript" on <script>: these are the defaults, so the attributes add nothing.
• Long lists of icon sizes for every device: a .ico, an SVG and an Apple touch icon cover nearly every case.

Common mistakes

• The same title on every page. Each page needs its own title that describes it.
• charset placed late in the head. Keep it as the very first line.
• Blocking zoom in the viewport tag. Never use user-scalable=no or maximum-scale=1.
• Putting visible content in the head. Headings, paragraphs and images belong in the <body>.
• Scripts in the head without defer. A plain script there stops the page from loading until it has downloaded and run.

Key points

• The head holds metadata: information about the page that is not shown in it.
• Start with charset, then viewport, then a unique, specific <title>.
• <meta name="description"> gives a short summary that search engines and apps may display.
• <link> loads stylesheets, icons and manifests; <script defer> loads JavaScript without blocking the page.
• color-scheme lets the browser switch default colours for dark mode, and theme-color can tint the browser's interface.
• Skip outdated tags such as keywords and X-UA-Compatible.

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Contact Us | Kabir Sweets, Jaipur</title>
  <meta name="description" content="Find Kabir Sweets near Johari Bazaar in Jaipur, with our phone number, opening hours and a map.">
  <link rel="icon" href="/icon.svg" type="image/svg+xml">
  <meta name="color-scheme" content="light dark">
  <link rel="stylesheet" href="/css/style.css">
  <script src="/js/menu.js" defer></script>
</head>