The <head> holds everything about the page that isn't directly displayed as content — metadata, the title, links to CSS, and information for browsers and search engines.
Typical Contents
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CodingNow – AI & Full Stack Institute</title>
<meta name="description" content="Learn AI, Data Science and Full Stack development.">
<link rel="canonical" href="https://codingnowai.in/">
<link rel="icon" href="/favicon.ico">
<link rel="stylesheet" href="/style.css">
</head>What Belongs in the Head
| Element | Purpose |
|---|---|
<title> | The browser tab text and default search result title. See Title Tag. |
<meta charset> | Character encoding — should be the first thing inside <head>. See Meta Charset. |
<meta viewport> | Controls mobile scaling. See Meta Viewport. |
<meta description> | The snippet shown in search results. See Meta Description. |
<link> | Stylesheets, favicons, canonical URLs. See Link Tag. |
<script> | Can appear in head (usually with defer) or body. See Script Tag. |
Order Matters (Slightly)
Put <meta charset="UTF-8"> first, within the first 1024 bytes of the document — browsers need to know the encoding before parsing text that might contain special characters.
Common Mistakes
- Putting visible content (like a heading meant to display on the page) inside
<head>— it won't render there - Forgetting
<meta charset="UTF-8">or placing it too late in the document - Loading large
<script>tags in the head withoutdefer/async, blocking the page from rendering — see defer and async
Interview Relevance
Q: "What's the difference between head and header?" — a very common confusion between two similarly-named but completely unrelated tags; see header vs head for the direct answer.
Practice Question
Write a complete <head> section for a page titled "Contact Us" with a meta description and a link to an external stylesheet.
