Nextgen Blog
HomeLearnAIQuantumRoboticsSecuritySpaceAbout
Nextgen Blog

By Anubhav — full stack engineer, IIT Mandi CSE. Deep dives into AI, software engineering, and the technologies shaping the next generation of tech.

Navigate

  • Home
  • Learn
  • Blog
  • Archive
  • About

Topics

  • Artificial Intelligence
  • Quantum Computing
  • Robotics
  • Cybersecurity
  • Space Tech

Connect

Built with ❤️ & By - Anubhav

© 2026 Nextgen Blog by Anubhav. All rights reserved.

Privacy PolicyTerms of Service
Phase 03 · Semantic Architecture & SEOChapter 16 of 18
15.
Phase 03Read time ~18 minDifficulty beginner

Metadata & `<head>`

The `<head>` is one of the most important parts of an HTML document.

In this chapter
  • 01What Is <head>?
  • 02What Is Metadata?
  • 03The <title> Element
  • 04<title> vs <h1>
  • 05<title>
  • 06<h1>
  • 07<meta charset>
  • 08Why UTF-8?
  • 09The Viewport Meta Tag
  • 10Why Viewport Matters
  • 11Understanding width=device-width
  • 12Understanding initial-scale=1.0
  • 13Don't Disable User Zoom
  • 14Meta Description
  • 15Good Meta Description
  • 16<meta name="robots">
  • 17robots.txt vs Meta Robots
  • 18Meta robots
  • 19robots.txt
  • 20Canonical URL
  • 21Why Canonical URLs Matter
  • 22<link> Element
  • 23Favicon
  • 24Multiple Icon Sizes
  • 25Apple Touch Icon
  • 26Theme Color
  • 27Open Graph Metadata
  • 28og:title
  • 29og:description
  • 30og:image
  • 31og:url
  • 32og:type
  • 33Complete Open Graph Example
  • 34Twitter/X Card Metadata
  • 35Complete Social Metadata
  • 36<meta name="author">
  • 37Language
  • 38Changing Language Within a Page
  • 39CSS in <head>
  • 40Inline <style>
  • 41<script> in <head>
  • 42defer
  • 43async
  • 44defer vs async
  • 45Resource Hints
  • 46preconnect
  • 47dns-prefetch
  • 48preload
  • 49prefetch
  • 50Complete Professional <head>
  • 51Order of <head> Elements
  • 52Production HTML Structure
  • 53What Search Engines Actually See
  • 54Metadata vs Visible Content
  • 55Metadata
  • 56Visible content
  • 57Common Mistakes
  • 58Mistake 1 — Missing title
  • 59Mistake 2 — Missing charset
  • 60Mistake 3 — Missing viewport
  • 61Mistake 4 — Keyword stuffing
  • 62Mistake 5 — Incorrect canonical
  • 63Mistake 6 — Too many preloads
  • 64<head> Interview Questions
  • 65Q1. What is the purpose of <head>?
  • 66Q2. What is <title> used for?
  • 67Q3. Why do we use UTF-8?
  • 68Q4. Why is viewport important?
  • 69Q5. What is a canonical URL?
  • 70Q6. What is Open Graph?
  • 71Q7. What is defer?
  • 72Q8. Difference between async and defer?
  • 73Q9. What is preload?
  • 74Q10. What is preconnect?
  • 75Mini Project — Professional SEO Page
  • 76Chapter 14 Cheat Sheet
  • 77The Most Important Mental Model
  • 78Next Chapter
  • 79Chapter 15 — Accessibility (A11y)
