The `<head>` is one of the most important parts of an HTML document.
It doesn't normally contain the visible content of the webpage.
Instead, it tells the browser, search engines, social platforms, and other systems important information about your page.
<head>?#A basic HTML document has:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Metadata goes here -->
</head>
<body>
<!-- Visible page content -->
</body>
</html>Think of the page like this:
HTML Document
│
├── <head>
│ │
│ ├── Page title
│ ├── SEO information
│ ├── Character encoding
│ ├── Mobile viewport
│ ├── Favicon
│ ├── CSS
│ ├── Canonical URL
│ ├── Social sharing metadata
│ └── Resource hints
│
└── <body>
│
├── Header
├── Navigation
├── Main content
└── FooterThe key idea:
<head>describes and configures the document;<body>contains the document's visible content.
Metadata = data about data.
Suppose your page contains:
<h1>Learn HTML</h1>That's visible content.
Metadata might tell search engines:
Title: Learn HTML
Description: Complete HTML tutorial for beginners
Language: English
Canonical URL: https://example.com/htmlUsers may not directly see these values on the page, but browsers and other systems can use them.
<title> Element#One of the most important elements inside <head> is:
<title>Learn HTML</title>Example:
<head>
<title>HTML Tutorial for Beginners</title>
</head>The title can appear in:
Example:
┌─────────────────────────────────────┐
│ HTML Tutorial for Beginners × │
└─────────────────────────────────────┘<title> vs <h1>#These are different.
<title>#<title>HTML Tutorial for Beginners</title>Describes the document/page.
<h1>#<h1>HTML Tutorial for Beginners</h1>Describes the main visible heading.
Think:
<head>
<title>...</title> ← browser/search context
<body>
<h1>...</h1> ← visible page heading
</body>They can have similar wording, but they serve different purposes.
<meta charset>#One of the most important declarations:
<meta charset="UTF-8">Example:
<head>
<meta charset="UTF-8">
<title>My Website</title>
</head>UTF-8 supports a huge range of characters.
For example:
English
हिंदी
中文
日本語
العربية
😀
₹
€Without correct character encoding, some characters may be displayed incorrectly.
Imagine your HTML contains:
<p>नमस्ते दुनिया 🌍</p>With UTF-8:
नमस्ते दुनिया 🌍is interpreted correctly.
Therefore, for modern HTML documents, you will very commonly see:
<meta charset="UTF-8">One of the most important tags for responsive websites:
<meta
name="viewport"
content="width=device-width, initial-scale=1.0">This tells the browser how to interpret the page's viewport on devices such as phones.
Without an appropriate viewport configuration, a mobile browser may lay out a page using a wider virtual viewport and scale it down.
Conceptually:
Without proper viewport
Desktop-like layout
┌───────────────────────────────┐
│ │
│ Wide webpage │
│ │
└───────────────────────────────┘
↓
Mobile screen
┌─────────────┐
│ scaled down │
└─────────────┘With:
<meta
name="viewport"
content="width=device-width, initial-scale=1.0">the page is designed around the device's viewport width.
Mobile viewport
┌─────────────────┐
│ │
│ Responsive page │
│ │
└─────────────────┘width=device-width#This:
width=device-widthmeans:
Use the device's viewport width as the CSS viewport width.
For example:
Phone viewport ≈ 390 CSS pixelsThe page is laid out relative to that viewport rather than assuming a desktop-sized layout.
initial-scale=1.0#This specifies the initial zoom scale.
initial-scale=1.0means approximately:
Initial zoom = 100%A common modern declaration is:
<meta
name="viewport"
content="width=device-width, initial-scale=1.0">You may encounter things such as:
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=no">or:
maximum-scale=1Avoid unnecessarily preventing users from zooming.
People with low vision may depend on browser zoom or other accessibility mechanisms.
Responsive design should be used to solve layout problems rather than unnecessarily restricting user control.
A common SEO-related metadata element is:
<meta
name="description"
content="Learn HTML from beginner to advanced with practical examples.">The description provides a concise summary of the page.
Search engines may use it as part of a search result snippet, although they can choose different text.
Example:
Google Search
HTML Tutorial for Beginners
example.com/html
Learn HTML from beginner to advanced with
practical examples...The displayed snippet isn't guaranteed to exactly match your description.
Suppose your page is about HTML forms.
Bad:
<meta
name="description"
content="HTML">Better:
<meta
name="description"
content="Learn HTML forms, inputs, validation, radio buttons, checkboxes, selects, and accessibility with practical examples.">A good description should accurately represent the page.
Don't stuff it with repeated keywords.
<meta name="robots">#You can provide crawler directives through:
<meta
name="robots"
content="index, follow">Common directives include:
index
noindex
follow
nofollowFor example:
<meta
name="robots"
content="noindex, nofollow">This can instruct compliant search crawlers not to index the page and not to follow links from it.
robots.txt vs Meta Robots#These are different.
Lives inside the page:
<meta
name="robots"
content="noindex">A separate file:
/robots.txtConceptually:
robots.txt
↓
Crawler access rules
<meta name="robots">
↓
Instructions associated with a pageDon't confuse them.
Suppose your content can be accessed through:
https://example.com/articleand:
https://example.com/article?source=googleThe content may effectively be the same.
You can specify a canonical URL:
<link
rel="canonical"
href="https://example.com/article">This tells search engines which URL you consider the preferred/canonical version.
Imagine:
URL 1
/article
URL 2
/article?utm_source=google
URL 3
/article?utm_source=newsletterAll may represent the same content.
Conceptually:
┌── /article
│
Same content ├── /article?utm_source=google
│
└── /article?utm_source=email
│
↓
Canonical URL
/articleCanonicalization helps search engines understand your preferred URL.
It is not simply a command that guarantees indexing or ranking behavior.
<link> Element#The <link> element connects your document to an external resource or establishes a relationship.
Example:
<link
rel="stylesheet"
href="/css/style.css">Another example:
<link
rel="canonical"
href="https://example.com/article">Another:
<link
rel="icon"
href="/favicon.ico">So:
<link>
│
├── stylesheet
├── icon
├── canonical
├── preload
├── preconnect
└── other relationshipsA favicon is the small icon associated with a website.
Example:
<link
rel="icon"
href="/favicon.ico">Modern websites may use:
<link
rel="icon"
type="image/png"
href="/favicon.png">You might see:
┌────────────────────────────────────────┐
│ 🌐 NextGen Blog × │
└────────────────────────────────────────┘The small icon beside the title is the favicon.
Modern sites may provide different icons:
<link
rel="icon"
type="image/png"
sizes="32x32"
href="/icons/favicon-32.png">
<link
rel="icon"
type="image/png"
sizes="16x16"
href="/icons/favicon-16.png">For some platforms, additional icon/link metadata may be needed.
For Apple home-screen contexts, you may encounter:
<link
rel="apple-touch-icon"
href="/icons/apple-touch-icon.png">This is used by supported Apple environments when saving a website to the home screen.
You may encounter:
<meta
name="theme-color"
content="#ffffff">This can allow supported browsers/platforms to use the specified color for browser UI or surrounding interface.
For example:
<meta
name="theme-color"
content="#111827">This is primarily a browser/platform UI hint, not ordinary CSS.
Now we reach an important topic for social sharing.
Suppose someone shares:
https://nextgen-blog.com/articleon a social platform.
You want the preview to contain:
┌────────────────────────────────────┐
│ [Article Image] │
│ │
│ Next Generation AI Agents │
│ │
│ How AI agents are changing... │
└────────────────────────────────────┘Open Graph metadata helps provide information for link previews.
og:title#<meta
property="og:title"
content="The Future of AI Agents">og:description#<meta
property="og:description"
content="Explore how AI agents are changing modern software development.">og:image#<meta
property="og:image"
content="https://example.com/images/ai-agents.jpg">og:url#<meta
property="og:url"
content="https://example.com/ai-agents">og:type#For an article:
<meta
property="og:type"
content="article">For a general website page, you may commonly see:
<meta
property="og:type"
content="website"><meta
property="og:title"
content="The Future of AI Agents">
<meta
property="og:description"
content="Explore how AI agents are changing modern software development.">
<meta
property="og:image"
content="https://example.com/images/ai-agents.jpg">
<meta
property="og:url"
content="https://example.com/ai-agents">
<meta
property="og:type"
content="article">These values help platforms construct link previews.
You may also encounter metadata such as:
<meta
name="twitter:card"
content="summary_large_image">For example:
<meta
name="twitter:title"
content="The Future of AI Agents">
<meta
name="twitter:description"
content="Explore how AI agents are changing modern software development.">
<meta
name="twitter:image"
content="https://example.com/images/ai-agents.jpg">Modern X/social preview behavior can vary, and Open Graph metadata is also commonly used.
A practical example:
<meta
property="og:title"
content="The Future of AI Agents">
<meta
property="og:description"
content="Explore how AI agents are changing modern software development.">
<meta
property="og:image"
content="https://example.com/images/ai-agents.jpg">
<meta
property="og:url"
content="https://example.com/ai-agents">
<meta
property="og:type"
content="article">
<meta
name="twitter:card"
content="summary_large_image">
<meta
name="twitter:title"
content="The Future of AI Agents">
<meta
name="twitter:description"
content="Explore how AI agents are changing modern software development.">
<meta
name="twitter:image"
content="https://example.com/images/ai-agents.jpg"><meta name="author">#You may encounter:
<meta
name="author"
content="Anubhav Chaudhary">This identifies the author in metadata.
However, don't assume that adding arbitrary metadata automatically produces SEO benefits.
The actual visible page content and semantic structure remain important.
Earlier we saw:
<html lang="en">For Hindi:
<html lang="hi">For a page primarily containing Hindi:
<html lang="hi">For English:
<html lang="en">This helps browsers and assistive technologies understand the document language.
Suppose your page is English but contains a Hindi phrase.
You can specify:
<p>
Welcome to my website.
</p>
<p lang="hi">
नमस्ते दुनिया
</p>This is useful for accessibility and language-aware processing.
<head>#You can connect CSS:
<link
rel="stylesheet"
href="/css/style.css">The browser discovers the stylesheet from the HTML.
Example:
HTML
│
│ <link rel="stylesheet">
↓
style.css
│
↓
CSS rules
│
↓
Rendered page<style>#You can also place CSS directly inside <head>:
<head>
<style>
body {
font-family: Arial, sans-serif;
}
</style>
</head>This is valid HTML.
However, large applications generally organize CSS separately or through their framework's styling system.
<script> in <head>#JavaScript can also be included from the head:
<script src="/js/app.js"></script>But there is an important performance consideration.
If the script blocks HTML parsing, it can delay page construction.
That's why you'll often see:
<script
src="/js/app.js"
defer>
</script>defer#Example:
<script
src="/js/app.js"
defer>
</script>For external classic scripts, defer tells the browser to download the script while parsing the HTML and execute it after parsing is complete, while preserving the order of deferred scripts.
Conceptually:
Without defer
HTML parsing
↓
script download
↓
script execution
↓
HTML parsing continuesWith defer:
HTML parsing ────────────────┐
│
Script downloading ──────────┤
↓
HTML parsing complete
↓
Execute deferred scriptasync#Another option:
<script
src="/js/analytics.js"
async>
</script>async scripts download in parallel and execute as soon as they are ready.
Execution order between multiple async scripts is not guaranteed.
Conceptually:
HTML parsing ────────────────────────
│
├── download script A
│
├── download script B
│
└── whichever finishes first
↓
executesUse async when independent execution is appropriate.
defer vs async#| Feature | defer |
async |
|---|---|---|
| Downloads while HTML parses | ✅ | ✅ |
| Executes after parsing | ✅ | ❌ |
| Preserves order | ✅ | ❌ |
| Good for dependent scripts | ✅ | Usually not |
| Good for independent scripts | Sometimes | ✅ |
A common example:
<script src="/js/app.js" defer></script>Modern websites can provide hints to the browser about resources.
Common ones include:
preconnect
dns-prefetch
preload
prefetchThese are performance-related features.
preconnect#Suppose your website needs a resource from:
https://cdn.example.comYou can use:
<link
rel="preconnect"
href="https://cdn.example.com">This tells the browser that an early connection to that origin may be useful.
Conceptually:
Without preconnect
Request
↓
DNS
↓
Connection
↓
TLS
↓
Resource
With preconnect
DNS / connection preparation
↓
Resource requestDon't add preconnect for every external domain.
Use it when an external origin is important enough to justify the connection work.
dns-prefetch#Example:
<link
rel="dns-prefetch"
href="//cdn.example.com">This lets the browser resolve the domain name early.
Compared with preconnect, it is a narrower hint.
preload#preload tells the browser that a particular resource is important and may be needed soon.
Example:
<link
rel="preload"
href="/fonts/my-font.woff2"
as="font"
type="font/woff2"
crossorigin>Another example:
<link
rel="preload"
href="/images/hero.webp"
as="image">Use preload carefully.
Preload is not "load everything early."
Overusing it can compete with more important resources.
prefetch#prefetch generally indicates that a resource may be useful for a future navigation.
Example:
<link
rel="prefetch"
href="/next-page.html">Think:
preload
↓
Needed soon
prefetch
↓
Might be needed laterThe browser decides how and when to honor these hints.
<head>#Here's a strong example:
<head>
<meta charset="UTF-8">
<meta
name="viewport"
content="width=device-width, initial-scale=1.0">
<title>HTML Tutorial for Beginners</title>
<meta
name="description"
content="Learn HTML from beginner to advanced with practical examples and projects.">
<link
rel="canonical"
href="https://example.com/html">
<link
rel="icon"
href="/favicon.ico">
<meta
name="theme-color"
content="#ffffff">
<!-- Open Graph -->
<meta
property="og:title"
content="HTML Tutorial for Beginners">
<meta
property="og:description"
content="Learn HTML from beginner to advanced with practical examples.">
<meta
property="og:image"
content="https://example.com/images/html-course.jpg">
<meta
property="og:url"
content="https://example.com/html">
<meta
property="og:type"
content="website">
<!-- Twitter/X -->
<meta
name="twitter:card"
content="summary_large_image">
<meta
name="twitter:title"
content="HTML Tutorial for Beginners">
<meta
name="twitter:description"
content="Learn HTML from beginner to advanced.">
<meta
name="twitter:image"
content="https://example.com/images/html-course.jpg">
<!-- CSS -->
<link
rel="stylesheet"
href="/css/style.css">
</head><head> Elements#There isn't one universal mandatory order for everything in <head>, but a clean structure can make your document easier to maintain.
For example:
<head>
│
├── Character encoding
│
├── Viewport
│
├── Title
│
├── Description
│
├── Canonical
│
├── Icons
│
├── Social metadata
│
├── Resource hints
│
├── Stylesheets
│
└── Other metadata/scripts
│
</head>Putting everything together:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta
name="viewport"
content="width=device-width, initial-scale=1.0">
<title>NextGen Blog — AI & Technology</title>
<meta
name="description"
content="Explore AI, software development, technology trends, and the future of intelligent applications.">
<link
rel="canonical"
href="https://nextgen-blog.com/">
<link
rel="icon"
href="/favicon.ico">
<meta
name="theme-color"
content="#ffffff">
<meta
property="og:title"
content="NextGen Blog — AI & Technology">
<meta
property="og:description"
content="AI, software development, and technology insights.">
<meta
property="og:image"
content="https://nextgen-blog.com/images/og-image.jpg">
<meta
property="og:url"
content="https://nextgen-blog.com/">
<meta
property="og:type"
content="website">
<link
rel="stylesheet"
href="/styles/main.css">
</head>
<body>
<header>
<h1>NextGen Blog</h1>
</header>
<main>
<article>
<h2>The Future of AI Agents</h2>
<p>
AI agents are changing how software is built.
</p>
</article>
</main>
<footer>
<p>© 2026 NextGen Blog</p>
</footer>
</body>
</html>This is a solid foundation for a production-style HTML page.
A common beginner misconception is:
"SEO means putting lots of keywords into
<meta>tags."
Modern SEO is much broader.
Search engines can consider:
Page content
+
Semantic HTML
+
Title
+
Description
+
Links
+
Structured data
+
Canonicalization
+
Page experience
+
Accessibility/usability signals
+
Other technical factorsSo this:
<meta
name="keywords"
content="html, css, javascript, html tutorial">is not a modern SEO strategy.
The old meta keywords approach is not something you should rely on.
This distinction is extremely important.
<title>HTML Tutorial</title>
<meta
name="description"
content="Learn HTML..."><h1>HTML Tutorial</h1>
<p>
Learn HTML from beginner to advanced.
</p>Don't hide important information only in metadata.
If something is essential to understanding the page, it should generally be available as actual page content.
Bad:
<head>
</head>Better:
<head>
<title>My Website</title>
</head>Bad:
<head>
<title>Website</title>
</head>Better:
<head>
<meta charset="UTF-8">
<title>Website</title>
</head>Bad for modern responsive pages:
<head>
<meta charset="UTF-8">
</head>Better:
<meta
name="viewport"
content="width=device-width, initial-scale=1.0">Bad:
<meta
name="description"
content="HTML HTML HTML HTML HTML tutorial HTML CSS HTML">Write a natural description instead.
Don't put:
<link
rel="canonical"
href="https://example.com/wrong-page">on a page whose canonical URL is actually different.
Canonical URLs need to accurately represent your URL strategy.
Bad mindset:
Preload everything!This can cause important resources to compete with each other.
Preload should be used selectively.
<head> Interview Questions#<head>?#It contains document metadata and resource/configuration information rather than the primary visible page content.
<title> used for?#It specifies the document's title, commonly shown in browser tabs and used as an input to search-result presentation.
<meta charset="UTF-8">It provides broad character encoding support.
It allows responsive layouts to use the device's viewport appropriately.
It identifies the preferred URL for a piece of content among potentially duplicate or equivalent URLs.
A metadata convention used by many platforms to describe how shared URLs should be represented in link previews.
defer?#For external classic scripts, it allows downloading while HTML parsing continues and delays execution until parsing is complete.
async and defer?#defer
→ execute after parsing
→ preserves order
async
→ execute as soon as ready
→ order not guaranteedpreload?#A resource hint indicating that a resource is important and may be needed soon.
preconnect?#A resource hint that allows the browser to establish connection setup early for an origin likely to be needed.
Create:
seo-page.htmlBuild a page for:
NextGen Blog
"AI Agents Are Changing Software Development"Your <head> should contain:
✓ charset
✓ viewport
✓ title
✓ description
✓ canonical
✓ favicon
✓ theme-color
✓ Open Graph
✓ social card metadata
✓ stylesheetYour <body> should contain:
<header>
Logo
Navigation
</header>
<main>
<article>
<h1>AI Agents Are Changing Software Development</h1>
Author information
Featured image
Article content
Related links
</article>
</main>
<footer>
Copyright
</footer>The goal is to connect everything you've learned so far:
HTML Structure
↓
Semantic HTML
↓
Headings
↓
Images
↓
Links
↓
Metadata
↓
SEO-friendly structure<head>
│
├── <title>
│
├── <meta charset="UTF-8">
│
├── <meta name="viewport">
│
├── <meta name="description">
│
├── <meta name="robots">
│
├── <link rel="canonical">
│
├── <link rel="icon">
│
├── <meta property="og:*">
│
├── <meta name="twitter:*">
│
├── <link rel="stylesheet">
│
├── <link rel="preconnect">
│
├── <link rel="preload">
│
├── <link rel="prefetch">
│
└── <script defer>Think of <head> as the control room of your webpage.
HTML PAGE
│
┌────────────┴────────────┐
│ │
<head> <body>
│ │
│ │
"What is this page?" "What does user see?"
│ │
├── Title ├── Header
├── Description ├── Navigation
├── SEO ├── Main
├── Social sharing ├── Article
├── Favicon ├── Images
├── CSS ├── Forms
├── Resources └── Footer
└── Browser hintsIf you understand this distinction, you'll have a much stronger understanding of real-world HTML.
Next, we'll learn how to build HTML that works properly for everyone, including users who rely on screen readers, keyboard navigation, magnification, voice control, and other assistive technologies.
We'll cover:
alt textaria-labelaria-labelledbyaria-describedbyaria-hiddenMark it as complete to track your mastery.