HTML Head

HTML Head: Configuring Document Metadata, Assets, and SEO

The HTML head element acts as the control room for your web page. Content inside head never renders directly in the page body; instead, it supplies character encoding, mobile viewport rules, page titles, stylesheets, and search engine metadata.

Essential Tags Inside Head

Every production web page benefits from this ordered metadata checklist inside head:

• meta charset="UTF-8": Placed first so browsers decode all special characters correctly from byte zero.
• meta name="viewport": Configures mobile screen width (width=device-width, initial-scale=1.0) so responsive CSS media queries work on phones.
• title: Sets the browser tab label and primary search headline.
• meta name="description": Summarizes the page for search result snippets.
• link rel="canonical": Tells search engines the preferred URL when duplicate query parameters exist.
• link rel="stylesheet" and script defer: Imports stylesheets and non-blocking scripts.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Head Configuration Guide</title>
    <meta name="description" content="Configure charset, viewport, canonical links, and stylesheets cleanly inside the HTML head element.">
    <link rel="canonical" href="https://example.com/tutorials/html/lesson/html-head">
    <link rel="icon" type="image/svg+xml" href="/favicon.svg">
    <link rel="stylesheet" href="/css/theme.css">
    <script src="/js/app.js" defer></script>
</head>
<body>
    <h2>Document Metadata Loaded</h2>
    <p>Everything inside head prepares styles, SEO metadata, and mobile scaling.</p>
</body>
</html>

Order Matters in Head

Keep meta charset="UTF-8" within the first 1,024 bytes of the file so the browser never has to re-parse the page. Load CSS link tags before deferred scripts so styles apply immediately without flashing unstyled text.

Common Mistakes to Avoid

• Omitting the viewport meta tag: Without width=device-width, mobile browsers zoom out to simulate a 980px desktop screen and shrink text unreadably.
• Putting visible HTML like div or p inside head: Browsers immediately auto-close head and move misplaced tags into body, potentially dropping later meta tags.
• Blocking rendering with synchronous scripts in head: Always add defer or async to external scripts placed inside head.

Frequently Asked Questions

What is the difference between head and header in HTML?

head sits at the top of html and stores invisible page metadata, while header is a visible semantic landmark inside body for logos and top navigation.

Do I need meta keywords in HTML today?

No. Major search engines ignore meta name="keywords" due to historical spam, so focus on title and meta name="description" instead.