The 33 Content Metas of HTML

A Content Meta specify data about the data in Content Windows

Each Content Meta must be declared within the Head Container

Charset Meta

The Charset Meta specifies the character encoding for a web document.

The syntax is one void meta element per document with either of the following attributes:

One charset attribute with the utf-8 value
Both of the following attributes:
- http-equiv attribute with the content-type value
- content attribute with the "text/html; charset=utf-8" value

<meta charset="utf-8">

<!-- or -->

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

Title Meta

The Title Meta specifies an elaboration of the document name.

A document must have a Title Meta, except for each of the following cases:

The document is an iframe element with a srcdoc attribute
The title information is available from a higher-level protocol

The syntax is one title element per document with the following attributes and content:

Zero or one count for each Global Attribute
A non-empty text content

<title> [non-empty text] </title>

URL Meta

The URL Meta specifies a prefix for all non-schemed URLs in a web document.

This meta must precede elements with attributes that accept URLs.

The syntax is one void base element per document with the following attributes:

Zero or one href attribute
Zero or one count for each Global Attribute

<base href="[URL]">

Target Meta

The Target Meta specifies the default opening context for all URLs in a web document.

This Meta must precede elements that represent hyperlinks

The syntax is one void base element per document with the following attributes:

Zero or one target attribute
Zero or one count for each Global Attribute

<base href="[navigable-name-or-keyword]">

Canonical Meta

A Canonical Meta specifies the document as a duplicate to an external resource.

The syntax is a one void link element per document with the following attributes:

One rel attribute with the canonical keyword.
One href attribute
Zero or one count for each of the following attributes:
Zero or one count for the title attribute and each other Global Attribute

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

Icon Meta

An Icon Meta specifies a graphic resource that identifies a web document in the browser chrome.

The syntax is a void link element with the following attributes:

One rel attribute with the icon keyword
One href attribute
Zero or one count for each of the following attributes:
Zero or one count for the title attribute and each other Global Attribute

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

Description Meta

The Description Meta summarizes the information in Content Windows.

The syntax is a one void meta element per document with the following attributes:

One name attribute with the description value
One content attribute
Zero or one count for each Global Attribute

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

Keywords Meta

A Keywords Meta specifies a set of words that represent information in Content Windows.

The syntax is a void meta element with the following attributes:

One name attribute with the keywords value
One content attribute
Zero or one count for each Global Attribute

<meta name="keywords" content="[value]">

Author Meta

An Author Meta specifies the name of the author of a web document.

The syntax is a void meta element with the following attributes:

One name attribute with the author value
One content attribute
Zero or one count for each Global Attribute

<meta name="author" content="[value]">

Generator Meta

A Generator Meta specifies the name of a software that generates a part or the whole of a web document.

The syntax is a void meta element with the following attributes:

One name attribute with the generator value
One content attribute
Zero or one count for each Global Attribute

<meta name="generator" content="[value]">

Translation Meta

A Translation Meta specifies a version of the current document in another language.

The syntax is a void link element with the following attributes:

One rel attribute with the alternate keyword
One href attribute
One hreflang attribute with a language different from that of the document
Zero or one count for each of the following attributes:
- media
- type
Zero or one count for the title attribute and each other Global Attribute

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

Repurposing Meta

A Repurposing Meta specifies a version of the current document in another format.

The syntax is a void link element with the following attributes:

One rel attribute with the alternate keyword
One href attribute
One type attribute without the application/rss+xml value or the application/atom+xml value.
Zero or one count for each of the following attributes:
- hreflang
- media
Zero or one count for the title attribute and each other Global Attribute

<link rel="alternate" href="[URL]" type="[valid-MIME-TYPE]">

Next Meta

A Next Meta specifies a resource that is next in sequence to the current document.

The syntax is a void link element with the following attributes:

One rel attribute with the next keyword
One href attribute
Zero or one count for each of the following attributes:
Zero or one count for the title attribute and each other Global Attribute

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

