The meta tags in HTML is a metadata element that exist in the <head> section of an HTML document. Metadata provides information about the HTML document to browsers, search engines, and other web services, rather than displaying content on the page. You can use multiple <meta> tags in your document.
Purpose of <meta> Tags:
The purpose of the <meta> element is to provide information about the HTML document. This specifies the character encoding, document description, keywords, author, and other metadata. This information is used by browsers to correctly extract the page and by search engines to understand and index the content.
Placement:<meta> tags are always placed inside the <head> element of the HTML document.
Void Element: The <meta> tag is a void element (also called a self-closing tag), meaning it does not have a closing tag. In HTML5, it is written with a trailing slash (e.g., <meta charset=”utf-8″ />).
List of Meta tags:
The <meta> tag uses various attributes to define the metadata.
- charset: This attribute, introduced in HTML5, specifies the character encoding for the HTML document. The recommended encoding for modern HTML documents is utf-8.
Example:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Example Page</title>
</head>
<body>
<p>This page uses UTF-8 encoding.</p>
</body>
</html>- name and content: These attributes are used together to define name/value pairs of document metadata. The name attribute specifies the type of metadata, and the content attribute provides the value.
- author: The author of the page.
- description: Provides a description of the page content, often used by search engines in results snippets.
- keywords: A comma-separated list of keywords related to the page’s content. Historically important for SEO.
- robots: Controls how search engine crawlers should treat the page (e.g., noindex, nofollow).
- viewport: Configures the viewport for responsive web design, controlling how the page scales on different devices.
- application-name: Specifies the name of a web application.
- Example:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Example Page</title>
<meta name="author" content="John Doe">
<meta name="description" content="This is an example HTML page.">
<meta name="keywords" content="example, html, metadata">
<meta name="robots" content="index, follow">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="application-name" content="MyWebApp">
</head>
<body>
<p>This page demonstrates the use of meta tags.</p>
</body>
</html>
- http-equiv and content: This pair is used to provide instructions similar to HTTP response headers. Common http-equiv values include:
- Content-Type: Specifies the MIME type and character encoding of the document.
- Refresh: Can be used to redirect the user to another URL after a specified time interval.
- Example
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="refresh" content="5; url=http://www.example.com/new-page">
<title>Example Page with Redirect</title>
</head>
<body>
<p>You will be redirected in 5 seconds...</p>
</body>
</html>