### Preload Example

Source: https://github.com/joshbuchea/head/blob/master/_autodocs/link-tags.md

Fetches resources needed for the current page with high priority. Requires the 'as' attribute to specify the resource type.

```html
<link rel="preload" href="fonts/font.woff2" as="font" type="font/woff2" crossorigin>
```

```html
<!-- Preload custom font -->
<link rel="preload" href="fonts/custom-font.woff2" as="font" type="font/woff2" crossorigin>

<!-- Preload critical image -->
<link rel="preload" href="images/hero.jpg" as="image">

<!-- Preload CSS -->
<link rel="preload" href="styles/critical.css" as="style">

<!-- Preload script -->
<link rel="preload" href="scripts/analytics.js" as="script">
```

--------------------------------

### Preconnect Example

Source: https://github.com/joshbuchea/head/blob/master/_autodocs/link-tags.md

Establishes an early connection to a domain, including DNS resolution, TCP handshake, and TLS negotiation. Use for critical cross-origin resources.

```html
<link rel="preconnect" href="https://example.com/">
```

```html
<link rel="preconnect" href="https://fonts.googleapis.com/">
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
```

```html
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com/">
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>

<!-- CDN -->
<link rel="preconnect" href="https://cdn.example.com/">

<!-- API Server -->
<link rel="preconnect" href="https://api.example.com/">
```

--------------------------------

### oEmbed JSON Response Example

Source: https://github.com/joshbuchea/head/blob/master/_autodocs/social-tags.md

Example of a JSON response from an oEmbed endpoint. Contains metadata for embedding content like photos, videos, or links.

```json
{
  "type": "photo|video|link|rich",
  "version": "1.0",
  "provider_name": "Provider",
  "provider_url": "https://example.com",
  "title": "Resource title",
  "author_name": "Author",
  "author_url": "https://example.com/author",
  "width": 1200,
  "height": 630,
  "url": "https://example.com/embed-url"
}
```

--------------------------------

### Prefetch Example

Source: https://github.com/joshbuchea/head/blob/master/_autodocs/link-tags.md

Fetches resources that might be needed for the next page visit with very low priority. Useful for pagination or expected next steps.

```html
<link rel="prefetch" href="https://example.com/page2.html">
```

```html
<!-- Prefetch next page in pagination -->
<link rel="prefetch" href="https://example.com/page2.html">

<!-- Prefetch expected resources -->
<link rel="prefetch" href="https://example.com/video.mp4">
```

--------------------------------

### DNS Prefetch Example

Source: https://github.com/joshbuchea/head/blob/master/_autodocs/link-tags.md

Instructs the browser to perform DNS lookups for a domain in the background, improving subsequent resource loading times. Useful for third-party domains.

```html
<link rel="dns-prefetch" href="//example.com/">
```

```html
<link rel="dns-prefetch" href="//cdn.example.com/">
<link rel="dns-prefetch" href="//analytics.google.com/">
```

--------------------------------

### Strict Content Security Policy Example

Source: https://github.com/joshbuchea/head/blob/master/_autodocs/security-best-practices.md

An example of a comprehensive CSP meta tag with multiple directives to enforce strict security policies across various resource types.

```html
<meta http-equiv="Content-Security-Policy" content="
  default-src 'self';
  script-src 'self' https://cdn.example.com 'nonce-random123';
  style-src 'self' https://fonts.googleapis.com;
  img-src 'self' data: https:;
  font-src 'self' https://fonts.gstatic.com;
  connect-src 'self' https://api.example.com;
  frame-ancestors 'none';
  base-uri 'self';
  form-action 'self';
  object-src 'none' 
">
```

--------------------------------

### Web App Manifest JSON Configuration

Source: https://github.com/joshbuchea/head/blob/master/_autodocs/platform-specific.md

Example JSON structure for a Web App Manifest, defining application name, display modes, icons, and shortcuts.

```json
{
  "name": "Full Application Name",
  "short_name": "App",
  "description": "Description of the app",
  "start_url": "/",
  "scope": "/",
  "display": "standalone",
  "orientation": "portrait-primary",
  "theme_color": "#4285F4",
  "background_color": "#FFFFFF",
  "categories": ["productivity"],
  "icons": [
    {
      "src": "/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/icon-maskable.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable"
    }
  ],
  "screenshots": [
    {
      "src": "/screenshot-1x.png",
      "sizes": "540x720",
      "type": "image/png",
      "form_factor": "narrow"
    }
  ],
  "shortcuts": [
    {
      "name": "Quick Action",
      "short_name": "Quick",
      "description": "Perform quick action",
      "url": "/quick-action",
      "icons": [
        {
          "src": "/shortcut-icon.png",
          "sizes": "96x96"
        }
      ]
    }
  ]
}
```

--------------------------------

### Optimized HTML Head Structure

Source: https://github.com/joshbuchea/head/blob/master/_autodocs/recommended-patterns.md

This example demonstrates an optimized HTML <head> structure incorporating critical CSS, DNS prefetching, preconnect, preloading, and deferred scripts for maximum performance.

