Welcome to the Head project, a comprehensive guide to HTML <head> tags.
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page's Title</title>
</head>
<body>
<!-- Content -->
</body>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">Configures the viewport properties to control how a webpage is displayed on different devices.
<meta name="viewport" content="width=device-width, initial-scale=1">Defines the document's title that is shown in a browser's title bar or a page's tab.
<title>Page's Title</title>The application-name meta tag specifies the name of the web application.
<meta name="application-name" content="Your App Name">Learn more: MDN application-name
The author meta tag specifies the author of the web page.
<meta name="author" content="Author's Name">Learn more: MDN author
The description meta tag provides a brief summary of the page's content, often used by search engines and social media platforms.
<meta name="description" content="A concise description of the page">Learn more: MDN description
The referrer meta tag specifies the referrer policy for the page.
<meta name="referrer" content="no-referrer">Learn more: MDN referrer
The color-scheme meta tag sets the preferred color scheme for the page.
<meta name="color-scheme" content="light dark">Learn more: MDN color-scheme
The theme-color meta tag defines the color of the browser's UI elements when the page is active.
<meta name="theme-color" content="#RRGGBB">Learn more: MDN theme-color
The content-security-policy meta tag specifies the content security policy for the page.
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">Learn more: MDN Content Security Policy
The refresh meta tag automatically refreshes the page after a specified time interval.
<meta http-equiv="refresh" content="5">Learn more: MDN Refresh
The rel="stylesheet" link tag links an external stylesheet to the document for styling purposes.
<link rel="stylesheet" href="styles.css">Learn more: MDN rel="stylesheet"
The rel="canonical" link tag specifies the canonical URL for the document to avoid duplicate content issues.
<link rel="canonical" href="canonical-url.html">Learn more: MDN rel="canonical"
The rel="manifest" link tag specifies the location of the web app's manifest file.
<link rel="manifest" href="manifest.json">Learn more: MDN rel="manifest"
The rel="alternate" link tag provides alternate versions of the current document in different languages.
<link rel="alternate" hreflang="es" href="alternate-language.html">Learn more: MDN rel="alternate"
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"
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">
- Mask Icon:
<link rel="mask-icon" href="mask-icon.svg" color="#000000">
Learn more: MDN rel="icon", Apple Developer rel="apple-touch-icon", MDN rel="mask-icon"
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">Learn more: MDN Media Queries
Preload resources for improved performance.
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="image.jpg" as="image">Learn more: MDN rel="preload"
Prefetch resources for upcoming navigations.
<link rel="prefetch" href="next-page.html">Learn more: MDN rel="prefetch"
Facebook Open Graph tags customize content appearance when shared on social media platforms like Facebook, while Twitter Card tags enhance previews on Twitter.
The prefix attribute defines a special marker for Open Graph (OG) meta tags in an HTML document. It's like a label that tells browsers and social media sites to treat property attributes beginning with og: as Open Graph details.
By adding prefix="og:" to your HTML, you ensure that anything with og: is recognized as Open Graph information. This helps browsers and platforms understand your content better.
<head prefix="og: http://ogp.me/ns#">
<!-- ... -->
</head>The URL of the shared content.
<meta property="og:url" content="https://example.com/page">The type of the content, e.g., "website" or "article".
<meta property="og:type" content="article">The title of the shared content.
<meta property="og:title" content="Page Title">The description of the shared content.
<meta property="og:description" content="Description of the content">An image to display when the content is shared.
<meta property="og:image" content="image.jpg">Alt text for the og:image.
<meta property="og:image:alt" content="Alt text for the image">MIME type of the og:image.
<meta property="og:image:type" content="image/jpeg">Height of the og:image.
<meta property="og:image:height" content="600">Width of the og:image.
<meta property="og:image:width" content="800">The name of the site or app.
<meta property="og:site_name" content="Site Name">The locale for the content.
<meta property="og:locale" content="en_US">The type of Twitter card to use.
<meta name="twitter:card" content="summary">The Twitter handle of the site's creator.
<meta name="twitter:site" content="@username">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
Absolutely, let's add information about the <base>, <style>, <script>, and <noscript> elements as well:
Style tags define inline styles directly within the HTML document.
Defines internal styles for the document.
<style>
/* Your styles here */
</style>Script tags are used to include JavaScript code within the HTML document.
Includes external or inline JavaScript.
<script src="script.js"></script>NoScript tags provide content for browsers with disabled JavaScript.
Displays content when JavaScript is disabled.
<noscript>
<p>Please enable JavaScript to view this site.</p>
</noscript>This project is licensed under the MIT License, allowing you to freely use, modify, and distribute the content.