Every HTML page has a <head> section that users never see directly—yet it shapes the browser tab title, mobile scaling, styling, scripts, and how search engines summarize your site.
Understanding the head is one of the first skills every web developer needs. This tutorial walks through structure, essential meta tags, linked resources, SEO basics, and six hands-on examples you can edit live.
Metadata.
Tab text.
Charset SEO.
CSS fonts.
Inline CSS.
Social tags.
<head> Element?The <head> element is a container for document metadata. It sits inside <html>, before <body>, and holds information about the page rather than visible content.
Browsers use head data to set the tab title, apply CSS, run JavaScript, and scale the page on mobile. Search engines and social platforms read meta tags to build snippets and link previews.
Nothing inside head renders as page content. When you click View Output in the examples below, you see the body content that the head influences—styled text, layout, and notes about the tab title.
See the head tag reference for the full attribute list and browser notes.
<head> ElementEvery HTML5 document follows this skeleton. The head comes first; the body holds everything users see:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page Title</title>
</head>
<body>
<!-- Visible content goes here -->
</body>
</html>charset — declare UTF-8 encoding as early as possible.viewport — enable proper mobile scaling.title — sets the browser tab, bookmark, and default search result title.body — separate from head; holds headings, text, images, and UI.<head> ElementsThese tags appear in almost every professional HTML page:
<title> — required for valid HTML; one per document.<meta> — charset, viewport, description, author, robots, Open Graph, and more.<link> — connect external CSS, favicons, and web fonts.<style> — embed CSS rules directly in the document.<script> — load or define JavaScript; use defer for non-blocking external scripts.<base> — optional; sets a default URL for relative links (use sparingly).<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Short summary for search engines.">
<title>My Website</title>
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="favicon.ico">
<script src="app.js" defer></script>
</head>The head is where you connect stylesheets, fonts, and scripts to your page.
Link external CSS with rel="stylesheet". Styles in head apply to the entire document:
<link rel="stylesheet" href="styles.css">You can also embed CSS inline with a <style> block—useful for small pages or critical above-the-fold styles.
Load web fonts from services like Google Fonts using link with rel="preconnect" for faster DNS/TLS, then the font stylesheet:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap">External scripts belong in head with defer so HTML parsing is not blocked and scripts run in order after the document is ready:
<script src="app.js" defer></script>Use async instead when the script is independent and order does not matter (analytics snippets, for example).
<head> ElementSearch engines and social networks read head metadata to understand and promote your page:
title — include the page topic and site name; avoid duplicate titles across pages.meta description — write a human-readable summary; it may appear as the snippet below your link in results.link rel="canonical" — tells search engines the preferred URL when duplicate content exists.og:) — controls title, description, and image when shared on Facebook, LinkedIn, and similar platforms.<title>HTML Head Tutorial | CodeToFun</title>
<meta name="description" content="Learn metadata, charset, viewport, and linked resources in the HTML head.">
<link rel="canonical" href="https://example.com/html/head">
<meta property="og:title" content="HTML Head Tutorial">
<meta property="og:description" content="Metadata and SEO for beginners.">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary_large_image">width=device-width.title.defer or async delay page rendering.body, not head.meta charset within the first few lines of head.| Element / Attribute | Purpose |
|---|---|
<title> | Browser tab and bookmark title |
meta charset | Character encoding (UTF-8) |
meta viewport | Mobile responsive scaling |
meta description | Search snippet summary |
link rel="stylesheet" | External CSS file |
<style> | Inline CSS in the document |
script defer | Non-blocking JS after parse |
og:* / twitter:* | Social sharing previews |
Six examples from a minimal head to a complete metadata setup. Head content is invisible—each View Output shows the body affected by the head (tab title note, styling, and layout).
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Page</title>
</head>
<body>
<h1>Hello, world!</h1>
</body>Charset, viewport, and title are the three tags every new page should start with. The visible heading lives in body; the tab text comes from title in head.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A beginner-friendly guide to the HTML head element.">
<meta name="author" content="Alex Developer">
<title>HTML Head Tutorial</title>
</head>meta description does not appear on the page itself. Search engines may show it under your link in results. Author is optional metadata.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Styled Page</title>
<link rel="stylesheet" href="styles.css">
</head>link rel="stylesheet" fetches an external CSS file. Rules in that file style every matching element in body.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Internal CSS</title>
<style>
body { font-family: Georgia, serif; max-width: 560px; margin: 2rem auto; }
h1 { color: #7c3aed; border-bottom: 2px solid #ddd6fe; }
</style>
</head>A <style> element embeds CSS directly in the document. Good for small demos; large sites usually use external stylesheets.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Learn the HTML head element step by step.">
<title>HTML Head — Social Preview</title>
<meta property="og:title" content="HTML Head Tutorial">
<meta property="og:description" content="Learn metadata, SEO, and linked resources.">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="HTML Head Tutorial">
</head>Open Graph and Twitter Card meta tags control link previews on social platforms. They never appear as visible page content.
Well-structured head with charset, viewport, SEO meta, CSS, and a deferred script:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A simple webpage with a well-structured head section.">
<meta name="author" content="Your Name">
<title>HTML Head Example</title>
<link rel="stylesheet" href="styles.css">
<style>
body { font-family: system-ui, sans-serif; padding: 2rem; max-width: 640px; }
h1 { color: #1e40af; }
.note { background: #eff6ff; border-left: 4px solid #3b82f6; padding: 12px 16px; }
</style>
<script src="script.js" defer></script>
</head>Combines every technique from this tutorial: encoding, mobile viewport, SEO meta, external and internal CSS, and non-blocking JavaScript with defer.
meta charset and viewport first in headtitle and meta description per pagelink rel="stylesheet" for main CSS filesdefer to non-critical scripts in headheadmeta keywords for SEO rankingdefer or async<head>, <title>, <meta>, <link>, and <style> work in every browser. meta viewport, defer, and Open Graph tags are supported in all modern browsers. Always test mobile scaling on real devices.
<head>, <title>, <meta>, <link>, and <style> work in every browser. meta viewport, defer, and Open Graph tags are supported in all modern browsers. Always test mobile scaling on real devices.
Bottom line: Core head elements are universal; viewport and deferred scripts cover virtually all users today.
The HTML head is the control center for every page. Charset and viewport keep text readable and mobile-friendly; title and description shape how users and search engines discover your content; linked CSS and scripts power the experience users see in the body.
Next, pick a tool to write HTML with HTML Editors, or dive into HTML Charset and the head tag reference.
Tab text.
Every pageUTF-8 first.
EncodingMobile scale.
ResponsiveSEO snippet.
Not keywordsSafe scripts.
PerformanceThe <title> in head is reused in many places beyond the browser tab: bookmark names, browser history entries, and the default text search engines show for your page. A clear, unique title helps users find your site again.
Add charset, viewport, title, meta description, CSS, and deferred scripts, then preview live.
6 people found this page helpful