```html
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  <title>Page Title</title>
  <meta name="description" content="Brief description">

  <!-- Critical CSS inline -->
  <style>
    /* Only critical above-the-fold styles */
    body {
      margin: 0;
      font-family: system-ui, -apple-system, sans-serif;
    }
    header { background: #f0f0f0; padding: 20px; }
    h1 { font-size: 2rem; }
  </style>

  <!-- DNS prefetch for third-parties early -->
  <link rel="dns-prefetch" href="//cdn.example.com">
  <link rel="dns-prefetch" href="//analytics.example.com">

  <!-- Preconnect to critical origins -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

  <!-- Preload critical resources -->
  <link rel="preload" href="/fonts/system.woff2" as="font" type="font/woff2" crossorigin>
  <link rel="preload" href="/css/critical.abc123.css" as="style">
  <link rel="preload" href="/js/app.def456.js" as="script">

  <!-- Main stylesheet -->
  <link rel="stylesheet" href="/css/main.abc123.css">

  <!-- Defer non-critical stylesheet -->
  <link rel="stylesheet" href="/css/non-critical.xyz789.css" media="print" onload="this.media='all'">
  <noscript><link rel="stylesheet" href="/css/non-critical.xyz789.css"></noscript>

  <!-- Icons -->
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">

  <!-- Defer all scripts -->
  <script defer src="/js/app.def456.js" integrity="sha384-..."></script>

  <!-- Disable DNS prefetch for unwanted domains -->
  <meta http-equiv="x-dns-prefetch-control" content="on">
</head>
```

--------------------------------

### Async Script Timing Example

Source: https://github.com/joshbuchea/head/blob/master/_autodocs/scripts-styles.md

Demonstrates the difference between blocking, async, and defer script loading. Async scripts load and execute independently, while defer scripts execute after HTML parsing is complete, both in parallel with parsing.

```html
<head>
  <title>Page</title>
  
  <!-- Blocking script (not recommended) -->
  <!-- <script src="blocking.js"></script> -->
  
  <!-- Async - loads in parallel, executes ASAP -->
  <script async src="analytics.js"></script>
  
  <!-- Defer - loads in parallel, executes after parsing -->
  <script defer src="app.js"></script>
</head>
<body>
  <h1>Page Content</h1>
  
  <!-- Scripts at end of body also defer implicitly -->
  <script src="final.js"></script>
</body>
```

--------------------------------

### Generate SRI Hash using OpenSSL

Source: https://github.com/joshbuchea/head/blob/master/_autodocs/scripts-styles.md

Command-line example using OpenSSL to generate a Subresource Integrity (SRI) hash for a JavaScript file.

```bash
# Using openssl
openssl dgst -sha384 -binary file.js | openssl enc -base64 -A
```

--------------------------------

### Progressive Web App (PWA) Head

Source: https://github.com/joshbuchea/head/blob/master/_autodocs/recommended-patterns.md

Use this head section for installable web applications to configure PWA features, icons, and manifest.

```html
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
  
  <title>App Name</title>
  <meta name="description" content="App description">
  <meta name="theme-color" content="#4285f4">
  <meta name="color-scheme" content="light dark">
  
  <!-- Mobile app configuration -->
  <meta name="apple-mobile-web-app-title" content="App Name">
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">

  <!-- Icons -->
  <link rel="icon" href="/icon-192x192.png" sizes="192x192">
  <link rel="icon" href="/icon-512x512.png" sizes="512x512">
  <link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png">

  <!-- PWA Manifest -->
  <link rel="manifest" href="/manifest.json">

  <!-- OpenSearch (optional) -->
  <link rel="search" href="/opensearch.xml" type="application/opensearchdescription+xml">

  <!-- Stylesheets -->
  <link rel="stylesheet" href="/styles.css">

  <!-- Service worker registration (bottom of head) -->
  <script>
    if ('serviceWorker' in navigator) {
      window.addEventListener('load', () => {
        navigator.serviceWorker.register('/sw.js');
      });
    }
  </script>

  <script defer src="/app.js"></script>
</head>
```

```json
{
  "name": "Full Application Name",
  "short_name": "App",
  "description": "App description",
  "start_url": "/",
  "scope": "/",
  "display": "standalone",
  "orientation": "portrait-primary",
  "theme_color": "#4285F4",
  "background_color": "#FFFFFF",
  "icons": [
    {
      "src": "/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}
```

--------------------------------

### Pinterest Example: Disable Pinning with Message

Source: https://github.com/joshbuchea/head/blob/master/_autodocs/social-tags.md

Example of using the Pinterest meta tag to disable pinning and provide a custom message explaining why.

```html
<meta name="pinterest" content="nopin" description="Sorry, you can't save from my website!">
```

--------------------------------

### Windows Tiles & Browserconfig Configuration

Source: https://github.com/joshbuchea/head/blob/master/_autodocs/deprecated-elements.md

This meta tag was used to configure Windows 10 tiles for a website. It is obsolete as live tiles were removed from the Windows 11 Start menu.

```html
<!-- Deprecated: Windows 10 tile configuration -->
<meta name="msapplication-config" content="/browserconfig.xml">
```

--------------------------------

### Generate SRI Hash using npm package

Source: https://github.com/joshbuchea/head/blob/master/_autodocs/scripts-styles.md

Command-line example using the 'sri' npm package to generate a Subresource Integrity (SRI) hash for a JavaScript file.

```bash
# Using npm
npm install -g sri
sri --file file.js
```

--------------------------------

### Google JSON-LD for Organization

Source: https://github.com/joshbuchea/head/blob/master/_autodocs/social-tags.md

Example of JSON-LD markup for an organization, specifically for Google Knowledge Graph results. Includes brand, contact, and social media details.

