Module 7: Head and Metadata · Lesson 5 of 5
Complete HTML Head Template: Every Tag You Need
All lessons in Module 7
Goal: Write a full, real-world head for a club website from memory.
Learn
This project pulls the whole module together. A finished head on a real site usually holds, in this order:
<meta charset>, always first- the viewport tag
<title>and the description- the favicon link
- Open Graph tags for share cards
- stylesheets, then deferred scripts
Look at the <html> tag too. lang="en" tells screen readers which voice and pronunciation to use, and lets browsers offer translation. People forget it all the time, because nothing visible changes. Valid codes come from the IANA language subtag registry (opens in a new tab).
Apart from the stylesheet, nothing you add here shows on the page. That is fine. The head is written for browsers, search engines and apps, and they will show your page properly in tabs, search results, phones and chats.
The short version
- A complete head goes charset, viewport, title, description, favicon, Open Graph, stylesheets, then deferred scripts.
<html lang="en">tells screen readers, translation tools and search engines what language the page uses.- Only the charset position is a hard rule. The rest of the order is a habit that makes heads quick to scan.
- Every page gets its own title, description and Open Graph text, even if the rest of the head is shared.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page Name - What It Offers</title>
<meta name="description" content="One or two sentences that make people want to click.">
<link rel="icon" href="favicon.svg">
<meta property="og:title" content="Page Name">
<meta property="og:image" content="https://example.com/card.jpg">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Page Name</h1>
</body>
</html>Your task
The Green Thumb Garden Club page has an empty head and no language. Fill in everything:
- Add
lang="en"to the<html>tag. <meta charset="utf-8">as the first line of the head.- A title that includes Green Thumb.
- A viewport tag with
width=device-width, initial-scale=1. - A description meta tag.
- A favicon link to
favicon.svg. - An
og:titletag and anog:imagetag with an absolute https:// URL. - A link to the stylesheet
style.css.
Ctrl+Enter checks your code. Try Visual edit to change the page directly, DOM tree to see how the browser reads it, and Outline to hear it like a screen reader.
Quick quiz
Common mistakes
Wrong
<body>
<meta name="description" content="A friendly garden club.">
<h1>Green Thumb Garden Club</h1>
</body>Right
<head>
<meta name="description" content="A friendly garden club.">
</head>
<body>
<h1>Green Thumb Garden Club</h1>
</body>Metadata such as the description goes in the head; in the body it is invalid and may be ignored.
Wrong
<html lang="english">Right
<html lang="en">lang expects a short language code such as en, en-GB or fr, and a full name like "english" is invalid.
Go deeper
Real sites often add a few more head tags. <link rel="canonical" href="https://example.com/club/"> tells search engines which address is the main one when the same page is reachable through several URLs. <meta name="theme-color" content="#2e7d32"> tints the browser bar on some phones. <meta name="robots" content="noindex"> asks search engines not to list a page. Use it on thank-you pages and test pages.
Don't paste in every tag you find online. Old tags such as meta keywords are ignored by the major search engines and only add clutter.
To check your work, paste the page into the W3C Nu HTML Checker (opens in a new tab). It catches misplaced tags, missing attributes and the typos browsers forgive without a word.
Once your head is right, save it as a template file. Starting each new page from it beats rebuilding the head from memory, and you only change the title, description and Open Graph text. The HTML cheat sheet keeps the common head tags on one page.
Frequently asked questions
What should be in the head of an HTML document?
At minimum <meta charset="utf-8">, the viewport meta tag and a <title>. A real page usually adds a meta description, a favicon link, Open Graph tags for share cards, its stylesheet links and any deferred scripts. The head holds information for browsers, search engines and apps. Anything visitors should see goes in <body>. This module covers each tag, starting with title and charset.
Does the order of tags in the HTML head matter?
Mostly no. There are two exceptions. The charset declaration has to sit within the first 1024 bytes, so put it first. Stylesheets go before scripts so the styles arrive early. Beyond that, browsers read the head the same way in any order. Sticking to one familiar order makes your heads faster to check and to update later.
Why is the lang attribute important in HTML?
Screen readers use lang on <html> to pick pronunciation rules, so English text isn't read out with a French accent. Browsers use it to offer translation and choose hyphenation rules. Search engines take it as a hint about who the page is for. WCAG 2.2 requires it at Level A (success criterion 3.1.1, Language of Page (opens in a new tab)).