HTML Head
In this page:
The head Container
The head element sits directly between the opening html tag and the visible body tag. It contains metadata, stylesheet links, page titles, and other administrative scripts required to configure your document.
Note: The head container does not render visual layout elements; use the body container for visible designs.
Warning: Never place visible text tags like h1 or p inside the head section, as it violates HTML parsing standards.
Example: The head Container
<html>
<head>
<title>My Page</title>
</head>
<body>
<p>Visible content</p>
</body>
</html>Defining Document Character Sets
Webpages display thousands of unique letters, math signs, and emojis. The meta charset tag tells the browser exactly how to read and render these symbols safely without displaying broken, garbled code.
Note: Always specify UTF-8 as your document character set to support global languages and emojis natively.
Warning: The character set meta tag must be placed within the first few lines of your head section for browsers to read it early.
Example: Defining Document Character Sets
<head>
<meta charset="UTF-8">
</head>Configuring Search Engine Metadata
Search engines use meta description tags to display summary snippets under your clickable blue headline on search results pages. A descriptive description boosts click-through rates.
Note: Keep your meta descriptions between 150 and 160 characters to prevent them from getting truncated by Google.
Warning: Do not write misleading descriptions as search engines will lower your site quality score for poor user experience.
Example: Configuring Search Engine Metadata
<head>
<meta name="description" content="Learn HTML basics with simple examples.">
</head>Connecting External Stylesheets
The link element resides inside the head section to connect your webpage to external CSS stylesheets. It tells the browser where your layout theme and design files live so it can render the page correctly.
Note: Always use the rel="stylesheet" attribute so the browser knows the linked resource contains design rules.
Warning: If the stylesheet link is broken or placed outside the head tag, the webpage will render as unstyled text.
Example: Connecting External Stylesheets
<head>
<link rel="stylesheet" href="styles.css">
</head>Injecting Scripts into the Head
The head section is commonly used to load JavaScript files that need to be parsed early, such as page tracking, layout handlers, or font loaders.
Note: Use the defer attribute on your head script tags to let your HTML structure finish loading before the code runs.
Warning: Loading heavy script files in the head without defer can delay your page load times and trigger blank white screens.
Example: Injecting Scripts into the Head
<head>
<script src="tracker.js" defer></script>
</head>The base Element
The base element sets a default URL and default target for every relative link and form on the page, all in one place. Instead of writing the full domain on every single link, you declare it once in the head and every relative href automatically resolves against it.
Note: A page can only have one base element, and it must appear before any other elements that use URLs, like link or img tags.
Warning: Adding a base tag changes the meaning of every relative link on the page at once, which can cause confusing bugs if you forget it is there.
Example: The base Element
<head>
<base href="https://example.com/" target="_blank">
</head>Canonical Links
The rel=canonical link tells search engines which single URL is the official version of a page when the same content might be reachable through several different URLs, like with and without tracking parameters. This prevents search engines from treating duplicate versions as separate pages and splitting your ranking signals between them.
Note: Add a self-referencing canonical tag to every page, even if you think there are no duplicates — it is a cheap safety net against accidental duplicate content.
Warning: Pointing a canonical tag to the wrong URL can accidentally tell search engines to stop indexing the page you actually wanted people to find.
Example: Canonical Links
<head>
<link rel="canonical" href="https://example.com/page">
</head>Resource Hints (preload, prefetch, preconnect)
Resource hints let you tell the browser about important resources before it would normally discover them. preload fetches something needed for the current page right away, prefetch fetches something likely needed for the next page the user might visit, and preconnect opens a connection to another domain early so later requests to it are faster.
Note: Use preload for your most important above-the-fold font or hero image, since those often load late and cause visible layout shifts.
Warning: Preloading too many resources at once can actually slow down the page, since it competes with other critical requests for bandwidth.
Example: Resource Hints (preload, prefetch, preconnect)
<head>
<link rel="preload" href="hero.jpg" as="image">
<link rel="preconnect" href="https://fonts.example.com">
</head>The noscript Element
The noscript element contains content that only displays if the browser has JavaScript disabled or does not support it. This lets you show a helpful message explaining that certain features require JavaScript instead of leaving users with a silently broken page.
Note: Use noscript to explain what is missing, like 'Please enable JavaScript to use the calculator tool', rather than leaving a blank space.
Warning: Content inside noscript is never seen by users with JavaScript enabled, which is the vast majority of visitors — do not put essential content there.
Example: The noscript Element
<noscript>
Please enable JavaScript to use the calculator tool.
</noscript>- Placing visible content tags like paragraphs and headings inside the head container.
- Leaving the head section completely empty of viewport configuration tags and description metadata.
- Omitting the stylesheet relation tag (rel="stylesheet"), which prevents CSS rules from loading.
- The head container holds invisible configuration details, meta information, and asset link references.
- Define character sets using meta charset="UTF-8" to ensure accurate text rendering across all systems.
- Link external stylesheets inside the head tag to apply styling rules immediately as the page loads.
The head tag and its metadata properties are natively supported by all web browsers.
Chapter Quiz — Complete all 12 topics to unlock
0/12 topics done
Complete these topics first: