HTML Head
The <head> holds metadata about the page — the title, character encoding, viewport, links to stylesheets and scripts, and SEO/social tags. Nothing in <head> is rendered on the page directly.
Elements you'll see in <head>
| Element | Purpose |
|---|---|
<title> | Page title for tabs, bookmarks, and search results. |
<meta charset="UTF-8"> | Character encoding. Should be the first meta tag. |
<meta name="viewport"> | How the page scales on mobile devices. |
<meta name="description"> | Short summary shown in search results. |
<link rel="stylesheet"> | External CSS file. |
<link rel="icon"> | Favicon. |
<script> | JavaScript — usually with defer. |
<meta property="og:*"> | Open Graph tags for link previews on social platforms. |
A reasonable starter head
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Page</title>
<meta name="description" content="What this page is about.">
<link rel="icon" href="/favicon.svg">
<link rel="stylesheet" href="/site.css">
<script defer src="/app.js"></script>
</head>
Tip: Put
charset and viewport first — some parsers read only the first kilobyte of <head> looking for them.Example
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Head</title>
</head>
<body>
<h1>HTML Head</h1>
<p>This is a demo page for the "HTML Head" lesson.</p>
</body>
</html>
Try it Yourself »
Exercise
Declare the document encoding using the modern shorthand meta tag.
<meta
="utf-8">
Seven letters. The attribute name for character encoding.
Discussion
Loading…