The 37 content metas of HTML

37 kinds of metadata describe a web document to user agents. To create them, you need 9 HTML elements and some local attributes.

The 37 kinds of document metadata, as provided by the HTML standard, are as follows:

The 9 HTML elements along with the local attributes that create those kinds of document metadata are as follows:

The rest of this article describes each of the above entities.

head element

The head element is a container for other document metadata elements.

The syntax for the HTML head element expects the following:

<head>
  <title>[...]</title>

  <!-- Other elements -->
</head>

title element

The title element specifies the title of the document.

The syntax expects the following:

<title>Some non-empty text</title>

base element

The base element specifies a prefix to all non-schemed URLs in the document.

The syntax expects the following:

<base href="[...]" target="[...]">

href attribute

The href attribute of a base element specifies a URL prefix.

The value must be a schemed URL.

The syntax takes the form below:

<base href="[scheme://other.valid.url/parts/]">

target attribute

The target attribute of a base element specifies where a hyperlink will open.

The value must be a valid navigable target name or keyword.

The syntax takes the form below:

<base target="[navigable-target]">

A link element relates or augments an external resource to the current document.

The syntax for a link element in the document metadata expects the following:

<link rel="[link-type]" [href|imagesrcset]="address">

The rel attribute of the link element specifies a type of the link element.

The value is an unordered set of space-separated tokens grouped into 2 based on the link's action.

Besides these 17 standard tokens are extension tokens such as mask-icon, and apple-touch-icons.

The alternate value in the rel attribute of a link element relates a resource as an alternative stylesheet, a web feed, or an alternative document.

An alternative stylesheet provides a different design version for a web document.

The syntax to augment a document's "alternative stylesheet" expects the following for the link element:

<link rel="alternate stylesheet" href=[resource-url]>

A web feed syndicates document data to aggregators.

The syntax to relate a document's "feed" expects the following for a link element:

<link rel="alternate" type="application/rss+xml" href="[resource-url]">

<!-- or -->

<link rel="alternate" type="application/atom+xml" href="[resource-url]">

An alternative document provides a different document data in forms such as content translation and content repurposing.

The syntax to relate a document's translation expects the following for a link element:

<link rel="alternate" hreflang="[not-document-language]" href="[resource-url]">

The syntax to relate a document's repurpose expects the following for a link element:

<!-- The external resource at [url] is a PDF-repurposed version of the current document -->
<link rel="alternate" href="[resource-url]" type="application/pdf">

The 2 syntaxes above can be combined to create a translated repurposed document.

The syntax to relate a document's translation and repurpose expects the following for a link element:

<link rel="stylesheet" href="[resource-url]" hreflang="[not-document-language]" type="[e.g. application/pdf]">

The search value in the rel attribute of a link element relates the resource as a search system for the document.

The syntax to relate a document's "search system" expects the following for a link element:

<link rel="search" href="[resource-url]">

The next value in the rel attribute of a link element relates the resource as next in sequence to the document.

The syntax to relate a document's "next" expects the following for a link element:

<link rel="next" href="[resource-url]">

The prev value in the rel attribute of a link element relates the resource as a previous to the document.

The syntax to relate a document's "previous" expects the following for a link element:

<link rel="prev" href="[resource-url]">

The canonical value in the rel attribute of a link element relates the document as a duplicate to the resource.

The syntax to relate a document's "canonical" expects the following for a link element:

<link rel="canonical" href="[resource-url]">

An author value in the rel attribute of a link element relates the resource that describes an author of a document.

The syntax to relate a document's "author" expects the following for a link element:

<link rel="author" href=[resource-url]>

The help value in the rel attribute of a link element relates the resource as a support to the document.

The syntax to relate a document's "help" expects the following for a link element:

<link rel="help" href="[resource-url]">

The license value in the rel attribute of a link element relates the resource as a license for the document.

The syntax to relate a document's "license" expects the following for a link element:

<link rel="license" href="[resource-url]">

The stylesheet value in the rel attribute of a link element augments the resource as an external stylesheet for the document.

