Explain use of Meta tags in HTML
Last Updated :
15 May, 2023
Meta Tag(<meta>) is a HTML component that gives the metadata about a HTML document. MetaData can be characterized as data that gives the data of different information or basic information about information. It is an empty tag, for example, it just has an initial tag and no end tag. They are always present inside the <Head> tag and are utilized to portray Page portrayals, Certain Keywords, Author of the Document, viewport settings, determining character sets, and so on.
They are used by Web Browsers, Search Engines, and other Web Services to rank the web pages accordingly.
Syntax :
<head>
<meta attribute-name = "value"/>
</head>
Attributes: The following attributes with their values are described below:
- name: This attribute is used for indicating the character encoding for the HTML Document.
- http-equiv: This attribute is used to get the HTTP response message header.
- content: This attribute is used to specify properties value.
- charset: This is used for indicating the character encoding for the HTML Document.
Example 1: This example illustrate the use of the Meta tag in HTML.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="description" content=
"Free Computer Science Content" />
<meta name="keywords" content="HTML" />
<meta name="author" content="GFG" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
</head>
<body>
<p>Meta Tags are used in this HTML Web page</p>
</body>
</html>
Output:
Meta Tags are used
Uses of Meta Tags in HTML:
1. Specifying Important Keywords: The meta tag contains important keywords that are present on the web page and is utilized by the web browser to rank the page according to searches. Search Engine Optimization is another term for this optimizing the SEO rank of the content.
Example 2:The following example specifies use of the Keywords in the meta tag.
HTML
<!DOCTYPE html>
<html>
<head>
<!-- meta tag starts -->
<meta name="keywords" content=
"Meta Tags HTML GFG Meta Data " />
<!-- meta tag ends -->
</head>
<body>
<p>This is a MetaTags Web page</p>
</body>
</html>
Output:
Specifying Keywords in the metatag
We can see that a few keywords have been provided in the example above, which will aid the web browser in ranking the web page.
2. Automatic Refresh: A specified time will be mentioned in the meta tag after which the webpage will be automatically refreshed.
Example 3: This example describes the use of the refresh attribute value with the meta tag.
HTML
<!DOCTYPE html>
<html>
<head>
<!-- meta tag starts -->
<meta name="revised about"
content="GeeksforGeeks" />
<meta http-equiv="refresh" content="8" />
<!-- meta tag ends -->
</head>
<body>
<p>We are using refresh meta tag</p>
</body>
</html>
Output: As you can observe in the above example the web page will be reloaded after 8 seconds as mentioned in the <meta> tag.
The time after which the webpage has to be reloaded is mentioned in the metatag
3. Specifying Author of the Webpage: MetaTag allows us to mention the name of the author of the webpage as follows.
Example 4: This example specifies the author of the website.
HTML
<!DOCTYPE html>
<html>
<head>
<!-- meta tag starts -->
<meta name="author" content="U Phani Teja" />
<!-- meta tag ends -->
</head>
<body>
<p>
We are specifying name of
the Author in the Meta Tag
</p>
</body>
</html>
Output: In this example, the name of the author is specified in the <meta> tag
Providing the Author's name in the meta tag
4. Providing a Description of the web page: A brief description of the web page can be included in the Meta tag, which will help the web page rank on the internet.
Example 5: This example specifies the Description of the web page.
HTML
<!DOCTYPE html>
<html>
<head>
<!-- meta tag starts -->
<meta name="description"
content="All About Meta tags" />
<!-- meta tag ends -->
</head>
<body>
<p>
A brief Description of the WebPage
is present in the webapage
</p>
</body>
</html>
Output: In the this example, a small description of the web page is given in the <meta> tag.
Providing a brief description in the metatag
Similar Reads
Most Commonly Used Tags in HTML HTML tags are the fundamental building blocks of web development, providing the structure and organization necessary for creating web pages.They include tags for headings, paragraphs, links, images, and more.Commonly used tags like <html>, <head>, and <body> are essential for creat
4 min read
What are Self Closing Tags in HTML? Self-closing tags, also known as void elements, are HTML elements that do not require a separate closing tag. These tags are self-contained and are typically used for elements that do not have any content between an opening and closing tag. Self-closing tags help keep the HTML structure clean and co
3 min read
Explain the importance of Doctype in HTML ? Doctype in HTML: HTML Doctype is most often written at the very first element of the entire HTML document. It remains wrapped inside angle brackets but it is not a tag. It is a statement or declaration. Doctype stands for Document Type. It is a statement to declare the type of the document. With the
3 min read
HTML <meta> Tag A meta tag in HTML is an element that provides metadata about the HTML document. Metadata is data that describes other data, and in this case, it helps search engines and browsers understand how to handle or display content. The <meta> tag does not appear directly on the webpage, but it provid
4 min read
Explain semantic elements in HTML5 In this article, we are going to learn about the semantic elements in HTML5. Semantic elements are the elements that describe their meaning to both the developer as well as to the browser. HTML5 provides us with many semantic elements as listed below:<article> tag: A article tag is used to spe
7 min read