Lesson 25 +10 XP

Document Metadata

The <head> is the page's brain. Let's learn everything it can hold!

meta: information about the page

<meta> gives the browser extra info. Common uses:

<meta charset="utf-8">
<meta name="description" content="A short description of the page">
<meta name="viewport" content="width=device-width, initial-scale=1">

charset="utf-8": makes sure all characters (like emoji!) display correctly.
description: the little text shown under your page in search results.
viewport: makes the page fit phones properly.

More meta names

theme-color: the color of the browser tab bar on phones.
robots: tells search engines what to index (e.g. noindex).
color-scheme: says the page supports light/dark.
referrer: what info gets sent with links to other sites.
text-scale: controls automatic text resizing (new).
responsive-embedded-sizing: extra info for embedded content (new).

<meta name="theme-color" content="#4caf50">
<meta name="robots" content="noindex">

meta http-equiv

The http-equiv meta is a way to fake some HTTP response headers inside the page. The most common one:

<meta http-equiv="refresh" content="5; url=https://example.com">

That redirects to example.com after 5 seconds. (Use with care: redirects annoy people!)

title: the tab text

<title> shows on the browser tab and in search results. One per page!

<title>My Awesome Page</title>

link: connections to other files

<link> links your page to other files. Most often, a stylesheet:

<link rel="stylesheet" href="styles.css">

Other rel values:

rel="icon": the little icon in the tab.
rel="preconnect": warm up a connection (faster loading).
rel="preload": load an important file early.
rel="prefetch": fetch a file you'll need soon (like the next page).
rel="prerender": even pre-build the next page in the background.
rel="modulepreload": preload a JavaScript module.
rel="dns-prefetch": look up a domain early.
rel="manifest": the web app manifest for installing as an app.
rel="alternate stylesheet": a different style sheet you can switch to.

<link rel="icon" href="favicon.ico">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preload" href="hero.jpg" as="image">

style: CSS right in the page

<style> holds CSS directly inside the document (instead of a separate file).

<style>
  body { font-family: sans-serif; }
</style>

base: a home base for links

<base> sets a default base URL for all relative links on the page.

<base href="https://example.com/">

Now <a href="about.html"> points to https://example.com/about.html.

TL;DR

<meta> holds page info: charset, description, viewport, and more.
<title> is the tab/search title.
<link> connects stylesheets, icons, and preloads.
<style> holds inline CSS.
<base> sets a base URL for relative links.
All of these live in <head>.

Document Metadata