HEAD Documentation

A simple guide to HTML elements

30,267 stars Unknown 1 file Β· ~5,267 tokens #favicon#frontend-development#head#html#html5#list#meta-tags#reference
RAW Doc

Technical Documentation: joshbuchea/HEAD

ℹ️ Provenance: Multi-Tier Ingestion Β· CodeWiki Reference

Overview (`README.md`)

A simple guide to HTML <head> elements



Table of Contents

Below are the essential elements for any web document (websites/apps):

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

<title>Page Title</title>

meta charset - defines the encoding of the website, utf-8 is the standard

meta name="viewport" - viewport settings related to mobile responsiveness

width=device-width - use the physical width of the device (great for mobile!)

initial-scale=1 - the initial zoom, 1 means no zoom

Elements

Valid <head> elements include meta, link, title, style, script, noscript, and base.

These elements provide information for how a document should be perceived, and rendered, by web technologies. e.g. browsers, search engines, bots, etc.

html
<meta charset="utf-8">


<title>Page Title</title>


<base href="https://example.com/page.html">


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


<style>
  /* ... */
</style>


<script src="script.js"></script>
<script>
  // function(s) go here
</script>
<noscript>
  
</noscript>

The following is the recommended order of elements in the <head> for best performance and correct document rendering:

  1. <meta charset> β€” Character encoding declaration; must appear within the first 1024 bytes of the document
  2. <meta name="viewport"> β€” Viewport settings; declare early to ensure correct responsive rendering
  3. <title> β€” Document title; placed after encoding/viewport to prevent potential re-rendering
  4. Other <meta> tags (description, robots, etc.)
  5. Open Graph / Social meta tags
  6. <link rel="canonical"> and other <link> tags (excluding stylesheets and resource hints)
  7. <link rel="preconnect"> / <link rel="dns-prefetch"> β€” Resource hints; early to maximize their value
  8. <link rel="stylesheet"> β€” External CSS; stylesheets should come before scripts
  9. <link rel="icon"> β€” Favicons
  10. <script> β€” Scripts; use defer or async where possible to avoid blocking rendering
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">
  

  
  <meta property="og:title" content="Page Title">
  

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

  <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>

Meta

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


<meta http-equiv="Content-Security-Policy" content="default-src 'self'">


<meta name="application-name" content="Application Name">


<meta name="theme-color" content="#4285f4">


<meta name="color-scheme" content="light dark">



<meta name="description" content="A description of the page">


<meta name="robots" content="index,follow">
<meta name="googlebot" content="index,follow">


<meta name="google" content="nositelinkssearchbox">


<meta name="google" content="notranslate">


<meta name="google-site-verification" content="verification_token">
<meta name="yandex-verification" content="verification_token">
<meta name="msvalidate.01" content="verification_token">
<meta name="p:domain_verify" content="code_from_pinterest">
<meta name="norton-safeweb-site-verification" content="norton_code">


<meta name="generator" content="program">


<meta name="subject" content="your document's subject">


<meta name="rating" content="General">


<meta name="referrer" content="no-referrer">


<meta name="format-detection" content="telephone=no">


<meta name="ICBM" content="latitude, longitude">
<meta name="geo.position" content="latitude;longitude">
<meta name="geo.region" content="country[-state]">
<meta name="geo.placename" content="city/town">


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

Note: Geo tags are not used by browsers directly β€” they are intended for search engines, web crawlers, and location-based services to understand the geographic relevance of a page's content. ICBM (named after the military ICBM address convention) and geo.position both express coordinates in decimal degrees; ICBM uses a comma separator while geo.position uses a semicolon. geo.region identifies the country (and optionally the state/region) using ISO codes, and geo.placename provides a human-readable place name.

text
/* Detailed source-code truncated for AI context efficiency. */

Note: The Web App Manifest (manifest.json) is the recommended, cross-platform way to declare installable web app properties β€” including name, icons, theme_color, and display mode β€” in a single file, instead of relying on multiple platform-specific <meta> tags.

Scripts

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


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


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


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


<script>
  // function(s) go here
</script>


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