Search Meta

A Search Meta relates an external resource to discover the contents of the current document.

The syntax is a void link element with the following attributes:

One rel attribute with the search keyword
One href attribute
Zero or one count for each of the following attributes:
Zero or one count for the title attribute and each other Global Attribute

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

Referrer Meta

A Referrer Meta specifies the default referrer policy of a web document.

The syntax is a void meta element with the following attributes:

One name attribute with the referrer value
One content attribute
Zero or one count for each Global Attribute

<meta name="referrer" content="[value]">

Security Meta

The Security Meta specifies a policy to secure the content of a web document.

The syntax is one void meta element per document with the following attributes:

One http-equiv attribute with the content-security-policy value
One content attribute
Zero or one count for each Global Attribute

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

Timeout Meta

The Timeout Meta specifies the time to redirect a web document.

The syntax is one void meta element per document with the following attributes:

One http-equiv attribute with the refresh value
One content attribute
Zero or one count for each Global Attribute

<meta http-equiv="refresh" content="[value]">

Name Meta

The Name Meta specifies the name of the application in a web document.

The syntax is one void meta element per document with the following attributes:

One name attribute with the application-name value
One content attribute
Zero or one count for each Global Attribute

<meta name="application-name" content="[value]">

Manifest Meta

A Manifest Meta specifies a JSON resource that provides information about the web application in a web document.

The syntax is a void link element with the following attributes:

One rel attribute with a manifest keyword. And, an optional preload keyword
One href attribute
One as attribute with a manifest value if the preload keyword is in the rel attribute.
Zero or one count for each of the following attributes:
Zero or one integrity attribute if the preload keyword is in the rel attribute
Zero or one count for each Global Attribute

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

Pingback Meta

A Pingback Meta relates a server resource to handle pingbacks to a web document

The syntax is a void link element with the following attributes:

One rel attribute with the pingback keyword
One href attribute
Zero or one count for each of the following attributes:
Zero or one count for the title attribute and each other Global Attribute

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

Feed Meta

A Feed Meta relates an external resource to syndicate the contents of a web document to aggregators

The syntax is a void link element with the following attributes:

One rel attribute with the alternate keyword
One href attribute
One type attribute with a MIME Type value but not the following keywords: application/rss+xml and application/atom+xml.
Zero or one count for each of the following attributes:
- hreflang
- media
Zero or one count for the title attribute and each other Global Attribute

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

Theme Meta

A Theme Meta relates the color to customize the interface of the user agent.

The syntax is a void meta element with the following attributes:

One name attribute with the theme-color value
One content attribute
Zero or one count for each Global Attribute

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

Scheme Meta

The Scheme Meta relates the color scheme to use as default for a web document.

The syntax is one void meta element per document with the following attributes:

One name attribute with the color-scheme value
One content attribute
Zero or one count for each Global Attribute

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

Template Meta

A Template Meta specifies a fragment of an HTML document with optional placeholders

The syntax is a template element with the following attributes and contents:

Zero or one count for each of the following attributes:
- shadowrootmode
- shadowrootdelegatesfocus
Zero or one count for each Global Attribute
Zero or more counts for each Flow Content Element.

<template>

</template>

Font Meta

A Font Meta relates a font resource to be loaded in advance for use within a content window.

The syntax is a void link element with the following keywords:

One rel attribute with a preload keyword.
One as attribute with a font value
One count for each of the following attributes:
- href
- crossorigin
Zero or one count for each of the following attributes:
Zero or one count for each Global Attribute

<link rel="preload" as="font" href="[URL]" crosorigin>

Image Meta

An Image Meta relates an image resource to be loaded in advance for use within a content window

The syntax is a void link element with the following attributes:

One rel attribute with a preload keyword.
One as attribute with an image value
One or both of the following attributes:
- href
- imagesrcset
Zero or one imagesizes attribute if the imagesrscet attribute has a value that includes a width descriptor
Zero or one count for each of the following attributes:
Zero or one count for each Global Attribute