```html
<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Organization",
  "name": "Your Brand",
  "url": "https://www.yourbrand.com/",
  "logo": "https://www.yourbrand.com/logo.png",
  "description": "Company description",
  "sameAs": [
    "https://www.facebook.com/yourbrand",
    "https://twitter.com/yourbrand",
    "https://www.instagram.com/yourbrand",
    "https://www.linkedin.com/company/yourbrand"
  ],
  "contactPoint": {
    "@type": "ContactPoint",
    "contactType": "Customer Service",
    "telephone": "+1-800-BRAND",
    "url": "https://www.yourbrand.com/contact"
  }
}
</script>
```

--------------------------------

### Script Integrity (SRI) Example

Source: https://github.com/joshbuchea/head/blob/master/_autodocs/scripts-styles.md

Loads an external script with Subresource Integrity (SRI) attributes to ensure the script has not been tampered with. Requires a hash and crossorigin attribute.

```html
<script src="https://cdn.example.com/script.js" 
        integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC"
        crossorigin="anonymous"></script>
```

--------------------------------

### Schema.org JSON-LD Format for NewsArticle

Source: https://github.com/joshbuchea/head/blob/master/_autodocs/social-tags.md

Example of JSON-LD markup for a NewsArticle, including multiple image URLs and author details.

```html
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "NewsArticle",
  "headline": "Headline Here",
  "image": [
    "https://example.com/photos/1x1/photo.jpg",
    "https://example.com/photos/4x3/photo.jpg",
    "https://example.com/photos/16x9/photo.jpg"
  ],
  "datePublished": "2024-01-15T08:00:00+00:00",
  "dateModified": "2024-01-15T09:00:00+00:00",
  "author": [
    {
      "@type": "Person",
      "name": "Jane Doe",
      "url": "https://example.com/profile/jane-doe"
    }
  ]
}
</script>
```

--------------------------------

### Standard JavaScript Script Type

Source: https://github.com/joshbuchea/head/blob/master/_autodocs/scripts-styles.md

Example of a standard script tag with type 'text/javascript', which is the default and not explicitly required.

```html
<!-- Text JavaScript (default) -->
<script type="text/javascript">
  console.log('standard script');
</script>
```

--------------------------------

### App Links Web Fallback Configuration

Source: https://github.com/joshbuchea/head/blob/master/README.md

Provides a web URL as a fallback for App Links when the app is not installed. This ensures users can still access content via a web browser.

```html
<!-- Web fall back -->
<meta property="al:web:url" content="https://applinks.org/documentation">

```

--------------------------------

### Android Web App Installation

Source: https://github.com/joshbuchea/head/blob/master/_autodocs/platform-specific.md

Enable the 'Add to Home Screen' feature for Android Chrome and set the application name using 'mobile-web-app-capable' and 'application-name' meta tags.

```html
<!-- Enable "Add to Home Screen" on Android Chrome -->
<meta name="mobile-web-app-capable" content="yes">
```

```html
<!-- App name in home screen launcher -->
<meta name="application-name" content="App Name">
```

--------------------------------

### Resource Hint Links

Source: https://github.com/joshbuchea/head/blob/master/README.md

Used for prefetching, preloading, and preconnecting to resources. These hints help improve performance by preparing resources in advance.

```html
<link rel="dns-prefetch" href="//example.com/">
```

```html
<link rel="preconnect" href="https://www.example.com/">
```

```html
<link rel="prefetch" href="https://www.example.com/">
```

--------------------------------

### HTML Template Script Type

Source: https://github.com/joshbuchea/head/blob/master/_autodocs/scripts-styles.md

Example of using a script tag with type 'text/html' to hold client-side templates, which are not executed but can be processed by JavaScript.

```html
<!-- Template for client-side rendering -->
<script type="text/html" id="template">
  <div class="item">
    <p>{{content}}</p>
  </div>
</script>
```

--------------------------------

### Execution Order with Async Scripts

Source: https://github.com/joshbuchea/head/blob/master/_autodocs/scripts-styles.md

Illustrates that multiple async scripts may execute out of their declared order, as they run as soon as they are downloaded.

```html
<!-- script2 may execute before script1 -->
<script async src="script1.js"></script>
<script async src="script2.js"></script>
```

--------------------------------

### JSON Data Script Type

Source: https://github.com/joshbuchea/head/blob/master/_autodocs/scripts-styles.md

Example of embedding JSON data within a script tag, marked with 'application/json'. This content is not executed as JavaScript.

```html
<!-- JSON data block (not executed) -->
<script type="application/json" id="config">
{
  "apiUrl": "https://api.example.com",
  "version": "1.0"
}
</script>
```

--------------------------------

### E-Learning Platform Head

Source: https://github.com/joshbuchea/head/blob/master/_autodocs/recommended-patterns.md

Includes meta tags for character set and viewport, title, description, Open Graph tags for social sharing, and structured data (JSON-LD) for Course schema. Also includes links to CSS and JS files.

```html
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  <title>Course Title | Learning Platform</title>
  <meta name="description" content="Course description">

  <!-- Open Graph -->
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://example.com/courses/course-slug">
  <meta property="og:title" content="Course Title">
  <meta property="og:description" content="Course description">
  <meta property="og:image" content="https://example.com/course-image.jpg">

  <!-- Structured data for Course -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Course",
    "name": "Course Title",
    "description": "Detailed course description",
    "provider": {
      "@type": "Organization",
      "name": "Learning Platform",
      "url": "https://example.com"
    },
    "instructor": {
      "@type": "Person",
      "name": "Instructor Name"
    },
    "hasCourseInstance": {
      "@type": "CourseInstance",
      "name": "Fall 2024",
      "startDate": "2024-09-01",
      "endDate": "2024-12-31"
    }
  }
  </script>

  <link rel="stylesheet" href="/styles.css">
  <script defer src="/main.js"></script>
</head>
```