The syntax to augment a document's "external stylesheet" expects the following for a link element:

<link rel="stylesheet" href="[resource-url]">

The icon value in the rel attribute of a link element augments the resource as a document icon.

The syntax to augment a document's "icon" expects the following for a link element:

<link rel="icon" href="[resource-url]">

The manifest value in a rel attribute of a link element augments the resource as an app manifest.

The syntax to augment an app's "manifest" expects the following for a link element:

<link rel="manifest" href="[url]">

The pingback value in a rel attribute of a link element augments the resource as the document pingback handler.

The syntax to augment a document's "pingback handler" requires the following for a link element:

<link rel="pingback" href="[url]">

The dns-prefetch value in the rel attribute of a link element hints at an early DNS lookup on the resource.

The syntax to hint for a "dns-prefetch" expects the following for a link element:

<link rel="dns-prefetch" href="[resource-url]">

The preconnect value in the rel attribute of a link element hints for an early connection to the resource.

The syntax to hint for a "preconnect" expects the following for a link element:

<link rel="preconnect" href="[resource-url]">

The preload value in the rel attribute of a link element hints at an early fetch of the resource for the document.

The syntax to hint for a "preload" expects the following for a link element:

<link rel="preload" as="[resource-type]" href="resource-url">

The modulepreload value in the rel attribute of a link element preloads a module script.

The syntax to hint for a "modulepreload hint" requires the following for a link element:

<link rel="modulepreload" href="[resource-url]">

The prefetch value in the rel attribute of a link element fetches the resource for future navigations.

The syntax to hint for a "prefetch" expects the following for a link element:

<link rel="prefetch" href="[resource-url]">

The href attribute of a link element specifies the address of the resource.

The value must be a valid URL.

The syntax takes the form below:

<link href="[resource-url]">

The imagesrcset attribute of a link element specifies the address of each contextual image resource to preload.

The value expects 1 or more image candidate strings. Each separated by a comma character (,).

The syntax expects the following:

<link imagesrcset="[image-candidate-with-width-descriptor]" imagesizes="[source-size]">

The imagesizes attribute of a link element specifies a layout size for a preloaded image resource.

The value is a source size.

The syntax takes the form below:

<link imagesizes="[source-size-value]">

The as attribute of a link element specifies the model of an external resource to preload.

The value is one of the following tokens. fetch, audio, audioworklet, document, embed, font, frame, iframe, image, json, manifest, object, paintworklet, report, script, serviceworker, sharedworker, style, track, video, webidentity, worker, xslt

The syntax takes the form below:

<link as="[resource-model]">

The hreflang attribute key of a link element specifies the language of the resource.

The value is a valid BCP 47 language tag.

The syntax takes the form below:

<link hreflang="[bcp-47-language-tag-value]">

The type attribute of a link element hints to avoid fetching an unsupported resource. It's purely advisory when relating an external resource to the current document.

The value is a MIME type.

The syntax takes the form below:

<link type="[mime-type-value]">

The referrerpolicy attribute of a link element sets the referrer policy to fetch a resource.

The value is a referral policy.

The syntax takes the form below:

<link referrerpolicy="[referrer-policy-value]">

The fetchpriority attribute of a link element prioritizes the fetching of a resource.

The value is a fetch priority state.

The syntax takes the form below:

<link fetchpriority="priority-state-value">

The crossorigin attribute of a link element manages the fetching of a resource from another origin.

The value is a CORS keyword.

The syntax takes the form below:

<link crossorigin="[cors-keyword]">

The media attribute of a link element restrains the resource to a particular media device.

The value is a media query list.

The syntax takes the form below:

<link media="[query-list-value]">

The integrity attribute of a link element helps to verify an unmanipulated fetched resource.

The value is a file hash.

The syntax takes the form below:

<link integrity="[file-hash]">

The blocking attribute of a link element blocks an operation while fetching a resource.

The value is a fetch operation that currently has only one value, render.

The syntax takes the form below:

<link blocking="render">

The disabled boolean attribute of a link element puts on hold the fetching of a stylesheet resource.

The syntax takes the form below:

<link disabled>

The sizes attribute of a link element specifies various applicable sizes of the icon resource.

The value is either of two categories.

The syntax takes the form below:

<link sizes="[valid-sizes]">

The color attribute of a link element customizes an icon color on launchers.

The value is a CSS color production.

The syntax takes the form below:

<link color=[css-color-value]>

style element

A style element embeds a CSS resource on the document.

The syntax expects the following:

<style>
  /* text that is style conformant */
</style>

media attribute

The media attribute of a style element restricts the stylesheet to a particular media.

The value is a valid media query list.

The syntax takes the form below:

<style media="[media-query-list]"></style>

blocking attribute

The blocking attribute of a style element specifies what operations should be blocked while fetching the stylesheet.

The value is a blocking token which happens to be only one at the moment, render.

The syntax takes the form below:

<style blocking="render"></style>

script element

A script element embeds or augments a script resource on the document.

The syntax expects the following:

type attribute

The type attribute of a script element specifies the type of the script element. The value is of 4 forms as follows.

javascript

A Javascript content enables a dynamic web document.

The syntax of the javascript form of a script element expects the following:

<script></script>

javascript module

A javascript module is a reusable unit of javascript content.

The syntax of the javascript module form of a script element expects the following:

<script type="module" crossorigin=[cors-value]></script>

javascript module map

A javascript module map signifies how javascript modules are resolved.

The syntax of the javascript module map form of a script element expects the following:

<script type="importmap"></script>

data block

A data block embeds script data in the document.

The syntax of the data block of a script element expects the following:

<script type="[mime-type-but-not-text/javascript]"></script>

src attribute

The src attribute of a script element specifies an address for an external script resource.

The value is a valid non-empty URL.

The syntax takes the form below:

<script src="[resource-url]"></script>

crossorigin attribute

The crossorigin attribute of a script element manages the fetching of the external script resource from another origin.

The value is a CORS keyword.

The syntax takes the form below:

<script crossorigin="[cors-value]"></script>

fetchpriority attribute

The fetchpriority of a script element sets the priority when fetching the external script resource.

The value is a fetch priority state.

The syntax takes the form below:

<script fetchpriority="[priority-value]"></script>

integrity attribute

The integrity attribute of a script element helps to verify an unmanipulated fetched resource.

The value is a file hash text.

The syntax takes the form below:

<script integrity="[file-hash-text]"></script>

referrerpolicy attribute

The referrerpolicy attribute of a script element specifies the referrer policy in fetching the script resource.

The value is a referral policy keyword.

The syntax takes the form below:

<script referralpolicy=[policy-value]></script>

async attribute

The async boolean attribute of a script element fetches a resource in the background and processes it when ready.

The syntax takes the form below:

<script async></script>

defer attribute

The defer boolean attribute of a script element fetches a script in the background and processes it when the DOM is ready.

The syntax takes the form below:

<script defer></script>

blocking attribute

The blocking attribute of a script element blocks an operation while fetching the external script resource.

The value is a fetch operation that currently has one value, render.

The syntax takes the form below:

<script blocking="render"></script>

nomodule attribute

The nomodule boolean attribute of a script element specifies a fallback for a module script.

The syntax takes the form below:

<script nomodule></script>

meta element

A meta element specifies a kind of document metadata that cannot be expressed using title, base, link, style, and script elements.

The syntax expects the following:

<meta [name|http-equiv|charset]="[term-value]" content=[description-value]>

name attribute

The name attribute of a meta element specifies an add-on metadata to the document.

The value is either application-name, author, description, generator, keywords, referrer, theme-color, or color-scheme.

The syntax expects the following:

<meta name="[term-value]" content="[description-value]">

application-name value

The application-name value of a name attribute in a meta element specifies the title of the application on the page.

The value is a short free-form string.

The syntax expects the following:

<meta name="application-name" content=[short-free-form-string]>