In this chapter (79 sections)
01What Is <head>?02What Is Metadata?03The <title> Element04<title> vs <h1>05<title>06<h1>07<meta charset>08Why UTF-8?09The Viewport Meta Tag10Why Viewport Matters11Understanding width=device-width12Understanding initial-scale=1.013Don't Disable User Zoom14Meta Description15Good Meta Description16<meta name="robots">17robots.txt vs Meta Robots18Meta robots19robots.txt20Canonical URL21Why Canonical URLs Matter22<link> Element23Favicon24Multiple Icon Sizes25Apple Touch Icon26Theme Color27Open Graph Metadata28og:title29og:description30og:image31og:url32og:type33Complete Open Graph Example34Twitter/X Card Metadata35Complete Social Metadata36<meta name="author">37Language38Changing Language Within a Page39CSS in <head>40Inline <style>41<script> in <head>42defer43async44defer vs async45Resource Hints46preconnect47dns-prefetch48preload49prefetch50Complete Professional <head>51Order of <head> Elements52Production HTML Structure53What Search Engines Actually See54Metadata vs Visible Content55Metadata56Visible content57Common Mistakes58Mistake 1 — Missing title59Mistake 2 — Missing charset60Mistake 3 — Missing viewport61Mistake 4 — Keyword stuffing62Mistake 5 — Incorrect canonical63Mistake 6 — Too many preloads64<head> Interview Questions65Q1. What is the purpose of <head>?66Q2. What is <title> used for?67Q3. Why do we use UTF-8?68Q4. Why is viewport important?69Q5. What is a canonical URL?70Q6. What is Open Graph?71Q7. What is defer?72Q8. Difference between async and defer?73Q9. What is preload?74Q10. What is preconnect?75Mini Project — Professional SEO Page76Chapter 14 Cheat Sheet77The Most Important Mental Model78Next Chapter79Chapter 15 — Accessibility (A11y)

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.


1. What Is <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
    └── Footer

The key idea:

<head> describes and configures the document; <body> contains the document's visible content.


2. What Is Metadata?#

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/html

Users may not directly see these values on the page, but browsers and other systems can use them.


3. The <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:

  • Browser tabs
  • Bookmarks
  • History
  • Search-engine results, depending on the search engine and query

Example:

┌─────────────────────────────────────┐
│ HTML Tutorial for Beginners    ×   │
└─────────────────────────────────────┘

4. <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.


5. <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.


6. Why UTF-8?#

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">

7. The Viewport Meta Tag#

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.


8. Why Viewport Matters#

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 │
│                 │
└─────────────────┘

9. Understanding width=device-width#

This:

width=device-width

means:

Use the device's viewport width as the CSS viewport width.

For example:

Phone viewport ≈ 390 CSS pixels

The page is laid out relative to that viewport rather than assuming a desktop-sized layout.


10. Understanding initial-scale=1.0#

This specifies the initial zoom scale.

initial-scale=1.0

means approximately:

Initial zoom = 100%

A common modern declaration is:

<meta
    name="viewport"
    content="width=device-width, initial-scale=1.0">

11. Don't Disable User Zoom#

You may encounter things such as:

<meta
    name="viewport"
    content="width=device-width, initial-scale=1.0, user-scalable=no">

or:

maximum-scale=1

Avoid 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.


12. Meta Description#

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.


13. Good Meta 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.


14. <meta name="robots">#

You can provide crawler directives through:

<meta
    name="robots"
    content="index, follow">

Common directives include:

index
noindex
follow
nofollow

For 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.


15. robots.txt vs Meta Robots#

These are different.

Meta robots#

Lives inside the page:

<meta
    name="robots"
    content="noindex">

robots.txt#

A separate file:

/robots.txt

Conceptually:

robots.txt
     ↓
Crawler access rules
 
<meta name="robots">
     ↓
Instructions associated with a page

Don't confuse them.


16. Canonical URL#

Suppose your content can be accessed through:

https://example.com/article

and:

https://example.com/article?source=google

The 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.


17. Why Canonical URLs Matter#

Imagine:

URL 1
/article
 
URL 2
/article?utm_source=google
 
URL 3
/article?utm_source=newsletter

All may represent the same content.

Conceptually:

             ┌── /article
             │
Same content ├── /article?utm_source=google
             │
             └── /article?utm_source=email
                       │
                       ↓
              Canonical URL
                /article

Canonicalization helps search engines understand your preferred URL.

It is not simply a command that guarantees indexing or ranking behavior.


18. <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 relationships

19. Favicon#

A 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.


20. Multiple Icon Sizes#

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.


21. Apple Touch Icon#

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.


22. Theme Color#

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.


23. Open Graph Metadata#

Now we reach an important topic for social sharing.

Suppose someone shares:

https://nextgen-blog.com/article

on 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.


24. og:title#

<meta
    property="og:title"
    content="The Future of AI Agents">

25. og:description#

<meta
    property="og:description"
    content="Explore how AI agents are changing modern software development.">

26. og:image#

<meta
    property="og:image"
    content="https://example.com/images/ai-agents.jpg">

27. og:url#

<meta
    property="og:url"
    content="https://example.com/ai-agents">

28. 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">

29. Complete Open Graph 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">

These values help platforms construct link previews.


30. Twitter/X Card Metadata#

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.


31. Complete Social Metadata#

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">

32. <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.


33. Language#

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.