--------------------------------

### Recommended Minimum HTML Head Elements

Source: https://github.com/joshbuchea/head/blob/master/README.md

Essential meta tags for character encoding and viewport settings should be placed as early as possible in the <head> for consistent document rendering.

```html
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--
  The above 2 meta tags should come as early as possible in the <head>
  to consistently ensure proper document rendering.
  Any other head element should come *after* these tags.
-->
<title>Page Title</title>
```

--------------------------------

### Privacy-Preserving Resource Hints

Source: https://github.com/joshbuchea/head/blob/master/_autodocs/security-best-practices.md

Utilize privacy-preserving resource hints like 'dns-prefetch' and 'preconnect'. 'dns-prefetch' is less impactful on privacy than 'preconnect'.

```html
<!-- dns-prefetch doesn't require full connection -->
<link rel="dns-prefetch" href="//cdn.example.com">

<!-- preconnect establishes connection (more privacy impact) -->
<link rel="preconnect" href="https://fonts.googleapis.com">
```

--------------------------------

### Document External Dependencies with SRI

Source: https://github.com/joshbuchea/head/blob/master/_autodocs/security-best-practices.md

When using external scripts or stylesheets, always document their sources and include integrity hashes for verification.

```html
<!-- Always document external sources -->
<link rel="stylesheet" href="https://cdn.example.com/bootstrap.css" integrity="sha384-...">
<!-- Bootstrap 5.3.0 -->

<script src="https://cdn.example.com/jquery.js" integrity="sha384-..."></script>
<!-- jQuery 3.6.0 -->
```

--------------------------------

### Apple iOS Launch Icon and Startup Image

Source: https://github.com/joshbuchea/head/blob/master/README.md

Specify the path to your app's launch icon and startup image for iOS devices.

```html
<!-- Launch Icon (180x180px or larger) -->
<link rel="apple-touch-icon" href="/path/to/apple-touch-icon.png">

<!-- Launch Screen Image -->
<link rel="apple-touch-startup-image" href="/path/to/launch.png">
```

--------------------------------

### LD-JSON Structured Data Script Type

Source: https://github.com/joshbuchea/head/blob/master/_autodocs/scripts-styles.md

Example of embedding JSON-LD structured data within a script tag, marked with 'application/ld+json', for search engines and other consumers.

```html
<!-- LD-JSON structured data -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "Example"
}
</script>
```

--------------------------------

### CSP Nonce Implementation for Inline Scripts

Source: https://github.com/joshbuchea/head/blob/master/_autodocs/security-best-practices.md

Demonstrates how to use a nonce to allow specific inline scripts. The nonce must be generated server-side and included in both the CSP header and the script tag.

```html
<script nonce="random-abc123xyz">
  // Inline script code
</script>
```

```http
Content-Security-Policy: script-src 'nonce-random-abc123xyz'
```

--------------------------------

### Script Loading - Async and Defer

Source: https://github.com/joshbuchea/head/blob/master/README.md

Combines 'async' and 'defer'. 'async' takes precedence in modern browsers, while 'defer' acts as a fallback for older browsers.

```html
<script async defer src="script.js"></script>
```

--------------------------------

### Basic Script Loading

Source: https://github.com/joshbuchea/head/blob/master/_autodocs/scripts-styles.md

Demonstrates how to load external script files and embed inline scripts. External scripts block HTML parsing by default.

```html
<!-- External script, blocks parsing -->
<script src="script.js"></script>

<!-- Inline script -->
<script>
  // JavaScript code here
</script>
```

--------------------------------

### Preload vs. DNS-Prefetch for Performance and Privacy

Source: https://github.com/joshbuchea/head/blob/master/_autodocs/security-best-practices.md

Use `dns-prefetch` for lighter-touch domain hinting compared to `preload`, which can leak more information.

```html
<!-- Preload preconnects, may leak IP/timing info -->
<link rel="preload" href="https://cdn.example.com/font.woff2" as="font" crossorigin>

<!-- dns-prefetch is lighter touch -->
<link rel="dns-prefetch" href="//cdn.example.com">
```

--------------------------------

### Recommended Order of HTML Head Elements

Source: https://github.com/joshbuchea/head/blob/master/README.md

Follow this order for elements in the <head> to ensure optimal performance and correct rendering, prioritizing encoding, viewport, title, meta tags, links, and scripts.

```html
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Page Title</title>

  <meta name="description" content="Page description">
  <!-- other meta tags -->

  <!-- Open Graph / Social meta tags -->
  <meta property="og:title" content="Page Title">
  <!-- other social meta tags -->

  <link rel="canonical" href="https://example.com/page.html">
  <!-- other link tags (excluding stylesheets and resource hints) -->

  <link rel="preconnect" href="https://example.com">
  <link rel="dns-prefetch" href="https://example.com">

  <link rel="stylesheet" href="styles.css">

  <link rel="icon" href="favicon.ico">

  <script defer src="script.js"></script>
</head>
```

--------------------------------

### Web App Manifest Link

