Sign in Get started

HTML5 for Beginners: Build Your First Web Pages · Structuring a Whole Page

The Head: Titles, Meta Tags and Sharing

Fill in the head of your page: a good title, a description for search results, the viewport for phones, a favicon, a stylesheet and preview tags for social media.

Create a free account to save this page, take notes and track your progress. Sign in

What you'll learn

  • What belongs in the <head> of a page.
  • How to write a good <title> and meta description.
  • How to link a CSS file and a favicon.
  • How social sites build the preview card when someone shares your page.

The idea

The <head> is invisible on the page, but it's read by browsers, search engines and social apps. Here's a complete one:

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Balcony Tomatoes: A Beginner's Guide | Sam's Garden Blog</title>
  <meta name="description" content="How to grow tomatoes on a small balcony: pots, soil, watering and harvest, step by step.">
  <link rel="icon" href="favicon.svg">
  <link rel="stylesheet" href="styles.css">
  <meta property="og:title" content="Balcony Tomatoes: A Beginner's Guide">
  <meta property="og:description" content="Pots, soil, watering and harvest, step by step.">
  <meta property="og:image" content="https://example.com/images/tomatoes.jpg">
</head>
Tag What it's for
<meta charset="utf-8"> Show every language's characters correctly. Keep it first.
<meta name="viewport"> Make the page fit phone screens.
<title> The browser tab text, the bookmark name and the blue headline in search results.
<meta name="description"> The short summary that search engines often show under the headline.
<link rel="icon"> The favicon, the little icon in the browser tab.
<link rel="stylesheet"> Connects a CSS file that styles the page.
og: tags Open Graph tags: the title, text and picture of the preview card when the page is shared in chat apps and social networks.

Writing a good title

  • Make every page's title different and specific: "Contact us | Sam's Garden Blog", not "Home" on every page.
  • Put the most important words first, and keep it to about 60 characters so it isn't cut off in search results.

Writing a good description

One or two sentences (about 150 characters) that tell a searcher what they'll find on the page. It doesn't change your ranking much, but a good one makes people more likely to click.

Scripts

JavaScript files are added with <script src="app.js" defer></script>. The defer attribute lets the page appear first and runs the script afterwards. You'll meet JavaScript after this course.

Try it

A preview can't show you a browser tab, so this page uses a tiny script to read its own head and print what search engines and browsers would see:

What the head tells the worldTry it yourself
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Balcony Tomatoes: A Beginner's Guide | Sam's Garden Blog</title>
  <meta name="description" content="How to grow tomatoes on a small balcony: pots, soil, watering and harvest, step by step.">
  <meta property="og:image" content="https://example.com/images/tomatoes.jpg">
</head>
<body>
  <h1>Balcony tomatoes</h1>
  <p>Below is roughly how a search result for this page could look:</p>
  <div style="font-family: arial, sans-serif; max-width: 600px; border: 1px solid #cbd5e1; border-radius: 8px; padding: 12px">
    <div style="color: #1a0dab; font-size: 18px" id="t"></div>
    <div style="color: #006621; font-size: 13px">example.com &rsaquo; tomatoes</div>
    <div style="color: #4d5156; font-size: 14px" id="d"></div>
  </div>
  <p>Title length: <span id="tl"></span> characters. Description length: <span id="dl"></span> characters.</p>
  <script>
    const title = document.title;
    const desc = document.querySelector('meta[name="description"]').content;
    document.getElementById("t").textContent = title;
    document.getElementById("d").textContent = desc;
    document.getElementById("tl").textContent = title.length;
    document.getElementById("dl").textContent = desc.length;
  </script>
</body>
</html>

Your turn

  1. Change the <title> and description in the preview to describe a page about your favourite hobby, and run it again. Keep the title under 60 characters.
  2. On your own index.html, add a description and check the tab title in your browser.
  3. Share any article link in a chat app and look at the preview card. Then view that article's source and find its og: tags.

Common mistakes

  • The same title on every page, or just "Home". Each page needs its own descriptive title.
  • Leaving out the viewport tag. Without it, phones show a shrunken desktop page.
  • Putting visible content in the head. Headings, paragraphs and images go in the body.
  • Relative og:image addresses. Social sites need the full address, starting with https://.

Key points

  • The head is read by browsers, search engines and social apps, not shown on the page.
  • Always include charset, viewport, a unique <title> and a description.
  • <link> connects favicons and CSS files; <script defer> adds JavaScript.
  • Open Graph (og:) tags control the preview card when your page is shared.

Practice questions

Where does the page title appear?

Answer

In the browser tab, bookmarks and history, and as the clickable headline in search results, so each page needs a unique, descriptive title.

What does the viewport meta tag do?

Answer

It tells mobile browsers to use the device's width for the page instead of pretending to be a wide desktop screen, so responsive pages display at a readable size.

What are Open Graph tags for?

Answer

They describe the title, description and image that chat apps and social networks show in the preview card when someone shares the page.

Open in the app to mark lessons complete, take notes and track your progress.

Was this page helpful?