<link rel="preload" as="image" href="[URL]" imagesrcset="[IMS]">

Media Meta

A Media Meta relates an audio or a video resource to be loaded in advance for use within a content window

The syntax is a void link element with the following keywords:

One rel attribute with a preload keyword.
One as attribute with an audio value or video value
One href attribute
Zero or one count for each of the following attributes:
Zero or one count for each Global Attribute

<link rel="preload" as="[audio|video]" href="[URL]">

Track Meta

A Track Meta relates a text track resource to be loaded in advance for use within a content window.

The syntax is a void link element with the following keywords:

One rel attribute with a preload keyword.
One as attribute with track value.
One href attribute
Zero or one count for each of the following attributes:
Zero or one count for each Global Attribute

<link rel="preload" as="track" href="[URL]">

Document Meta

A Document Meta relates a document to be loaded in advance for an iframe, object, or embed element in a content window.

The syntax is a void link element with the following keywords:

One rel attribute with a preload keyword.
One as attribute with one of the following values:
- document
- object
- embed
One href attribute
Zero or one count for each of the following attributes:
Zero or one count for each Global Attribute

<link rel="preload" as="[document|object|embed]" href="[URL]">

Stylesheet Meta

A Stylesheet Meta specifies a set of CSS Rules on a web document for presentational purposes.

Usage Scenario

There are the following 3 ways to which CSS Rules apply to a web document

External Stylesheet
Embedded Stylesheet
Inline Stylesheet

All 3 create a Persistent Stylesheet on Content Windows.

Meanwhile, setting a title attribute on an external or embedded stylesheet creates a design variation for user's choice. Each variation becomes a set of Alternate Stylesheets

The initial variation to style the Content Windows is provided by a Default Stylesheet

External Stylesheet

An External Stylesheet relate CSS Rules applicable to one or more web pages.

The syntax is a void link element with the following attributes:

One rel attribute with the stylesheet keyword.

It may include a preload keyword to load the stylesheet in advance.
One href attribute
One as attribute with a style value if there's a preload keyword in the rel attribute
Zero or one count for each of the following attributes:
Zero or one count for the title attribute and each other Global Attribute

Embedded Stylesheet

An Embedded Stylesheet relate CSS Rules applicable to only one web page

The syntax is a style element with the following attributes and content:

Zero or one count for each of the following attributes:
- blocking
- media
Zero or one count for the title attribute and each other Global Attribute
A text content that gives a conformant style sheet

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

Inline Stylesheet

An Inline Stylesheet relate CSS declarations applicable to only one HTML element.

The syntax is a style attribute with a value conforming to a conformant style sheet

Appendix

Default Stylesheet

The default stylesheet identifies a design variation to use pending a user's preference.

This declaration must precede all stylesheet declarations

A design variation is a set of external and embedded stylesheets with the same title attribute value

The syntax is one void meta element per document with the following attributes:

- One http-equiv attribute with the default-style value

- One content attribute with the value of the title attribute for the chosen design variation

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

Script Meta

A Script Meta specifies javascript instructions on a web document for dynamic contents.

External Javascript

An External Javascript relate instructions applicable to one or more web web pages

It can be a Classic Script or a Preloaded Script. An External Classic Script loads and runs a javascript resource. A Preloaded External Script loads but not run the javascript resource. The latter helps with performance optimizations

The syntax for an External Classic Script is a script element with the following attributes and content:

One src attribute
Zero or one count for each of the following attributes:
Zero or one count for each Global Attribute
An optional text content matching script content restrictions and conforming to a script documentation

<script src="[valid-URL]"></script>

The syntax for an External Preloaded Script is a void link element with the following attributes:

One rel attribute with a preload keyword.
One as attribute with one of the following values:
- audioworklet
- paintworklet
- serviceworker
- sharedworker
- worker
- script
- json
One href attribute
Zero or one count for each of the following attributes:

