The HTML <meta> element is employed to define the metadata of the HTML document, such as the page description, keywords, copyright information, language, and authorship details.
The metadata does not appear on the webpage itself, but it serves a crucial purpose for search engines, browsers, and various web services that analyze the site or page in order to gather information about it.
By utilizing the meta tag, you have the ability to test and preview how your webpage will appear in the browser.
The <meta> tag is nested inside the <head> tag, and it is possible to utilize it multiple times within a single document.
Syntax:
<meta charset="utf-8">
Here are some details regarding the HTML <meta> tag:
| Display | None |
|---|---|
| Start tag/End tag | Empty Tag(Only Start tag) |
| Usage | Document Structural |
Following are some specific syntaxes of meta tag which shows the different uses of meta Tag.
1. <meta charset="utf-8">
It specifies the character encoding. The charset value is set to "utf-8", enabling universal language display support.
2. <meta name="keywords" content="HTML, CSS, JavaScript, Tutorials">
It defines the set of keywords utilized by search engines.
3. <meta name="description" content="Free Online tutorials">
It specifies the website description, which is essential for delivering pertinent search results when searched by search engines.
4. <meta name="author" content="thisauthor">
It designates the creator of the webpage, allowing for automatic extraction of author details by a Content Management System (CMS).
5. <meta name="refresh" content="50">
It directs the browser to refresh the content automatically at specified intervals, such as every 50 seconds or a custom time set by the user.
6. <meta http-equiv="refresh" content="5; url=html-tags-list">
In the example mentioned, a URL with specified content has been configured to redirect to the designated page automatically once the set time elapses.
7. <meta name="viewport" content="width=device-width, initial-scale=1.0">
It defines the viewport to manage the page size and scaling, ensuring optimal display across various devices. Its presence signifies mobile device compatibility for the page.
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="HTML, CSS, JavaScript, Tutorials">
<meta name="description" content="Free Online tutorials">
<meta name="author" content="thisauthor">
<meta http-equiv="refresh" content="5; url=html-tags-list">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h2>Example of Meta tag</h2>
<p>This example shows the use of meta tag within an HTML document</p>
</body>
</html>
Attribute:
Tag-specific attributes:
= New in HTML5
| Attribute | Value | Description |
|---|---|---|
| charset | character_set | It specifies the character encoding of an HTML page. |
| content | text | It contains the value of the attribute "name" and "http-equiv" in an HTML document, depending on context. |
| http-equiv | Content-typedefault-stylerefresh | It specifies the Information given by the web server about how the web page should be served. |
name |
application-nameauthordescriptiongeneratorkeywords | It specifies the name of document-level metadata. |
| scheme | format/URL | It specifies the scheme in which metadata is described. (Not Supported in HTML5) |
- Content-type
- default-style
- refresh
- application-name
- author
- description
- generator
- keywords
Global attribute:
The <meta> tag supports the global attributes in HTML
Event attribute:
The <meta> tag facilitates the event attributes within HTML.
Supporting Browsers
| Element | Chrome | IE | Firefox | Opera | Safari |
|---|---|---|---|---|---|
<meta> |
Yes | Yes | Yes | Yes | Yes |