Icons

html
<link rel="icon" sizes="192x192" href="/path/to/icon.png">


<link rel="apple-touch-icon" href="/path/to/apple-touch-icon.png">

Social

Open Graph

The Open Graph protocol is the de facto standard for controlling how your content appears when shared on social platforms. Originally created by Facebook, it's now consumed by most major platforms β€” including LinkedIn, X (as a fallback when Twitter Card tags are absent), Discord, Slack, iMessage, Mastodon, Bluesky, and WhatsApp.

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:image" content="https://example.com/image.jpg">
<meta property="og:image:alt" content="A description of what is in the image (not a caption)">
<meta property="og:description" content="Description Here">
<meta property="og:site_name" content="Site Name">
<meta property="og:locale" content="en_US">
<meta property="article:author" content="">

Schema.org

html
<html lang="" itemscope itemtype="https://schema.org/Article">
    <head>
      <link rel="author" href="">
      <link rel="publisher" href="">
      <meta itemprop="name" content="Content Title">
      <meta itemprop="description" content="Content description less than 200 characters">
      <meta itemprop="image" content="https://example.com/image.jpg">

Note: These meta tags require the itemscope and itemtype attributes to be added to the <html> tag.

Google JSON-LD Schema

The following is used by Google to help provide your site with a knowledge graph result when someone Googles you (this is the pane to the right of the search results that typically appears for larger brands):

html
<script type="application/ld+json">
  {
    "@context": "http://schema.org",
    "@type": "Organization",
    "name": "yourbrand.com",
    "url": "https://www.yourbrand.com/",
    "logo": "https://www.yourbrand.com/logo.png",
    "sameAs": [
      "https://www.facebook.com/yourbrand",
      "https://twitter.com/yourbrand",
      "https://uk.pinterest.com/yourbrand/",
      "https://www.instagram.com/yourbrand/",
      "https://www.linkedin.com/company/yourbrand-com"
    ]
  }
</script>

Pinterest

Pinterest lets you prevent people from saving things from your website, according to their help center. The description is optional.

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

OEmbed

html
<link rel="alternate" type="application/json+oembed"
  href="https://example.com/services/oembed?url=http%3A%2F%2Fexample.com%2Ffoo%2F&amp;format=json"
  title="oEmbed Profile: JSON">
<link rel="alternate" type="text/xml+oembed"
  href="https://example.com/services/oembed?url=http%3A%2F%2Fexample.com%2Ffoo%2F&amp;format=xml"
  title="oEmbed Profile: XML">

QQ/Wechat

Users share web pages to qq wechat will have a formatted message

html
<meta itemprop="name" content="share title">
<meta itemprop="image" content="http://imgcache.qq.com/qqshow/ac/v4/global/logo.png">
<meta name="description" itemprop="description" content="share content">

Dublin Core

Dublin Core is a metadata vocabulary standardized as ISO 15836 and maintained by the Dublin Core Metadata Initiative (DCMI). It defines fifteen core elements for describing resources and is widely used in digital libraries, institutional repositories, academic publishing, and government portals. To use Dublin Core in HTML, declare the DC namespace and then add the desired elements as <meta> tags with a DC. prefix.

html
<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">

Fediverse

Some Fediverse software such as Mastodon allow you to put your Fediverse handle in a meta tag which will show up in embeds to your website. In addition to the tag you will also need to add your domain to the list of allowed websites in "Settings -> Public profile -> Verification -> Author attribution" (for Mastodon).

html
<meta name="fediverse:creator" content="@[email protected]">

Browsers / Platforms

Apple iOS

html
<meta name="apple-itunes-app" content="app-id=APP_ID,affiliate-data=AFFILIATE_ID,app-argument=SOME_TEXT">


<meta name="format-detection" content="telephone=no">


<link rel="apple-touch-icon" href="/path/to/apple-touch-icon.png">


<link rel="apple-touch-startup-image" href="/path/to/launch.png">


<meta name="apple-mobile-web-app-title" content="App Title">


<meta name="mobile-web-app-capable" content="yes">


