Jit-learn - Job-ready skills in your language

Primer / Resources / About

Learn the page instructions before the page is displayed.

The <head> is not the visible page body. It tells the browser how to understand, display, describe, share, and connect the page.

Primer

What Does The HTML Head Really Do?

The head is the control area of a web page. It tells browsers, search engines, AI systems, social media platforms, and the wider web how to understand the page.

1. The Head Is Page Setup

The head is not the visible page content.

It contains instructions and identity information for software that reads the page.

<html>
   |
   +-- <head>  page setup
   |
   +-- <body>  visible content

2. Title And Description

The title names the page.

The description explains what the page is about for search, previews, and AI tools.

<title>Page Title</title>

<meta name="description"
   content="Short page summary.">

3. Viewport And Mobile Screens

The viewport tells phones and tablets how to size the page.

Without it, mobile pages may appear zoomed out or hard to read.

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

4. Sitemap And Canonical

A sitemap helps systems discover important pages.

A canonical link tells which URL is the main version of a page.

<link rel="sitemap"
   type="application/xml"
   href="/sitemap/sitemap.xml">

<link rel="canonical"
   href="https://example.com/page">

5. Alternate Languages

Alternate language links tell search engines that the same content exists in other languages or regions.

This matters for multilingual websites.

<link rel="alternate"
   hreflang="en"
   href="https://en.example.com/">

<link rel="alternate"
   hreflang="fr"
   href="https://fr.example.com/">

6. Open Graph

Open Graph controls how a page appears when shared in social media, chat apps, and preview cards.

<meta property="og:title"
   content="Page Title">

<meta property="og:description"
   content="Page summary">

<meta property="og:image"
   content="https://example.com/image.png">

7. Robots And Indexing

Robots tags tell search engines whether the page should be indexed and followed.

<meta name="robots"
   content="index,follow">

<meta name="googlebot"
   content="index,follow">

8. Icons, Theme, Style, And Script

The head can also connect icons, theme colours, stylesheets, fonts, and scripts.

<link rel="icon" href="/favicon.ico">
<meta name="theme-color" content="#f4efe3">
<link rel="stylesheet" href="/style.css">
<script src="/app.js"></script>

The Head Communicates With The Web

The body communicates with people.

The head communicates with browsers, search engines, AI systems, social platforms, previews, phones, and other software.

Resources

MDN Web Docs web.dev Learn WHATWG HTML Standard W3C Accessibility Can I Use Chrome Developers GitHub Docs OpenAI Docs Google Search Central Stack Overflow

About

What Does The HTML Head Really Do?

The head is the control area of a web page. It tells browsers, search engines, AI systems, social media platforms, and the wider web how to understand the page.

What Is The HTML Head?

The head is the information area of an HTML page.

<head>
   <title>My Page</title>
   <meta name="description" content="Short page summary.">
</head>

Where Does Head Go?

The head goes inside html and before body.

<html>
   <head>
      Page setup
   </head>

   <body>
      Visible page content
   </body>
</html>

3. Title And Description

The title names the page. The description summarizes the page for search, previews, and AI tools.

<title>Page Title</title>

<meta name="description"
   content="What this page is about.">

Lecture + worksheet

Job-ready HEAD practice cards

Each card has one clear goal. The whole card opens the lecture.

✓ Lesson 1 Free • No Login Required

Control what shows in browser tabs and search results

Write page titles and descriptions that explain what the page is about.

Seen in browser tabs, Google results, shared links, bookmarks, and SEO previews.

HEAD direct: clear page identity
Missing-head version: vague tabs and weak search previews

Includes:

title
meta description
browser tab
search preview
page meaning

Lecture

Tell search engines which URL is the real one

Use canonical URLs to reduce duplicate-page confusion.

Seen in blogs, stores, translated sites, filtered pages, and pages with multiple URLs.

HEAD direct: one official URL
Copy-only version: duplicate pages fight each other

Includes:

canonical link
duplicate URLs
preferred page
SEO control
common mistakes

Lecture

Control whether a page should be indexed

Use robots metadata to guide search engines.

Seen in private pages, test pages, duplicate pages, search results, and production launches.

HEAD direct: indexing control
Guess-only version: wrong pages appear in search

Includes:

robots meta
index
noindex
follow
nofollow

Lecture

Make shared links look right on social media

Add Open Graph metadata for better link previews.

Seen when pages are shared on Facebook, LinkedIn, chat apps, and social feeds.

HEAD direct: controlled preview
No-OG version: random title, image, or description

Includes:

og:title
og:description
og:image
og:url
social preview

Lecture

Improve previews on X and Twitter-style feeds

Add card metadata so shared pages display better.

Seen when pages are shared on X, social posts, messages, and preview cards.

HEAD direct: better card preview
Missing-card version: weak or broken share preview

Includes:

twitter card
title
description
image
preview testing

Lecture

Add the icons browsers and devices expect

Set favicons and app icons so the site looks complete.

Seen in browser tabs, bookmarks, mobile home screens, pinned tabs, and app-like sites.

HEAD direct: polished site identity
No-icon version: generic browser icon

Includes:

favicon
apple touch icon
browser tab
bookmarks
app icons

Lecture

Make pages fit phones correctly

Use viewport metadata so mobile layouts behave properly.

Seen on every responsive website viewed on phones, tablets, laptops, and small screens.

HEAD direct: mobile-ready page
No-viewport version: tiny or broken mobile layout

Includes:

viewport
mobile layout
device width
initial scale
responsive setup

Lecture

Point users to the right language version

Use hreflang links for multilingual pages.

Seen in translated websites, international SEO, regional pages, and multilingual course systems.

HEAD direct: language routing
No-hreflang version: wrong language may appear

Includes:

hreflang
language codes
x-default
alternate links
multilingual SEO

Lecture

Help important files load sooner

Use preload carefully for performance-critical resources.

Seen in faster pages, fonts, hero images, CSS, scripts, and performance tuning.

HEAD direct: intentional loading
Random-preload version: slower or wasteful pages

Includes:

preload
fonts
CSS
images
performance risk

Lecture

Help search and AI understand the page

Add clear metadata that supports discovery, summaries, and page meaning.

Seen in search engines, AI summaries, crawlers, knowledge systems, and content previews.

HEAD direct: machine-readable meaning
Weak-metadata version: unclear page purpose

Includes:

metadata
search meaning
AI crawlers
page summaries
clear signals

Lecture

Use AI faster, but understand enough to stay in control.

The goal is not to memorize every metadata rule first. The goal is to recognize what belongs in the head, what affects search and previews, and what must be checked before a page goes live.

Review the primer Start the lessons

© 2026 - https://jit4all.com - Co-built and translated with ChatGPT, powered by OpenAI models.

Integration by an alternate instant-translation browser at https://jit-browser.com
Evolved from https://jit-tr.com
Part of an alternate-translation internet a https://jit4.com

Patent pending technology.

Flags from the free service at https://flagpedia.net
Maps © OpenStreetMap contributors (https://www.openstreetmap.org)
Rendered with Leaflet (https://leafletjs.com)