The head and meta tags

The part nobody sees

Every HTML page has two halves. The body is what visitors read. The head holds information about the page: its name, its language, how to display it on a phone, which stylesheet to load, how to describe it to search engines. Nothing in the head appears inside the page, yet a lot of what makes a page work properly is there.

Here is a complete, reasonable head:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Sunrise Bakery: fresh bread in Jaipur</title>
  <meta name="description" content="Stone-ground sourdough and multigrain bread, baked every morning in Jaipur. Order online for pickup.">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="stylesheet" href="/styles.css">
</head>
<body>…</body>
</html>

Let us go through it.

Always include these

• <!DOCTYPE html> (before the head) switches the browser into standards mode so it follows modern rules.
• <html lang="en"> states the page language. Screen readers pick the right pronunciation, browsers offer translation, and spell checkers know what to use. Use hi for Hindi, fr for French, and so on.
• <meta charset="utf-8"> tells the browser how the file's characters are encoded. Put it within the first 1,024 bytes. Without it, characters such as ₹, é or हिन्दी can turn into garbage.
• <meta name="viewport" content="width=device-width, initial-scale=1"> makes phones use their real width. Without it, a phone pretends to be about 980 pixels wide and shrinks your page, so text becomes tiny.
• <title> is required. It names the tab, the bookmark and the page in the history, and it is the headline in search results.

Writing a good title

Make every page's title unique and descriptive. "Home" tells nobody anything; "Sunrise Bakery: fresh bread in Jaipur" does. Put the specific part first and the brand last or after a separator, and keep it to roughly 60 characters, since search engines cut off longer titles.

meta description

<meta name="description" content="Stone-ground sourdough and multigrain bread, baked every morning in Jaipur.">

Search engines often use this text as the snippet beneath the title, though they may write their own. It does not directly raise your ranking, but a clear, inviting description of one or two sentences (around 150 characters) earns more clicks. Each page needs its own.

The old keywords meta tag is ignored by Google; do not spend time on it.

link: stylesheets and icons

link connects the page to other files. It is a void element with a rel (relationship) and href:

<link rel="stylesheet" href="/styles.css">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="canonical" href="https://example.com/menu/">

• rel="stylesheet" loads CSS (you will do a lot of this in the CSS course).
• rel="icon" sets the small image in the browser tab.
• rel="canonical" tells search engines the preferred address when the same page can be reached by several URLs.

Social sharing: Open Graph

When someone pastes your link into a chat or social post, the preview comes from Open Graph meta tags:

<meta property="og:title" content="Sunrise Bakery">
<meta property="og:description" content="Fresh bread baked every morning.">
<meta property="og:image" content="https://example.com/share.jpg">
<meta property="og:url" content="https://example.com/">

Without them, platforms guess, often badly. An image about 1200 by 630 pixels works well.

Other things that live in the head

• script and style elements (you will meet them later).
• base, which sets a base URL for relative links. It is rarely needed and easy to misuse.
• meta name="robots" with noindex to ask search engines not to list a page, useful for thank-you or admin pages.
• meta name="theme-color" to tint a mobile browser's address bar.

Everything in the head should be inside <head>, before <body>. Putting a div in the head makes browsers end the head early and move everything after it into the body.

Common mistakes

• No viewport tag, causing tiny text on phones.
• Same title on every page, or titles like "Untitled Document".
• Forgetting charset, so symbols are garbled.
• A missing lang attribute.
• Relying on the keywords meta tag.

Exercise

Write the head for a page called "Contact us" on a site named Sunrise Bakery. Include language, charset, viewport, a unique title, a description, and a stylesheet link.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Contact us | Sunrise Bakery</title>
  <meta name="description" content="Visit Sunrise Bakery at 12 Market Road, Jaipur, or call us to place a bulk order. Open every day from 6 a.m.">
  <link rel="stylesheet" href="/styles.css">
</head>