34. Changing Language Within a Page#

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.


35. CSS in <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

36. Inline <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.


37. <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>

38. 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 continues

With defer:

HTML parsing ────────────────┐
                             │
Script downloading ──────────┤
                             ↓
                    HTML parsing complete
                             ↓
                    Execute deferred script

39. async#

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
                       ↓
                    executes

Use async when independent execution is appropriate.


40. 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>

41. Resource Hints#

Modern websites can provide hints to the browser about resources.

Common ones include:

preconnect
dns-prefetch
preload
prefetch

These are performance-related features.


42. preconnect#

Suppose your website needs a resource from:

https://cdn.example.com

You 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 request

Don't add preconnect for every external domain.

Use it when an external origin is important enough to justify the connection work.


43. 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.


44. 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.


45. 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 later

The browser decides how and when to honor these hints.


46. Complete Professional <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>

47. Order of <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>

48. Production HTML Structure#

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.


49. What Search Engines Actually See#

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 factors

So 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.


50. Metadata vs Visible Content#

This distinction is extremely important.

Metadata#

<title>HTML Tutorial</title>
 
<meta
    name="description"
    content="Learn HTML...">

Visible content#

<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.


51. Common Mistakes#

Mistake 1 — Missing title#

Bad:

<head>
</head>

Better:

<head>
    <title>My Website</title>
</head>

Mistake 2 — Missing charset#

Bad:

<head>
    <title>Website</title>
</head>

Better:

<head>
    <meta charset="UTF-8">
    <title>Website</title>
</head>

Mistake 3 — Missing viewport#

Bad for modern responsive pages:

<head>
    <meta charset="UTF-8">
</head>

Better:

<meta
    name="viewport"
    content="width=device-width, initial-scale=1.0">

Mistake 4 — Keyword stuffing#

Bad:

<meta
    name="description"
    content="HTML HTML HTML HTML HTML tutorial HTML CSS HTML">

Write a natural description instead.


Mistake 5 — Incorrect canonical#

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.


Mistake 6 — Too many preloads#

Bad mindset:

Preload everything!

This can cause important resources to compete with each other.

Preload should be used selectively.


52. <head> Interview Questions#

Q1. What is the purpose of <head>?#

It contains document metadata and resource/configuration information rather than the primary visible page content.


Q2. What is <title> used for?#

It specifies the document's title, commonly shown in browser tabs and used as an input to search-result presentation.


Q3. Why do we use UTF-8?#

<meta charset="UTF-8">

It provides broad character encoding support.


Q4. Why is viewport important?#

It allows responsive layouts to use the device's viewport appropriately.


Q5. What is a canonical URL?#

It identifies the preferred URL for a piece of content among potentially duplicate or equivalent URLs.


Q6. What is Open Graph?#

A metadata convention used by many platforms to describe how shared URLs should be represented in link previews.


Q7. What is defer?#

For external classic scripts, it allows downloading while HTML parsing continues and delays execution until parsing is complete.


Q8. Difference between async and defer?#

defer
→ execute after parsing
→ preserves order
 
async
→ execute as soon as ready
→ order not guaranteed

Q9. What is preload?#

A resource hint indicating that a resource is important and may be needed soon.


Q10. What is preconnect?#

A resource hint that allows the browser to establish connection setup early for an origin likely to be needed.


53. Mini Project — Professional SEO Page#

Create:

seo-page.html

Build 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
✓ stylesheet

Your <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

54. Chapter 14 Cheat Sheet#

<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>

55. The Most Important Mental Model#

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 hints

If you understand this distinction, you'll have a much stronger understanding of real-world HTML.


Next Chapter#

Chapter 15 — Accessibility (A11y)#

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:

  • What accessibility actually means
  • WCAG fundamentals
  • Semantic HTML and accessibility
  • Screen readers
  • Keyboard navigation
  • Focus
  • Labels
  • Forms and accessibility
  • alt text
  • ARIA
  • aria-label
  • aria-labelledby
  • aria-describedby
  • aria-hidden
  • Landmark roles
  • Accessible buttons vs links
  • Accessible tables
  • Accessible navigation
  • Skip links
  • Focus management
  • Common accessibility mistakes
  • Real-world accessible website structure
  • Accessibility testing
  • Interview questions
  • A complete accessible webpage project

Finished this chapter?

Mark it as complete to track your mastery.

Previous ChapterChapter 13 — Embedded ContentNext ChapterChapter 15 — Accessibility (A11y)
PrevNext