<link rel="preload" as="[audioworklet|paintworklet|serviceworker|sharedworker|worker|script|json]" href="[URL]">

Embedded Javascript

An Embedded Javascript relate instructions applicable to only one web page

The syntax is a script element with the following attributes and content:

Zero or one count for each of the following attributes:
Zero or one count for each Global Attribute
A text content matching script content restrictions and conforming to the value of the type attribute

<script>

</script>

Inline Javascript

An Inline Javascript relate instructions to only one HTML element

The syntax is an event handler content attribute with applicable values.

Script Meta Utilities

An External, Embedded, or Inline Javascript may further be managed with Modules, Module Maps, and Data Blocks

Javascript Module

A Javascript Module enables reuse of an external or embedded javascript

The syntax on an External Classic Script or on an Embedded Javascript expects the script element with the following conditions:

One type attribute with a module value
Zero count for each of the following attributes:
- defer
- nomodule

<script type="module">

</script>

Meanwhile, the syntax on an External Preloaded Script expects the link element with a rel attribute having the modulepreload value

<link rel="modulepreload">

Import Maps

An Import Map specifies a JSON resource to resolve Javascript Modules

The syntax is one script element per document with the following attributes and content:

One type attribute with an importmap value
A text content that conforms to the import map authoring requirements

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

Data Block

A Data Block specifies data for use in Javascript Instructions. A Data Block can be preloaded or, straight up, executed.

The syntax to preload a Data Block is a void link element with the following attributes:

One rel attribute with a preload keyword.
One as attribute with json value.
One href attribute
Zero or one count for each of the following attributes: crossorigin, fetchpriority, hreflang, integrity, media, referrerpolicy, and type

<link rel="preload" as="json" href="[URL]">

The syntax to execute a Data Block is a script element with the following attributes and content:

One type attribute with a MIME Type value other than the text/javascript value
A text content that satisfy the following 2 conditions:
- matches script content restrictions
- conforms to the value of the type attribute

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

Custom Link Meta

A Custom Link Meta specifies a non-standard metadata keyword whose value must be a URL to a resource

The syntax is a void link element with the following attributes:

One rel attribute but it must have an extension link type keyword
One href attribute
Zero or one for the following attributes if the extension link type is an external resource link: crossorigin fetchpriority, and referrerpolicy
Zero or one count for each of the following attributes:
hreflang, media, and type
Zero or one color attribute if rel attribute has a mask-icon
Zero or one count for each Global Attribute

<link rel="[extension-link-type-keyword]" href="[URL]">

Custom Text Meta

A Custom Text Meta specifies a non-standard metadata keyword whose value must not be a URL to a resource

The syntax is a void meta element with the following attributes:

One name attribute whose value must be a Meta Name Extension
One content attribute
Zero or one count for each Global Attribute

<meta name="[meta-name-extension]" value="[value]">

Appendix

The following utilities applies to Content Metas

Head Container

The Head Container specifies a collection of Content Metas to User Agents for processing

The syntax is an head element with the following attributes and contents:

Zero or one count for each Global Attribute
Zero or more counts for most Content Metas

<head>
  <!-- Content Metas -->
</head>

Noscript Container

A Noscript Container in a Meta Container relates Content Metas to User Agents that doesn't support scripting functionality on a web document.

The syntax is a noscript element with the following attributes and child elements:

Zero or one count for each Global Attribute
Zero or more counts for each Content Metas except the following: Title Meta, Url Meta, Target Meta, Template Meta, and loaded (not preloaded) Script Meta

<noscript>

</noscript>

Slot Wrapper

A Template Placeholder specifies a replaceable part within a reusable markup

The syntax is a slot element with the following attributes and contents:

Zero or one slot attribute
Zero or one count for each Global Attribute
Zero or one count for each element allowed in the parent element

<slot></slot>