author value

An author value for a name attribute in a meta element specifies the name of one of the page's authors.

The value is a free-form string.

The syntax expects the following:

<meta name="author" content="[free-form-string]">

description value

The description value for the name attribute in a meta element specifies the document description.

The value is a free-form string.

The syntax expects the following:

<meta name="description" content="[free-form-string]">

generator value

The generator value of the name attribute in a meta element specifies the software that generates the document markup.

The value is a free-form string.

The syntax expects the following:

<meta name="generator" content="[free-form-string]">

keywords value

The keywords value of the name attribute in a meta element specifies a list of keywords associated to the document.

The value is a set of comma-separated tokens.

The syntax expects the following:

<meta name="keywords" content="[token, token, ...]">

theme-color value

The theme-color value of the name attribute of a meta element suggests a color to customize the document chrome.

The value is a CSS color production.

The syntax expects the following:

<meta name="theme-color" content="[css-color-production]">

color-scheme value

The color-scheme value of the name attribute of a meta element specifies a color scheme for the document.

The value is a color-scheme.

The syntax expects the following:

<meta name="color-scheme" content="[color-scheme]">

referrer value

The referrer value of the name attribute in a meta element specifies the referrer policy for the document.

The value is one of 7 referrer policies.

The syntax expects the following:

<meta name="referrer" content="[referrer-policy]">

http-equiv attribute

The http-equiv attribute of a meta element specifies an equivalent way to set some HTTP headers.

The value is one of 5 HTTP headers: content-type, content-security-policy, default-style, refresh, and x-ua-compatible.

The syntax expects the following:

<meta http-equiv="[content-type|content-security-policy|default-style|refresh|x-ua-compatible]" content="[http-header-value]">

content-type value

The content-type value of the http-equiv attribute of a meta element specifies a character encoding for the document.

The value is text/html; charset=utf-8.

The syntax expects the following:

<meta http-equiv="content-type" content="text/html; charset=utf-8">

content-security-policy value

The content-security-policy value of the http-equiv attribute of a meta element specifies the content policy of a document.

The value is a valid content security policy but must not contain any report-uri, frame-ancestors, or sandbox directives.

The syntax expects the following:

<meta http-equiv="content-security-policy" content="[policy-directives]">

default-style value

The default-style value of the http-equiv attribute of a meta element specifies the default stylesheet.

The value is the title attribute value of a stylesheet element.

The syntax expects the following:

<meta http-equiv="default-style" content="[title-string]">

refresh value

The refresh value of the http-equiv attribute of a meta element specifies a timed redirect.

The value consists of the following 2 parts separated by "; URL=".

The syntax expects the following:

<!-- http-equiv's refresh with only timeout -->
<meta http-equiv="refresh" content="100">

<!-- http-equiv's refresh with both timeout and redirect url -->
<meta http-equiv="refresh" content="100; URL=newpage.html">

x-ua-compatible value

The x-ua-compatible value of the http-equiv attribute of a meta element encourages Internet Explorer to closely follow the specifications.

The value is "IE=edge".

The syntax expects the following:

<meta http-equiv="x-ua-compatible" value="IE-edge">

charset attribute

The charset attribute of a meta element specifies the character encoding for the document.

The value must be "utf-8".

The syntax takes the form below:

<meta charset="utf-8">

content attribute

The content attribute of a meta element specifies the value of a name or an http-equiv attribute.

The value depends on the context.

The syntax takes the form below:

<meta content="[value-depends-on-context]">

media attribute

The media attribute of a meta element restricts the resource to a particular media device. The value is a media query list.

The syntax takes the form below:

<meta media="[query-list]">

noscript element

The noscript element in the document metadata specifies some metadata for a state in which javascript is disabled.

The syntax expects the following:

<noscript>
  <!-- 
    0+ link elements
    0+ style elements
    0+ meta elements
   -->
</noscript>

template element

The template element specifies a clonable markup for the document.

The syntax expects the following:

<template>
  <!-- 
    0+ elements
    -->
</template>