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
Explain the use of figure tag in HTML5 In HTML, the <figure> tag is used to include self-contained information such as illustrations, diagrams, photographs, or code listings in a document. It is linked to the main flow, but it may be used at any place of a document, and the figure flows with the content, thus removing it should not
3 min read
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
Beginner's Guide to HTML Meta Tags for SEO Meta tags are like little information cards for your website that you share with search engines and visitors. They're pieces of code tucked in the "<head>" section of your webpage's HTML. Think of them as labels that tell the search engines, what your webpage is about and how it should appear
8 min read
HTML Tags - A to Z List HTML Tags are fundamental elements used to structure and format content on web pages. They provide instructions to web browsers on how to render text, images, links, and other media.HTML tags are enclosed in angle brackets < > and usually come in pairs: an opening tag and a closing tag. The cl
15+ min read
Interesting Facts About HTML Meta Tags and SEO HTML meta tags are small but powerful elements found in the <head> section of a webpage. Although users can't see them, they are important for search engine optimization (SEO). Meta tags provide search engines with key information about a page's content and purpose, helping improve its visibil
2 min read
What are logical tags in HTML ? Logical tags are used to tell the browser what kind of text is written inside the tags. They are different from physical tags because physical tags are used to decide the appearance of the text and do not provide any information about the text. Logical tags are used to indicate to the visually impai
5 min read