HTML tags | meta
Tags: html, tags
Published: 2021-10-21 06:19:50

It is used to **represent metadata (data that describes data) of the HTML document**. This data cannot be represented using other similar elements such as `<base>`, `<link>`, `<script>`, `<style>` or `<title>`, and therefore we will use `<meta>`.

It always goes inside `<head>` and is usually used to specify the encoding of the document, give a description to the page, indicate author and keywords, define the viewport, etc.

It can contain the following types of metadata:
* If the `name` attribute is specified, the `<meta>` element provides metadata for the entire document, applicable to the entire page.
* If the `http-equiv` attribute is specified, the `<meta>` element is a pragma directive, providing information equivalent to what a similarly named HTTP header can provide.
* If the `charset` attribute is specified, the `<meta>` element is a character set declaration, which provides the character encoding of the document.
* If the `itemprop` attribute is specified, the `<meta>` element provides user-defined metadata.

The `<meta>` elements are not displayed on the page but are machine-readable. They are used by browsers, search engines, and other web services.

It can have several attributes:
* `charset`: used to declare the character encoding of the document. If present, its value must be a case-insensitive ASCII match of the `utf-8` string, since UTF-8 is the only valid encoding for HTML5 documents. `<meta>` elements with this attribute must be completely within the first 1024 bytes of the document.
* `content`: contains the value for the `http-equiv` or `name` attribute, it depends on which one is declared in that `<meta>` element.
* http-equiv: defines a pragma directive. The attribute is called `http-equiv(alent)` because all the values ​​it can take are names of specific HTTP headers.
  * `content-security-policy`: allows you to define a content policy for the page. Content policies specify about all server sources and endpoints that help protect against scripted attacks.
  * `content-type`: declares the [MIME type](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types) and character encoding of the document. If specified, the content attribute must have the value `text/html; charset=utf-8`, which is the equivalent of a `<meta>` element with the specified charset attribute and carries the same location restriction within the document. It can only be used in documents served as `text/html`, not those served with a MIME type XML.
  * `default-style`: specifies the name of the default CSS.
  * `x-ua-compatible`: if specified, the content attribute must have the value `IE=edge`. User agents must ignore this directive.
  * `refresh`: this statement specifies the number of seconds until the page is reloaded (if the `content` attribute contains a positive integer) or the number of seconds until the page is redirected to another (if the `content` attribute contains a positive integer followed by `;url=` string and a valid URL). Users using assistive technologies such as a screen reader may be unable to read and understand the content of the page before being automatically redirected if the specified time is too short. The sudden and unannounced reload of the page can also disorient people with some form of visual impairment.
* `name`: the `name` and `content` attributes can be used together to provide metadata in the form of name-value pairs, with the `name` attribute specifying the name of the metadata and the `content` attribute doing the same for the value. There is a list of [standard metadata names](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name) defined in the HTML specification.

The `itemprop` attribute must not be specified on the same `<meta>` element that already has a `name`, `http-equiv` or `charset` attribute defined.

- Type: *-*
- Self-closing: *No*
- Semantic value: *No*

[Definition and example](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta) | [Support](https://caniuse.com/mdn-html_elements_meta)