HTML Meta Elements

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.

Attributes of Metadata

The Meta tag can have the following attributes:

charset attribute
name attribute
http-equiv attribute

We will learn about each attribute in detail.

charset attribute

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.

name attribute

The name attribute together with the content attribute provides information in terms of name-value pairs. Where:

name - name of the metadata
content - value of the metadata

Let'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.

http-equiv attribute

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:

content-security-policy: Specifies a content policy for the document. It is used to specify allowed server URLs. For example,

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

content-type: Specifies the character encoding for the document. It is the same as using the 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" />

default-style: Specifies the preferred style sheet to use. For example,

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

refresh: Defines a time interval for the document to refresh itself. For example,

<!-- 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" />

Uses of Metadata

The uses of Metadata are as follows:

Tells the browser how to display content or refresh the site.
Used by search engines to read the data of the HTML page.
Used to set the viewport. Viewport refers to the visible area of the webpage. For example,
```
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```
The above code tells the browser to load the webpage with the width of the device and with 1x zoom.