Source: https://github.com/joshbuchea/head/blob/master/_autodocs/platform-specific.md

Link to the Web App Manifest file, which is the recommended approach for PWA configuration across platforms.

```html
<link rel="manifest" href="/manifest.json">
```

--------------------------------

### Favicon and Touch Icon Configuration

Source: https://github.com/joshbuchea/head/blob/master/README.md

Configure favicons and touch icons for different browser and device resolutions. Place favicon.ico in the root directory for older browsers.

```html
<!-- For IE 10 and below -->
<!-- Place favicon.ico in the root directory - no tag necessary -->

<!-- Icon in the highest resolution we need it for -->
<link rel="icon" sizes="192x192" href="/path/to/icon.png">

<!-- Apple Touch Icon (reuse 192px icon.png) -->
<link rel="apple-touch-icon" href="/path/to/apple-touch-icon.png">
```

--------------------------------

### Deferred Stylesheet + Inline Critical Path

Source: https://github.com/joshbuchea/head/blob/master/_autodocs/scripts-styles.md

Load critical CSS inline for initial rendering and defer non-critical stylesheets to improve perceived performance. Use `media='print'` and `onload='this.media="all"'` for deferred loading, with a `noscript` fallback.

```html
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Inline critical CSS -->
  <style>
    /* Font loading and main layout */
    @import url('https://fonts.googleapis.com/css2?family=System+UI');
    
    body { margin: 0; font-family: system-ui; }
    header { background: #f0f0f0; padding: 20px; }
  </style>

  <!-- Deferred non-critical stylesheet -->
  <link rel="stylesheet" href="app.css" media="print" onload="this.media='all'">
  <noscript><link rel="stylesheet" href="app.css"></noscript>

  <!-- Defer script execution -->
  <script defer src="app.js"></script>
</head>
```

--------------------------------

### Recommended Complete HTML Head Structure

Source: https://github.com/joshbuchea/head/blob/master/_autodocs/head-elements.md

A comprehensive HTML head structure including metadata, social sharing tags, canonical URL, resource hints, stylesheets, icons, and deferred scripts.

```html
<head>
  <!-- Character encoding (must be first) -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Document title -->
  <title>Page Title</title>

  <!-- Basic metadata -->
  <meta name="description" content="Page description">
  <meta name="robots" content="index,follow">

  <!-- Social sharing (Open Graph) -->
  <meta property="og:title" content="Page Title">
  <meta property="og:description" content="Description">
  <meta property="og:image" content="https://example.com/image.jpg">

  <!-- Canonical URL -->
  <link rel="canonical" href="https://example.com/page.html">

  <!-- Resource hints -->
  <link rel="preconnect" href="https://example.com">
  <link rel="dns-prefetch" href="https://example.com">

  <!-- Stylesheets -->
  <link rel="stylesheet" href="styles.css">

  <!-- Icons -->
  <link rel="icon" href="favicon.ico">
  <link rel="apple-touch-icon" href="apple-touch-icon.png">

  <!-- Scripts (deferred) -->
  <script defer src="script.js"></script>
</head>
```

--------------------------------

### Execution Order with Defer Scripts

Source: https://github.com/joshbuchea/head/blob/master/_autodocs/scripts-styles.md

Shows that defer scripts execute in the order they appear in the HTML, ensuring predictable execution after parsing.

```html
<!-- script1 always executes before script2 -->
<script defer src="script1.js"></script>
<script defer src="script2.js"></script>
```

--------------------------------

### Windows Tiles Meta Tag (Legacy)

Source: https://github.com/joshbuchea/head/blob/master/_autodocs/platform-specific.md

Configure Windows 10 tiles using the msapplication-config meta tag. This is no longer used in Windows 11.

```html
<!-- Configuration for Windows 10 tiles (no longer used in Windows 11) -->
<meta name="msapplication-config" content="/browserconfig.xml">
```

--------------------------------

### Windows Tiles Configuration Meta Tag

Source: https://github.com/joshbuchea/head/blob/master/DEPRECATED.md

Specifies the configuration file for Windows Tiles, used for live tile integration. This tag is specific to Internet Explorer and Windows integration.

```html
<meta name="msapplication-config" content="/browserconfig.xml">
```

--------------------------------

### Use Nonces for Inline Scripts

Source: https://github.com/joshbuchea/head/blob/master/_autodocs/security-best-practices.md

Employ nonces with inline scripts to allow them while still enforcing CSP, balancing performance and security.

```html
<!-- Inline scripts are faster but harder to sandbox -->
<script nonce="abc123">
  // Inline code
</script>

<!-- External scripts are slower but can be restricted by CSP -->
<script src="/app.js" nonce="abc123"></script>
```

--------------------------------

### Explicit DNS Prefetch and Preconnect Hints

Source: https://github.com/joshbuchea/head/blob/master/_autodocs/deprecated-elements.md

These link relations are used to explicitly control DNS prefetching and establish early connections to domains, replacing the deprecated DNS prefetch control meta tag.

```html
<!-- Explicitly prefetch what you need -->
<link rel="dns-prefetch" href="//cdn.example.com">
<link rel="preconnect" href="https://api.example.com">
```

--------------------------------

### QQ Mobile Browser Meta Tags

Source: https://github.com/joshbuchea/head/blob/master/_autodocs/platform-specific.md

Configure screen orientation, fullscreen display, and application mode for QQ Mobile Browser.

