The head Element and the Page Title
Nothing in the head is drawn, and yet it decides how the page is found, shared, cached and rendered. The title alone is the most valuable line of markup on the page.
-
HTML Basics
- What is HTML: The Structure Layer of Every Web Page
- HTML Document Structure: DOCTYPE, html, head and body
- Elements, Tags and Attributes: The Vocabulary of HTML
- HTML Comments: Notes That Ship With Your Code
- Block Level and Inline Elements
- Writing and Running Your First HTML Page
- How a Browser Turns Markup Into a Page
- Text and Formatting
- Links and Navigation
- Images and Media
- Lists
- Tables
-
Forms
- Form Structure: form, action and method
- Input Types: Text, Email, Number, Date and the Rest
- Labels: The Most Important Element in a Form
- Checkboxes, Radio Buttons and Grouping
- select, option, optgroup and datalist
- textarea, File Uploads and Hidden Fields
- Buttons: submit, reset and button
- Built In Form Validation
- GET or POST: What Happens When a Form Is Submitted
- Semantic HTML
- HTML5 Features
- Head and Metadata
- HTML with CSS
- HTML with JavaScript
- Accessibility
-
HTML SEO
- How Google Works: Crawling, Indexing and Ranking
- SEO Friendly HTML Structure
- Titles and Descriptions That Earn Clicks
- Headings and Content Structure for Search
- Internal Linking and Anchor Text
- robots.txt and XML Sitemaps
- Canonical URLs and Duplicate Content
- Structured Data and JSON-LD
- Image SEO
- Core Web Vitals and Mobile Friendliness
- DevTools and Debugging
- Editor Productivity
- HTML Best Practices
- HTML Projects
- Advanced Projects
- Practice and Exams
Concept
The head holds information about the document. Nothing in it appears on the page, and yet almost everything about how the page is discovered, shared and rendered is decided here.
What belongs in the head
| Element | Purpose |
|---|---|
meta charset | Character encoding. Must come first. |
meta viewport | How the page maps to the device screen |
title | The page name. Required. |
meta description | The summary a search result may show |
link rel="canonical" | The preferred URL for this content |
link rel="icon" | Favicons |
link rel="stylesheet" | Styles |
meta property="og:*" | Social sharing previews |
script | Only with defer or async |
link rel="preload" | Priority hints for critical resources |
base | Base URL for relative links. Rarely correct. |
A recommended order
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Design Course - Riverside College</title>
<meta name="description" content="A three year design course in Pune covering product and communication design, with a studio based curriculum.">
<link rel="canonical" href="https://example.edu/courses/design">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<meta property="og:title" content="Design Course - Riverside College">
<meta property="og:description" content="A three year studio based design course in Pune.">
<meta property="og:image" content="https://example.edu/images/design-og.jpg">
<meta property="og:url" content="https://example.edu/courses/design">
<meta property="og:type" content="website">
<link rel="stylesheet" href="/styles/site.css">
<script src="/scripts/site.js" defer></script>
</head>The order is not arbitrary. Charset must be in the first bytes so the browser can decode correctly. Viewport must be early so layout is right from the first paint. Title early so the tab is labelled while the page is still loading. Stylesheets before the body content so nothing renders unstyled.
The title element
title is required in every document, and it does more work than any other single line of markup.
- It labels the browser tab, which is how a reader finds your page among fifteen others.
- It is the blue link in a search result - usually the largest text a searcher reads, and one of the strongest ranking signals on the page.
- It is the default bookmark name.
- It is the first thing a screen reader announces when a page loads, before any content.
- It is the fallback for a social preview card when Open Graph tags are missing.
Writing a good one
<!-- weak -->
<title>Home</title>
<title>Welcome to our website</title>
<title>Untitled Document</title>
<title>design course pune best design college admission 2026 apply now</title>
<!-- good -->
<title>Design Course - Riverside College</title>
<title>Fee Structure 2026 - Riverside College</title>
<title>How to Apply - Admission - Riverside College</title>Rules that hold up in practice:
- Unique on every page. Duplicate titles are one of the most commonly reported issues in Search Console.
- Around fifty to sixty characters. Google truncates by pixel width, not character count, so this is a guideline rather than a limit - but a long title is cut off in the middle.
- Most important words first. Truncation happens at the end, and readers scan the beginning.
- Site name last, separated by a hyphen or a pipe. Or omitted on deep pages if space is tight.
- Describe the page, not the site. Home tells a reader with twelve tabs open nothing.
- No keyword stuffing. It reads badly and search engines discount it.
Note that Google frequently rewrites titles in results when it judges yours unhelpful. A clear, accurate title is the way to keep the one you wrote.
Elements that may only appear in the head
title, base, meta and link belong here. style and script may appear in either the head or the body.
Anything else - a heading, a paragraph, a stray character - ends the head early. The parser silently starts the body at that point, and every subsequent element you thought was in the head is now in the body. The symptom is usually a stylesheet that does not apply and a page that renders oddly.
base
<base href="/docs/" target="_blank">Changes what every relative URL on the page resolves against. It affects links, images, scripts, stylesheets and form actions - all of them, including fragment links, which start resolving against the base rather than the current page.
That last effect surprises people: with a base present, href="#section" points at /docs/#section rather than at the current document. Only one base per document is allowed and it must come before any relative URL.
It is genuinely useful in a documentation site served from a subfolder, and a source of confusion everywhere else.
Important rules
- Every document must have a
title. meta charsetshould be in the first kilobyte of the document.- Only one
title, onebaseand one canonical link per page. - The head ends at the first element that does not belong there.
- A script in the head without
deferorasyncblocks parsing. - The head is not optional, though the tags themselves can be omitted and invented by the parser.
Common mistakes
- The same title on every page of a site.
- Leaving an editor default such as Untitled Document.
- Titles longer than the search result can display.
- Visible content accidentally inside the head, ending it early.
- Charset declared after a title containing an accented character.
- Blocking scripts in the head.
- A
baseelement added without realising it also affects fragment links.
Best practices
- Keep a fixed head order across the whole site and template it.
- Write the title as Page - Section - Site, dropping the middle part when it is not needed.
- Keep titles unique, descriptive and under about sixty characters.
- Charset first, viewport second, title third.
- Every script gets
defer. - Avoid
baseunless the deployment genuinely requires it. - Check for duplicate titles in Search Console after launch.
Practice
- Write titles for five pages of one site and check that each is unique and self explanatory.
- Put an
h1inside the head and inspect the DOM. Where did the head end? - Add a
baseelement and observe what happens to a fragment link on the same page. - Compare how your title appears in a browser tab and in a search result preview tool.