The head is the control room of every web page. It tells browsers how to read the page, search engines how to index it and social apps how to preview it.
What is the head?
The <head> element holds metadata: data about the page, not content shown inside it. Only the <title> becomes visible, as the browser tab label.
Read the charset, viewport, styles and scripts to render the page properly.
Use the title, description, canonical URL and robots rules to index and display it.
Use Open Graph tags to build the preview card for shared links.
<html> and <body> and must come first.Head explorer
Click any line of this head to see what it does.
Allowed elements
Only these elements are valid in the head. Anything else, such as <div> or <p>, ends the head early.
| Element | Purpose | Key attributes | Status | Count |
|---|---|---|---|---|
<title> | Document title | — | Required | 1 |
<meta> | Metadata | charset name content property | Required | Many |
<link> | External resources | rel href as sizes | Common | Many |
<style> | Internal CSS | media | Optional | Many |
<script> | JavaScript | src defer async type | Optional | Many |
<base> | Base URL for relative links | href target | Optional | Max 1 |
<noscript> | No-JavaScript fallback | — | Optional | Many |
<template> | Inert reusable markup | id | Optional | Many |
Elements in detail
Charset <meta charset>
Declares how text is decoded. Use UTF-8 and make it the first element, within the first 1024 bytes of the file.
<meta charset="UTF-8">
Viewport <meta name="viewport">
Makes the page responsive on phones. Without it, mobile browsers render at desktop width and zoom out.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
user-scalable=no or maximum-scale=1. They stop users from zooming.Title <title>
Names the tab, bookmark, history entry and search result. Make it unique, about 50–60 characters, with the key words first.
<!-- Pattern: Page topic | Site name --> <title>HTML Head Section: Elements and Best Practices | HTML Lessons</title>
Description <meta name="description">
The summary search engines often show under your title. Write it for people, about 150–160 characters, different for every page.
<meta name="description" content="Learn every HTML head element with examples and best practices.">
Links <link>
The rel attribute defines the relationship: stylesheet, icon, canonical page, or a performance hint.
<link rel="stylesheet" href="css/style.css"> <link rel="icon" href="/icon.svg" type="image/svg+xml"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="canonical" href="https://example.com/html-head"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preload" href="fonts/main.woff2" as="font" type="font/woff2" crossorigin>
Style <style>
Embeds CSS in the page. Fine for demos and critical CSS; for real projects prefer an external file so it can be cached.
<style> body { font-family: system-ui, sans-serif; margin: 0; } </style>
Script <script>
A normal script pauses HTML parsing. In the head, add defer or async.
Pauses parsing while it downloads and runs. Slowest.
Downloads in parallel, runs after parsing, keeps order. Best default.
Runs as soon as ready, in any order. Good for analytics.
<script src="js/app.js" defer></script> <script src="js/analytics.js" async></script> <script type="module" src="js/main.js"></script>
Base <base>
Sets the base URL for every relative link. It affects the whole page, so use it with care and place it before any URL.
<base href="https://example.com/lessons/" target="_blank">
Social and extra meta tags
<meta property="og:title" content="HTML Head Section"> <meta property="og:description" content="Elements and best practices."> <meta property="og:image" content="https://example.com/cover.jpg"> <meta name="twitter:card" content="summary_large_image"> <meta name="theme-color" content="#E44D26"> <meta name="robots" content="noindex, nofollow" <!-- only when needed -->
<meta name="keywords"> tag is ignored by major search engines. Leave it out.Best practices
✓ Do
- Set
langon<html> - Put charset first
- Include the viewport meta
- Unique title and description per page
- Use
deferfor scripts - Link CSS in the head
- Provide SVG and PNG icons
- Add a canonical link when needed
✕ Don’t
- Put visible tags in the head
- Use two
<title>or<base> - Block rendering with big scripts
- Disable zoom
- Copy one description everywhere
- Load dozens of third-party scripts
- Rely on the keywords meta tag
- Redirect with
meta refresh
Spot the mistake
<head> <meta charset="UTF-8"> <div>Welcome!</div> <!-- ✕ closes the head right here --> <title>My Page</title> <!-- now treated as body content --> </head>
Recommended order
Order affects correctness and speed. Use this sequence by default.
<meta charset>First, so everything after it is decoded correctly.<meta name="viewport">Layout settings before rendering starts.<title>Identifies the document early.<base>(if used)Must come before any element with a relative URL.- Description, robots and social metaMetadata for search engines and platforms.
preconnect/preloadStart critical network work as early as possible.- Stylesheets and
<style>CSS before scripts so styles are not delayed. <script defer>Scripts last; deferred so they never block rendering.- Icons and canonical linkLow priority, safe at the end.
Starter template
Copy this into every new page and replace the placeholders.
<!DOCTYPE html> <html lang="en"> <head> <!-- Encoding & viewport --> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Title & SEO --> <title>Page Title | Site Name</title> <meta name="description" content="A clear 150–160 character summary."> <link rel="canonical" href="https://example.com/page"> <!-- Social --> <meta property="og:title" content="Page Title"> <meta property="og:description" content="Short description."> <meta property="og:image" content="https://example.com/cover.jpg"> <!-- Appearance --> <meta name="theme-color" content="#E44D26"> <link rel="icon" href="/icon.svg" type="image/svg+xml"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <!-- Styles & scripts --> <link rel="stylesheet" href="css/style.css"> <script src="js/app.js" defer></script> </head> <body> <!-- Visible content --> </body> </html>
Checklist & quiz
Quick quiz
Lesson summary
- The
<head>contains metadata, not visible content. - Valid children:
title,meta,link,style,script,base,noscript,template. - Start with charset and viewport, then title and description.
- Load CSS before scripts and use
deferfor JavaScript. - Add social and canonical tags to control sharing and indexing.
Inar Learn 