```html
<!-- Screen orientation lock -->
<meta name="x5-orientation" content="landscape|portrait">

<!-- Fullscreen display -->
<meta name="x5-fullscreen" content="true">

<!-- Application mode (fullscreen, gesture controls) -->
<meta name="x5-page-mode" content="app">
```

--------------------------------

### Pingback vs. Webmention Link Tags

Source: https://github.com/joshbuchea/head/blob/master/_autodocs/deprecated-elements.md

Compares the deprecated Pingback XML-RPC link tag with the modern Webmention link tag.

```html
<!-- Old (WordPress XML-RPC) -->
<link rel="pingback" href="https://example.com/xmlrpc.php">

<!-- New (Webmention) -->
<link rel="webmention" href="https://example.com/webmention">
```

--------------------------------

### Preload Link

Source: https://github.com/joshbuchea/head/blob/master/README.md

Instructs the browser to fetch a resource early in the page lifecycle. Specify the href and the 'as' attribute (e.g., 'image', 'script').

```html
<link rel="preload" href="image.png" as="image">
```

--------------------------------

### QQ Mobile Browser Application Mode

Source: https://github.com/joshbuchea/head/blob/master/README.md

Configures the document to display in application mode (fullscreen, etc.) for QQ Mobile Browser. This provides a more app-like experience.

```html
<!-- Document will be displayed in "application mode" (fullscreen, etc.) -->
<meta name="x5-page-mode" content="app">

```

--------------------------------

### Async Script Loading

Source: https://github.com/joshbuchea/head/blob/master/_autodocs/scripts-styles.md

Loads an external script in parallel with HTML parsing. The script executes as soon as it's downloaded, without guaranteed order relative to other async scripts.

```html
<script async src="script.js"></script>
```

--------------------------------

### Recommended HTML Head Structure

Source: https://github.com/joshbuchea/head/blob/master/_autodocs/scripts-styles.md

A structured `<head>` including essential meta tags, title, critical CSS, external stylesheets, font preloading, and deferred scripts for optimal performance and SEO.

```html
<head>
  <!-- Encoding and viewport first -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  <title>Page Title</title>

  <!-- Critical CSS inline -->
  <style>
    /* Critical styles */
  </style>

  <!-- External stylesheets (non-critical) -->
  <link rel="stylesheet" href="styles.css">
  
  <!-- Preload critical fonts -->
  <link rel="preload" href="fonts/custom.woff2" as="font" type="font/woff2" crossorigin>

  <!-- Deferred scripts with integrity -->
  <script defer src="app.js" integrity="sha384-..."></script>
</head>
```

--------------------------------

### File Organization Structure

Source: https://github.com/joshbuchea/head/blob/master/_autodocs/README.md

This snippet displays the directory structure of the HEAD project, illustrating the organization of markdown files for different aspects of HTML head element documentation.

```text
/workspace/home/output/
├── README.md                      (this file)
├── index.md                       (navigation & quick reference)
├── head-elements.md               (element specifications)
├── meta-tags.md                   (meta tag catalog)
├── link-tags.md                   (link relationships)
├── social-tags.md                 (Open Graph, Schema.org, etc.)
├── platform-specific.md           (iOS, Android, PWA)
├── scripts-styles.md              (JavaScript & CSS)
├── recommended-patterns.md        (production templates)
├── deprecated-elements.md         (historical reference)
└── security-best-practices.md     (security guide)
```

--------------------------------

### BrowserConfig XML for Windows Tiles

Source: https://github.com/joshbuchea/head/blob/master/DEPRECATED.md

Minimum required XML markup for the browserconfig.xml file to define Windows Tiles. This file configures the appearance and icons for live tiles.

```xml
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
   <msapplication>
     <tile>
        <square70x70logo src="small.png"/>
        <square150x150logo src="medium.png"/>
        <wide310x150logo src="wide.png"/>
        <square310x310logo src="large.png"/>
     </tile>
   </msapplication>
</browserconfig>
```

--------------------------------

### Web Monetization Meta Tag

Source: https://github.com/joshbuchea/head/blob/master/README.md

Implements the Web Monetization API, allowing for micropayments to content creators. Requires a payment pointer.

```html
<meta name="monetization" content="$paymentpointer.example">
```

--------------------------------

### Standard Optimized Page (New for AMP Replacement)

Source: https://github.com/joshbuchea/head/blob/master/_autodocs/deprecated-elements.md

This represents the modern approach to mobile optimization, which involves directly optimizing core web vitals without requiring a separate AMP-specific link tag.

```html
<!-- New (Standard optimized page) -->
<!-- No special tag needed; optimize core web vitals directly -->
```

--------------------------------

### Force HTTPS with CSP upgrade-insecure-requests

Source: https://github.com/joshbuchea/head/blob/master/_autodocs/security-best-practices.md

Use the Content Security Policy (CSP) 'upgrade-insecure-requests' directive to automatically upgrade all insecure HTTP requests to HTTPS.

```html
<!-- Upgrade insecure requests to HTTPS -->
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
```

--------------------------------

### BrowserConfig XML Structure (Obsolete)

Source: https://github.com/joshbuchea/head/blob/master/_autodocs/platform-specific.md

Defines the structure for the browserconfig.xml file used for legacy Windows tiles. This format is obsolete.

```xml
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="small.png"/>
      <square150x150logo src="medium.png"/>
      <wide310x150logo src="wide.png"/>
      <square310x310logo src="large.png"/>
      <TileColor>#0078D4</TileColor>
    </tile>
  </msapplication>
</browserconfig>
```

