Meta Information in the head: title, charset, viewport, description

~8 Min. Lesezeit Zuletzt aktualisiert am August 8, 2026

You already know <title> and <meta charset="UTF-8"> from chapter 4. In this chapter you'll learn two more important entries for the <head> section.

viewport: important for phones and tablets

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Without this meta tag, many mobile browsers display websites by default as if they were on a big desktop screen - everything shows up tiny, and you have to zoom in to read anything. This tag tells the browser: "use the device's actual screen width, not the desktop assumption." This tag becomes especially important once you later learn CSS for responsive layouts - but it belongs in every page already, as a firm habit.

description: the text in search results

<meta name="description" content="Finn's own website about his favourite players, his team, and his football photos.">

description is a short summary of your page (ideally around 150-160 characters), which isn't visible in the browser window itself, but is often shown as a small description text below the blue title in Google search results.

The complete head boilerplate

From now on you'll use this extended boilerplate for every new page:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Finn's Football Website</title>
  <meta name="description" content="Finn's own website about his favourite players, his team, and his football photos.">
</head>
<body>
  ...
</body>
</html>

Writing good title and description text

<title>: short and to the point, often following the pattern "page name - website name".
description: a real, inviting summary, not just a pile of keywords listed one after another.
Every subpage should have its own, matching <title> and its own description, not the same one everywhere.

Now update the other two pages with matching titles and descriptions too:

players.html

<title>My Favourite Players - Finn's Football Website</title>
<meta name="description" content="Finn's overview of his favourite football players with position and club.">

Tipp: Don't stress about memorizing the exact order inside <head> - technically, the exact order of these tags mostly doesn't matter. What matters is just that all four (charset, viewport, title, description) are present at all.

Vorheriges Kapitel Attributes Deep Dive: id and class as Name Tags for Later Nächstes Kapitel Writing Special Characters Correctly: &, <, ©, and Accented Letters