<meta name="apple-mobile-web-app-status-bar-style" content="black">


<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">


<meta name="apple-itunes-app" content="app-id=APP-ID, app-argument=http/url-sample.com">
<link rel="alternate" href="ios-app://APP-ID/http/url-sample.com">

Note: Properties such as app title (apple-mobile-web-app-title), standalone/display mode, and app icons (apple-touch-icon) are more reliably and portably configured using the Web App Manifest (<link rel="manifest">), which is the recommended approach for Progressive Web Apps (PWAs). The Apple-specific meta tags remain useful as a fallback for older iOS versions.

Google Android

html
<meta name="theme-color" content="#E64545">


<meta name="mobile-web-app-capable" content="yes">



<meta name="google-play-app" content="app-id=package-name">
<link rel="alternate" href="android-app://package-name/http/url-sample.com">

Note: theme-color and the "add to home screen" / standalone behavior are better defined using the Web App Manifest (<link rel="manifest">). The theme-color meta tag can still serve as a fallback for browsers that do not yet support the manifest theme_color property.

Google Chrome

html
<link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/APP_ID">


<meta name="google" content="notranslate">

Browsers (Chinese)

360 Browser

html
<meta name="renderer" content="webkit|ie-comp|ie-stand">

QQ Mobile Browser

html
<meta name="x5-orientation" content="landscape/portrait">


<meta name="x5-fullscreen" content="true">


<meta name="x5-page-mode" content="app">

UC Mobile Browser

html
<meta name="screen-orientation" content="landscape/portrait">


<meta name="full-screen" content="yes">


<meta name="imagemode" content="force">


<meta name="browsermode" content="application">


<meta name="nightmode" content="disable">


<meta name="layoutmode" content="fitscreen">


<meta name="wap-font-scale" content="no">
html
<meta property="al:ios:url" content="applinks://docs">
<meta property="al:ios:app_store_id" content="12345">
<meta property="al:ios:app_name" content="App Links">


<meta property="al:android:url" content="applinks://docs">
<meta property="al:android:app_name" content="App Links">
<meta property="al:android:package" content="org.applinks">


<meta property="al:web:url" content="https://applinks.org/documentation">

Deprecated

For tags and elements that were once part of this guide but are no longer supported (Internet Explorer compatibility, Safari Pinned Tabs, Alexa verification, etc.), see DEPRECATED.md.

Other Resources

🌐 Translations

🀝 Contributing

Open an issue or a pull request to suggest changes or additions.

Guide

The HEAD repository consists of two branches:

1. `master`

This branch consists of the README.md file that is reflected on the htmlhead.dev website. All changes to the content of the guide should be made in this file.

Please follow these steps for pull requests:

{:.list-style-default}

  • Modify only one tag, or one related set of tags at a time
  • Use double quotes on attributes
  • Don't include a trailing slash in self-closing elements β€” the HTML5 spec says they're optional
  • Consider including a link to documentation that supports your change

2. `gh-pages`

This branch is responsible for the htmlhead.dev website. We use Jekyll to deploy the README.md markdown file to GitHub Pages. All website related modifications should be made in this branch.

You may find it helpful to review the Jekyll Docs and understand how Jekyll works before working in this branch.

🌟 Contributors

Check out all the super awesome contributors 🀩

πŸ‘€ Author

Josh Buchea

πŸ’› Support

If this project was helpful for you or your organization, please considering supporting my work directly:

Everything helps, thanks! πŸ™

β€” Josh

πŸ“ License

--- METRICS ---

Explore Related Technologies & Topics

View All 9,111+ Repositories β†’

Discover similar high-velocity repositories, agent skills, and OpenAPI specifications across the ecosystem.

#favicon Browse favicon catalog β†’ #frontend-development Browse frontend-development catalog β†’ #head Browse head catalog β†’ #html Browse html catalog β†’ #html5 Browse html5 catalog β†’ #list Browse list catalog β†’ ⚑ MCP Servers Model Context Protocol β†’ 🧠 Agent Skills Prompt & rule files β†’ πŸ”Œ OpenAPI Specs REST & Swagger schemas β†’