--------------------------------

### Basic Meta Tags for Document Rendering

Source: https://github.com/joshbuchea/head/blob/master/README.md

These meta tags should be placed early in the <head> for consistent document rendering. They define character encoding and viewport settings.

```html
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
```

--------------------------------

### Dublin Core Metadata Elements

Source: https://github.com/joshbuchea/head/blob/master/README.md

Use these meta tags to declare Dublin Core metadata for resources. Ensure the DC namespace is declared using a link tag.

```html
<!-- Declare the Dublin Core namespace -->
<link rel="schema.DC" href="https://purl.org/dc/elements/1.1/">

<meta name="DC.title" content="Page Title">
<meta name="DC.creator" content="Author Name">
<meta name="DC.subject" content="Keywords; Topics">
<meta name="DC.description" content="A brief description of the page content">
<meta name="DC.publisher" content="Publisher Name">
<meta name="DC.contributor" content="Contributor Name">
<meta name="DC.date" content="YYYY-MM-DD">
<meta name="DC.type" content="Text">
<meta name="DC.format" content="text/html">
<meta name="DC.identifier" content="https://example.com/page.html">
<meta name="DC.source" content="https://example.com/original-source">
<meta name="DC.language" content="en">
<meta name="DC.relation" content="https://example.com/related">
<meta name="DC.coverage" content="Spatial or temporal coverage">
<meta name="DC.rights" content="Copyright Owner Name">
```

--------------------------------

### Multiple Open Graph Images

Source: https://github.com/joshbuchea/head/blob/master/_autodocs/social-tags.md

Allows specifying multiple images for a preview, with the first image listed being the primary one.

```html
<!-- Multiple images (first is primary) -->
<meta property="og:image" content="https://example.com/image1.jpg">
<meta property="og:image" content="https://example.com/image2.jpg">
<meta property="og:image" content="https://example.com/image3.jpg">
```

--------------------------------

### Recommended Webmention Link

Source: https://github.com/joshbuchea/head/blob/master/_autodocs/deprecated-elements.md

This HTML link tag is the modern replacement for pingbacks, used for decentralized comments via the Webmention standard.

```html
<!-- Use Webmention for decentralized comments -->
<link rel="webmention" href="https://example.com/webmention">
```

--------------------------------

### Standard Website HTML Head

Source: https://github.com/joshbuchea/head/blob/master/_autodocs/recommended-patterns.md

A comprehensive head template for typical websites, optimized for SEO and social sharing. Includes metadata, theme colors, Open Graph tags, canonical URL, resource hints, stylesheets, fonts, icons, PWA manifest, and deferred scripts.

```html
<head>
  <!-- Character encoding (must be first) -->
  <meta charset="utf-8">
  
  <!-- Viewport for responsive design -->
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Basic metadata -->
  <title>Page Title | Site Name</title>
  <meta name="description" content="Brief description of page content (120-160 chars)">
  <meta name="robots" content="index,follow">
  
  <!-- Theme and colors -->
  <meta name="theme-color" content="#4285f4">
  <meta name="color-scheme" content="light dark">

  <!-- Open Graph for social sharing -->
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://example.com/page">
  <meta property="og:title" content="Page Title">
  <meta property="og:description" content="Page description">
  <meta property="og:image" content="https://example.com/image-1200x630.jpg">
  <meta property="og:image:alt" content="Image description">
  <meta property="og:site_name" content="Site Name">
  <meta property="og:locale" content="en_US">

  <!-- Canonical URL (prevent duplicate content issues) -->
  <link rel="canonical" href="https://example.com/page">

  <!-- Resource hints (early) -->
  <link rel="dns-prefetch" href="//cdn.example.com">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

  <!-- Stylesheets -->
  <link rel="stylesheet" href="/styles.css">

  <!-- Fonts (preload for performance) -->
  <link rel="preload" href="/fonts/system.woff2" as="font" type="font/woff2" crossorigin>

  <!-- Icons -->
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="icon" href="/favicon.ico" sizes="any">
  <link rel="apple-touch-icon" href="/apple-touch-icon-180.png">

  <!-- Progressive Web App Manifest -->
  <link rel="manifest" href="/manifest.json">

  <!-- Deferred scripts -->
  <script defer src="/main.js"></script>
</head>
```

--------------------------------

### Blog/Article HTML Head with Schema.org

Source: https://github.com/joshbuchea/head/blob/master/_autodocs/recommended-patterns.md

A head template for blog posts and articles, including rich metadata for SEO and social sharing. Features Open Graph tags, canonical URL, and structured data in JSON-LD format for search engines.

