Explain use of Meta tags in HTML


HTML allows us to specify metadata (i.e. additional important information) about a document in a variety of ways. The Meta elements allow us to include name/value pairs that specify the properties of the HTML document such as page description, character set, keywords, author, and the viewport settings.

We can include the metadata in an HTML document using the <meta> tag. It is an empty tag and does not have a closing tag. The <meta> tag will be present inside the <head> element of the HTML document.

These specified metadata will not be displayed on the webpage, instead, it is used by web browsers, and search engines (keywords).

Syntax

Following is the syntax and position of tag in an HTML document −

<head>
   <meta attribute_name = "">
</head>

Attributes

A meta tag can have the following attributes −

S.No

Attribute & Description

1

charset

It specifies the character encoding for an HTML document.

2

name

It specifies a name for the metadata.

3

http-equiv

It is used for HTTP response message headers.

4

content

It specifies the value associated with the http-equiv or name attribute.

Example

In the following example, we are setting the character set for the HTML document using the charset attribute −

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
</head>
<body>
   <p>Body content...</p>
</body>
</html>

Example

In the example below, we are defining keywords, author name, and viewport settings for the HTML document using name attribute −

<!DOCTYPE html>
<html>
<head>
   <!--Defines description for the web page-->
   <meta name="keywords" content="HTML,CSS,JavaScript,React,Node,Angualar">
   <!--Defines the author of the webpage-->
   <meta name="author" content="Mohtashim">
   <!--Defines the viewport settings-->
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
   <p>Body content...</p>
</body>
</html>

Example

The following example describes the usage of the http-equiv attribute with a "refresh" value −

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="refresh" content="2" />
</head>
<body>
   <p>Body content...</p>
</body>
</html>


Updated on: 04-Aug-2023

81 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements