8.0 The head Element
The <head> section contains machine-readable information about the
document. Nothing in <head> renders as page content, but it controls
the browser tab title, character encoding, responsive viewport, linked stylesheets,
scripts, and search engine metadata.
8.1 title
The <title> element sets the text shown in the browser tab and used
as the default bookmark name. Search engines display it as the clickable headline in
results.
<title>HTML Story: Head & Metadata — JimFawcett</title>
- Keep it under 60 characters so it is not truncated in search results.
- Put the most specific part first (page name, then site name).
- Every page must have a unique title.
8.2 meta Tags
<meta> is a void element that delivers name-value metadata to the
browser, search engines, and social platforms.
<!-- Character encoding - always first in head -->
<meta charset="UTF-8">
<!-- Responsive viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Search engine description -->
<meta name="description" content="A concise summary of this page for search results.">
<!-- Author -->
<meta name="author" content="James Fawcett">
<!-- Prevent indexing (private pages) -->
<meta name="robots" content="noindex, nofollow">
<!-- Open Graph (social sharing) -->
<meta property="og:title" content="HTML Story: Head & Metadata">
<meta property="og:description" content="What appears when this URL is shared on social media.">
<meta property="og:image" content="https://example.com/preview.jpg">
Important meta attributes
| Meta | Purpose |
|---|
charset="UTF-8" | Declares character encoding. Always UTF-8. Must be within the first 1024 bytes of the document. |
name="viewport" | Controls layout on mobile. Without it, phones render the page at desktop width and zoom out. |
name="description" | Page summary shown in search results (150-160 characters). Does not directly affect ranking. |
name="robots" | Crawler directives: index/noindex, follow/nofollow. |
http-equiv="refresh" | Redirects or refreshes after N seconds. Avoid for navigation — use HTTP redirects instead. |
property="og:*" | Open Graph tags for rich social previews (Facebook, LinkedIn, etc.). |
name="twitter:*" | Twitter Card tags for Twitter/X share previews. |
8.3 Linking External Resources
The <link> element connects external resources to the document. It is
most often used to attach stylesheets and the favicon:
<!-- Stylesheet -->
<link rel="stylesheet" href="styles/main.css">
<!-- Favicon -->
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32.png">
<!-- Apple touch icon -->
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<!-- Preload critical resource -->
<link rel="preload" href="fonts/body.woff2" as="font" type="font/woff2" crossorigin>
<!-- Prefetch next likely page -->
<link rel="prefetch" href="chapter2.html">
<!-- Canonical URL (avoid duplicate content penalties) -->
<link rel="canonical" href="https://example.com/html-story/">
8.4 Script Loading
Where and how you place <script> tags determines when JavaScript
downloads and executes relative to HTML parsing:
Script placement strategies
| Strategy | Behavior |
|---|
<script src="…"> in <head> |
Parser blocks until script downloads and executes. Use only for critical render-blocking scripts. |
<script src="…" defer> |
Downloads in parallel; executes after HTML is fully parsed, in document order. Best for most page scripts. |
<script src="…" async> |
Downloads in parallel; executes as soon as downloaded, possibly out of order. Best for independent analytics scripts. |
<script> at end of <body> |
Executes after all HTML above it is parsed. Traditional alternative to defer. |
Inline <script> |
Executes immediately where it appears. No network round-trip; cannot be cached separately. Keep minimal. |
<!-- In head: loads in parallel, runs after parsing -->
<script src="app.js" defer></script>
<!-- In head: loads and runs immediately (blocking) -->
<script src="critical.js"></script>
<!-- Inline -->
<script>
// runs at parse time
document.documentElement.classList.add('js');
</script>
8.5 Complete head Example
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Page — Site Name</title>
<meta name="description" content="One or two sentences for search results.">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/app.js" defer></script>
</head>
8.6 References
Head & Metadata References