Live Preview
Visual map of where head and body sit in a document:
<html lang="en">
<head> <meta charset="UTF-8"> <title>...</title> <link rel="stylesheet" ...> </head>
<body> <h1>Visible content</h1> <p>...</p> </body>
</html>HTML <head> Tag
Overview
What You’ll Learn
By the end of this tutorial, you’ll know how to build a correct HTML5 head section for every page you create.
The HTML <head> tag is the invisible container for document metadata, resource links, and scripts. Browsers parse it before rendering the visible page in body.
Document Structure
Where head fits inside html.
title Element
Browser tab and search result titles.
Meta Tags
charset, viewport, description.
CSS & JS Links
link and script in head.
SEO Essentials
Description, canonical, favicon.
head vs header
Metadata vs visible page header.
Fundamentals
What Is the <head> Tag?
The head element (<head>) lives inside <html> and before <body>. It holds information about the document—not the visible content users see on the page.
Invisible but essential
Nothing inside head is rendered as page content (except when a script writes to the document). Browsers, search engines, and social platforms read head metadata to title, encode, and describe your page correctly.
Every valid HTML document should have exactly one head section. Pair it with a body that contains headings, paragraphs, images, and other visible elements.
Foundation
📝 Syntax
Place <head> immediately after the opening <html> tag and before <body>:
syntax.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Metadata and resource links here -->
</head>
<body>
<!-- Visible page content here -->
</body>
</html>Syntax Rules
- Include exactly one
headelement per HTML document. - Place
headas a direct child ofhtml, beforebody. - Do not put visible content (paragraphs, images) inside
head. - Set document language with
langonhtml, not onhead.
Cheat Sheet
⚡ Quick Reference
| Element / Tag | Code Snippet | Purpose |
|---|---|---|
| Character encoding | <meta charset="UTF-8"> | Declare text encoding (place early) |
| Responsive viewport | <meta name="viewport" content="width=device-width, initial-scale=1.0"> | Mobile-friendly scaling |
| Page title | <title>Page Title</title> | Browser tab & search title |
| Description | <meta name="description" content="..."> | Search snippet text |
| Stylesheet | <link rel="stylesheet" href="styles.css"> | Load external CSS |
| Script | <script src="app.js"></script> | Load JavaScript |
| Favicon | <link rel="icon" href="favicon.ico"> | Tab / bookmark icon |
Comparison
⚖️ <head> vs <body>
Both are required structural sections of every HTML document:
| Feature | <head> | <body> |
|---|---|---|
| Visibility | Not rendered as page content | All visible content |
| Typical contents | title, meta, link, script | h1, p, img, nav, etc. |
| Parsed by | Browser, search engines, social crawlers | Browser rendering engine |
| Count per page | Exactly one | Exactly one |
Comparison
⚖️ <head> vs <header>
These names sound similar but serve completely different roles:
| Feature | <head> | <header> |
|---|---|---|
| Location | Inside html, before body | Inside body (visible content) |
| Purpose | Document metadata | Introductory content (logo, nav, hero) |
| Visible to users | No (metadata only) | Yes |
| HTML5 category | Document metadata element | Sectioning / landmark element |
Reference
🔑 Key Components Inside <head>
These are the most common child elements beginners encounter inside the head section:
<title> RequiredDefines the document title shown in the browser tab and search results.
<title>My Page</title><meta> MetadataProvides encoding, viewport, description, and other machine-readable data.
<meta charset="UTF-8"><link> ResourcesLinks external stylesheets, favicons, canonical URLs, and preloaded assets.
<link rel="stylesheet" href="..."><script> BehaviorLoads or defines JavaScript. Use defer or place at end of body for non-critical scripts.
<script src="app.js" defer></script><style> OptionalEmbeds CSS directly in the document. Prefer external stylesheets for larger sites.
<style>body { ... }</style><base> AdvancedSets a default URL and target for relative links. Use at most once, early in head.
<base href="https://example.com/">Reference
🧰 Attributes
The <head> element itself has no required attributes in HTML5. These global attributes are rarely needed:
id / class GlobalStandard global attributes for scripting or styling. Uncommon on head itself.
id="document-head"profile ObsoleteHistorical attribute for metadata profiles. Removed from HTML5—do not use in new projects.
profile="..." <!-- obsolete -->Note: Put lang on <html lang="en">, not on head. The old pattern <head lang="en"> was incorrect.
Hands-On
Examples Gallery
From basic document structure to a production-ready head boilerplate. Open Try It Yourself to edit each example in the interactive editor.
Basic Document Structure
Every HTML page follows this skeleton. The head holds metadata; the body holds visible content.
document-structure.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My First Page</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>title Tag
The <title> element, nested inside head, defines the document title shown in the browser tab and search engine results.
title-tag.html
<head>
<title>Your Page Title</title>
</head>📚 Common Use Cases
Developers use <head> for SEO metadata, responsive viewport settings, loading CSS and JavaScript, declaring character encoding, and linking favicons. Every production page needs a well-formed head section.
Meta Tags
Meta tags provide encoding, viewport, and description information. Place charset within the first 1024 bytes of the document.
meta-tags.html
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A concise description of your webpage">
</head>Linking Stylesheets and Scripts
The head section is the standard place to link external CSS and load JavaScript before the body renders.
linking-stylesheets-and-scripts.html
<head>
<link rel="stylesheet" href="styles.css">
<script src="script.js" defer></script>
</head>Complete Head Boilerplate
A production-ready head with charset, viewport, title, description, favicon, and stylesheet link.
complete-head-boilerplate.html
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Website — Home</title>
<meta name="description" content="Welcome to my website.">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="styles.css">
</head>Design
Organizing Head Content
Keep head sections readable with a consistent order. Styles belong in external CSS files linked from head:
charset First in headviewport Mobile layouttitle Unique per pagelink/script External assets recommended-order.html
<head>
<!-- 1. Encoding (early) -->
<meta charset="UTF-8">
<!-- 2. Viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 3. Title -->
<title>Page Title</title>
<!-- 4. SEO meta -->
<meta name="description" content="...">
<!-- 5. Assets -->
<link rel="stylesheet" href="styles.css">
<script src="app.js" defer></script>
</head>A11y
♿ Accessibility
Head metadata supports accessibility indirectly:
- Set lang on html — helps screen readers pronounce content correctly (
<html lang="en">). - Write descriptive titles — the title is often the first thing announced when a page loads.
- Use meaningful descriptions — meta description helps users choose relevant search results.
- Do not hide critical info only in head — important content must appear in the visible body too.
🧠 How <head> Works
1
Browser receives HTML
The parser starts at DOCTYPE and reads the document top to bottom.
Parsing
2
Head metadata is processed
Charset, title, CSS links, and scripts in head are applied before body render.
Metadata
3
Body content renders
Visible elements in body appear using styles and scripts loaded from head.
Rendering
=
Result: titled, styled page
A well-formed head ensures correct encoding, SEO, and resource loading.
Compatibility
Browser Support
The <head> element is a fundamental part of HTML and is supported in every browser.
Universal · HTML5 Standard
Supported everywhere
Every HTML document uses a head section. All modern and legacy browsers parse head metadata correctly.
100% Fully supported
Google Chrome All versions
Full supportMozilla Firefox All versions
Full supportApple Safari All versions · macOS & iOS
Full supportMicrosoft Edge All versions
Full supportInternet Explorer IE 6+ · Legacy
Full supportOpera All modern versions
Full supportChild element notes
Individual head children have slightly different support nuances.
meta viewport Essential for responsive mobile layouts on all modern browsersprofile on head Obsolete HTML attribute — do not use in new documents<head> tag 100% supported
Bottom line: The <head> element is universal. Focus on filling it with correct charset, viewport, title, and description metadata.
Wrap Up
Conclusion
Understanding the HTML <head> tag is fundamental for every web developer. It shapes how browsers title, encode, style, and describe your pages before any visible content appears.
Start every page with charset, viewport, and a unique title. Add description meta tags for SEO, link your stylesheets, and keep the section organized. Your pages will be easier to find, load, and maintain.
Pro Tips
💡 Best Practices
✅ Do
- Include
charsetandviewporton every page - Write a unique, descriptive
titlefor each page - Add a meaningful
meta descriptionfor search snippets - Link favicons with
link rel="icon" - Keep head organized: encoding, viewport, title, meta, assets
- Set
langon thehtmlelement
❌ Don’t
- Put visible page content inside
head - Use obsolete
profileon head - Put
langon head instead ofhtml - Duplicate
titletags or omit title entirely - Rely on
meta keywordsfor modern SEO - Block rendering with large scripts without
deferorasync
Summary
Key Takeaways
Knowledge Unlocked
Six truths every developer should know about <head>
Bookmark these before you ship — every HTML page depends on a correct head section.
6
Core concepts 01
Metadata Container
head holds info about the page.
02
title Required
Every page needs one title.
Essential 03
SEO Meta
Description helps search results.
Discovery 04
Load Assets
CSS and JS link from head.
Resources 05
Not header
head = metadata; header = visible.
Comparison 06
100% Supported
Universal in all browsers.
Compatibility❓ Frequently Asked Questions
It holds document metadata and resource links—title, meta tags, stylesheets, and scripts—that browsers and search engines use before rendering visible body content.
Common children include
title, meta, link, script, style, base, and noscript. Visible content belongs in body.Yes. Every HTML document should include exactly one
title inside head. It appears in browser tabs and search results.head is invisible metadata in the document structure. header is a visible semantic landmark inside body for logos, navigation, or introductory content.On the
html element: <html lang="en">. Do not put lang on head.Yes. Every HTML page starts with a head section. Learn charset, viewport, title, and description before building visible layouts.
Build Your First Head Section
Practice charset, title, meta tags, and resource links in the interactive HTML editor.
About the author
6 people found this page helpful