**`<head>`** is where you declare information ABOUT the page rather than content FOR the page: the browser tab title (`<title>`), character encoding (`<meta charset>`), the viewport for responsive design (`<meta name="viewport">`), linked CSS (`<link>`), and often `<script>` tags. None of this renders visually in the document body — the title only shows in the browser tab and search results.
1Understanding <head>
`<head>` is where you declare information ABOUT the page rather than content FOR the page: the browser tab title (<title>), character encoding (<meta charset>), the viewport for responsive design (<meta name="viewport">), linked CSS (<link>), and often <script> tags. None of this renders visually in the document body — the title only shows in the browser tab and search results.
Put <meta charset="UTF-8"> as the very first line inside <head> — browsers can misinterpret special characters if it comes too late in the file.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Store — Home</title>
<link rel="stylesheet" href="/styles.css">
</head>2Practical Example
Here is a real-world application of <head> showing how it is used in production HTML.
<!-- Deferring a script so it doesn't block HTML parsing -->
<head>
<script src="/analytics.js" defer></script>
</head>3Best Practices
Follow these guidelines when working with <head>:
1. Always include <meta charset="UTF-8"> and <meta name="viewport" content="width=device-width, initial-scale=1">
2. Give every page a unique, descriptive <title> for SEO
3. Load render-blocking CSS in <head>, and defer non-critical scripts
Tip: Put <meta charset="UTF-8"> as the very first line inside <head> — browsers can misinterpret special characters if it comes too late in the file.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Store — Home</title>
<link rel="stylesheet" href="/styles.css">
</head>