The HTML <meta>
tag is used to represent metadata about the HTML document.
Metadata refers to the information about data (data about the HTML document). The metadata consists of information like charset
attribute, name
attribute, http-equiv
attribute, etc.
The <meta>
tag should always go inside the <head>
element. For example,
<head>
<meta charset="utf-8" />
</head>
Here, <meta charset = "utf-8">
tells the browser to use the UTF-8 character encoding to convert machine code into human-readable code.
The Meta tag can have the following attributes:
charset
attributename
attributehttp-equiv
attributeWe will learn about each attribute in detail.
The charset
attribute defines the character encoding for the HTML document. For example,
<meta charset="UTF-8">
It helps to display an HTML page correctly in the browser. UTF-8 is the only valid encoding for HTML5 documents.
The name
attribute together with the content
attribute provides information in terms of name-value pairs. Where:
name
- name of the metadatacontent
- value of the metadataLet's see an example:
<meta name="description" content=" In this article you will learn about meta tags.">
Here, we have used the name
attribute to provide the information about the description of the HTML document. The text inside the content
attribute is the value of description.
Some common values for the name attribute include author, keywords, referrer, etc. For example,
<head>
<meta name="keywords" content="Meta tag, HTML">
<meta name="author" content="Elon Musk">
</head>
Here, we have used meta tags to provide information about keywords and the author of the HTML document.
The http-equiv
attribute is used to provide an HTTP header for the information of the content attribute. The list of possible values for the attribute are:
<meta http-equiv="content-security-policy" content="default-src 'self';" />
Here, the above tag specifies that external resources are only allowed from self, i.e. the same host as the webpage.
charset
attribute. It is used to set the character encoding for the HTML document. For example,<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="default-style" content="stylesheet-1">
Here, in case of multiple stylesheets, the stylesheet with the id of stylesheet-1 will be prioritized.
<!-- To refresh the site in 3 seconds -->
<meta http-equiv="refresh" content="3" />
You can optionally redirect the user to a separate url by adding ;url= followed by the url. It should be inside the content attribute after the time interval.
<!-- To redirect to youtube after 3 seconds -->
<meta http-equiv="refresh" content="3;url=https://www.youtube.com" />
The uses of Metadata are as follows:
<meta name="viewport" content="width=device-width, initial-scale=1.0">