HEAD
Welcome to the Head project, a comprehensive guide to HTML <head>
tags.
Table of Contents
Introduction
Recommended Minimum
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Page's Title</title>
</head>
<body>
<!-- Content -->
</body>
Charset Attribute
Specifies the character encoding for the HTML document. "utf-8"
is the standard encoding that supports a wide range of characters.
<meta charset="utf-8">
Viewport Meta tag
Configures the viewport properties to control how a webpage is displayed on different devices.
<meta name="viewport" content="width=device-width">
Title Tag
Defines the document’s title that is shown in a browser’s title bar or a page’s tab.
<title>Page's Title</title>
Meta Tags
Name Attributes
Author
The author
meta tag specifies the author of the web page.
<meta name="author" content="Author's Name">
Description
<meta name="description" content="A concise description of the page">
Color Scheme
The color-scheme
meta tag sets the preferred color scheme for the page.
<meta name="color-scheme" content="light dark">
Theme Color
The theme-color
meta tag defines the color of the browser’s UI elements when the page is active.
<meta name="theme-color" content="#f1c2d3">
Referrer
The referrer
meta tag specifies the referrer policy for the page.
<meta name="referrer" content="no-referrer">
HTTP-Equiv Attributes
Content Security Policy
The content-security-policy
meta tag specifies the content security policy for the page.
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
Refresh
The refresh
meta tag automatically refreshes the page after a specified time interval.
<meta http-equiv="refresh" content="5">
Link Tags
Stylesheet
The rel="stylesheet"
link tag links an external stylesheet to the document for styling purposes.
<link rel="stylesheet" href="styles.css">
Canonical URL
The rel="canonical"
link tag specifies the canonical URL for the document to avoid duplicate content issues.
<link rel="canonical" href="https://example.com/">
Alternate to Another Language
The rel="alternate"
link tag provides alternate versions of the current document in different languages.
<link rel="alternate" hreflang="es" href="alternate-language.html">
Manifest for Web Application
The rel="manifest"
link tag specifies the location of the web app’s manifest file.
<link rel="manifest" href="app.webmanifest">
RSS Feed
The rel="alternate"
link tag can also be used to specify an RSS feed for the document.
<link rel="alternate" type="application/rss+xml" title="RSS Feed" href="rss-feed.xml">
Learn more: MDN rel="alternate"
Icons
Icon-related link tags can be used to specify various icons for the document.
-
Favicon:
<link rel="icon" href="favicon.ico">
-
Apple Touch Icon:
<link rel="apple-touch-icon" href="apple-touch-icon.png">
Conditional Loading with Media Queries
Load stylesheets conditionally based on media queries.
<link rel="stylesheet" media="(max-width: 600px)" href="mobile.css">
<link rel="stylesheet" media="(min-width: 601px)" href="desktop.css">
Preloading Resources
Preload resources for improved performance.
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="image.webp" as="image">
Prefetching Resources
Prefetch resources for upcoming navigations.
<link rel="prefetch" href="next-page.html">
Social Media
Open Graph and Twitter Card Tags
Facebook Open Graph tags customize content appearance when shared on social media platforms like Facebook, while Twitter Card tags enhance previews on Twitter.
og:type
The type of the content, e.g., "website" or "article".
<meta property="og:type" content="article">
og:url
The URL of the shared content.
<meta property="og:url" content="https://example.com/page">
og:title
The title of the shared content.
<meta property="og:title" content="Page Title">
og:description
The description of the shared content.
<meta property="og:description" content="Description of the content">
og:image
An image to display when the content is shared.
<meta property="og:image" content="image.jpg">
og:site_name
The name of the site or app.
<meta property="og:site_name" content="Site Name">
og:locale
The locale for the content.
<meta property="og:locale" content="en_US">
twitter:card
The type of Twitter card to use.
<meta name="twitter:card" content="summary">
twitter:site
The Twitter handle of the site's creator.
<meta name="twitter:site" content="@username">
twitter:creator
The Twitter handle of the content creator.
<meta name="twitter:creator" content="@author">
When implementing social media tags, it's important to note that Twitter Card tags (e.g.,
twitter:title
,twitter:description
, etc.) are often unnecessary when equivalent Open Graph tags (e.g.,og:title
,og:description
, etc.) are present. Twitter will automatically use Open Graph tags as a fallback when generating previews on its platform. Therefore, you can simplify your implementation by focusing on the Open Graph tags and omitting their Twitter Card counterparts. Twitter Card Fallback Behavior
Learn more: The Open Graph Protocol, Facebook Open Graph, Twitter Card Markup
Extra
<style>
Defines internal styles for the document.
<style>
/* Your styles here */
</style>
<script>
Includes external or inline JavaScript.
<script src="script.js"></script>
<noscript>
Displays content when JavaScript is disabled.
<noscript>
<p>Please enable JavaScript to view this site.</p>
</noscript>