```html
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  <title>Article Title | Blog Name</title>
  <meta name="description" content="Article excerpt or summary (155 chars)">
  <meta name="author" content="Author Name">
  <meta name="published_date" content="2024-01-15">

  <!-- Open Graph for articles -->
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://example.com/articles/article-slug">
  <meta property="og:title" content="Article Title">
  <meta property="og:description" content="Article excerpt">
  <meta property="og:image" content="https://example.com/image-1200x630.jpg">
  <meta property="og:site_name" content="Blog Name">
  <meta property="article:published_time" content="2024-01-15T10:00:00Z">
  <meta property="article:modified_time" content="2024-01-20T15:30:00Z">
  <meta property="article:author" content="https://example.com/authors/john-doe">
  <meta property="article:section" content="Technology">
  <meta property="article:tag" content="web-development">
  <meta property="article:tag" content="html">

  <!-- Canonical URL -->
  <link rel="canonical" href="https://example.com/articles/article-slug">

  <!-- Structured data (Schema.org JSON-LD) -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "BlogPosting",
    "headline": "Article Title",
    "description": "Article excerpt",
    "image": "https://example.com/image.jpg",
    "datePublished": "2024-01-15T10:00:00Z",
    "dateModified": "2024-01-20T15:30:00Z",
    "author": {
      "@type": "Person",
      "name": "Author Name",
      "url": "https://example.com/authors/john-doe"
    }
  }
  </script>

  <link rel="stylesheet" href="/styles.css">
  <script defer src="/main.js"></script>
</head>
```

--------------------------------

### Open Graph Audio Properties

Source: https://github.com/joshbuchea/head/blob/master/_autodocs/social-tags.md

Specifies properties for embedded audio previews, including secure URL and MIME type.

```html
<meta property="og:audio" content="https://example.com/song.mp3">
<meta property="og:audio:secure_url" content="https://example.com/song.mp3">
<meta property="og:audio:type" content="audio/mpeg">
```

--------------------------------

### Common HTML Head Elements

Source: https://github.com/joshbuchea/head/blob/master/README.md

This snippet illustrates various standard HTML <head> elements including character encoding, title, base URL, external stylesheets, inline styles, and script tags.

```html
<!--
  Set the character encoding for this document, so that
  all characters within the UTF-8 space (such as emoji)
  are rendered correctly.
-->
<meta charset="utf-8">

<!-- Set the document's title -->
<title>Page Title</title>

<!-- Set the base URL for all relative URLs within the document -->
<base href="https://example.com/page.html">

<!-- Link to an external CSS file -->
<link rel="stylesheet" href="styles.css">

<!-- Used for adding in-document CSS -->
<style>
  /* ... */
</style>

<!-- JavaScript & No-JavaScript tags -->
<script src="script.js"></script>
<script>
  // function(s) go here
</script>
<noscript>
  <!-- No JS alternative -->
</noscript>
```

--------------------------------

### License Link Tag

Source: https://github.com/joshbuchea/head/blob/master/_autodocs/link-tags.md

Links to copyright or license information for the content. This helps users understand usage rights.

```html
<link rel="license" href="https://example.com/copyright.html">
```

--------------------------------

### Open Search Link

Source: https://github.com/joshbuchea/head/blob/master/README.md

Links to an Open Search description file, enabling site search functionality. Specify the href and type.

```html
<link rel="search" href="/open-search.xml" type="application/opensearchdescription+xml" title="Search Title">
```

--------------------------------

### Basic Open Graph Tags

Source: https://github.com/joshbuchea/head/blob/master/_autodocs/social-tags.md

Essential Open Graph tags for defining the core properties of a shared webpage, including URL, type, title, description, image, site name, and locale.

```html
<meta property="og:url" content="https://example.com/page.html">
<meta property="og:type" content="website">
<meta property="og:title" content="Content Title">
<meta property="og:description" content="Description of the content">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:site_name" content="Site Name">
<meta property="og:locale" content="en_US">
```

--------------------------------

### QQ / WeChat Share Preview Meta Tags

Source: https://github.com/joshbuchea/head/blob/master/_autodocs/social-tags.md

Meta tags for customizing the preview when sharing content on QQ and WeChat. Includes title, image, and description.

```html
<meta itemprop="name" content="Share Title">
<meta itemprop="image" content="https://example.com/image.jpg">
<meta name="description" itemprop="description" content="Share Description">
```

--------------------------------

### Fediverse Creator Handle

Source: https://github.com/joshbuchea/head/blob/master/README.md

Specify your Fediverse handle for use in embeds. This requires additional configuration in your Fediverse software's settings.

```html
<meta name="fediverse:creator" content="@handle@example.org">
```

--------------------------------

### Web App Manifest JSON Structure

Source: https://github.com/joshbuchea/head/blob/master/_autodocs/link-tags.md

Defines the structure of a web app manifest file, including application name, icons, and display settings.

```json
{
  "name": "My Web App",
  "short_name": "MyApp",
  "description": "Description",
  "start_url": "/",
  "display": "standalone",
  "scope": "/",
  "theme_color": "#4285F4",
  "background_color": "#FFFFFF",
  "icons": [
    {
      "src": "/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ]
}
```

--------------------------------

### Dublin Core Core Elements

Source: https://github.com/joshbuchea/head/blob/master/_autodocs/social-tags.md

HTML meta tags for core Dublin Core metadata elements. Used for describing resources.

```html
<meta name="DC.title" content="Document Title">
<meta name="DC.creator" content="Author Name">
<meta name="DC.date" content="2024-01-15">
<meta name="DC.subject" content="Keywords; Topics">
<meta name="DC.description" content="Document description">
<meta name="DC.publisher" content="Publisher Name">
<meta name="DC.contributor" content="Contributor Name">
<meta name="DC.type" content="Text">
<meta name="DC.format" content="text/html">
<meta name="DC.identifier" content="https://example.com/page">
<meta name="DC.source" content="https://example.com/original">
<meta name="DC.language" content="en">
<meta name="DC.relation" content="https://example.com/related">
<meta name="DC.coverage" content="Spatial or temporal scope">
<meta name="DC.rights" content="Copyright notice">
```