What is the HTML <meta> tag ?
HTML <meta> tag is used to provide structured metadata about a web page.
Meta data contains information about a HTML document data.
Meta elements are part of a web page head section.
One or more meta elements with different attributes can be used on the same web page.
HTML <meta> tag is an empty element because it only has an opening tag and no closing tag.
How HTML <meta> tag works ?
HTML <meta> tag does not display meta information into the body part of the web page.
HTML <meta> tag usually specifies page description, keywords and other important information.
HTML <meta> tags are used to add name/value pairs to describe properties of HTML documents, such as expiry date, author name, list of keywords, document author, etc.
Why is the HTML <meta> tag used ?
HTML <meta> tag provides information about HTML Document.
This helps to optimize the web page on search engine optimization (SEO).
HTML beginners tutorial !!!
Click to Learn More about – HTML Tutorial for beginners
Syntax :
<meta attribute-name="value">
1. Meta Tag with Keywords :
This tag is used to specify the important keyword related to the HTML document.
Example :
<!DOCTYPE html>
<html>
<head>
<!-- meta tag starts -->
<meta name = "keywords"
content = "Meta Tags, Metadata"/>
<!-- meta tag ends -->
</head>
<body>
<p>Welcome to CSTechbook</p>
</body>
</html>
Output :
2. Meta tag with Document Description :
This tag is used in an HTML document to provide a short description of the document.
Example :
<!DOCTYPE html>
<html>
<head>
<!-- meta tag starts -->
<meta name = "keywords"
content = "Meta Tags, Metadata" />
<meta name = "description"
content = "CStechbook is a computer programming tutorial website." />
<!-- meta tag ends -->
</head>
<body>
<p>Welcome to CStechbook</p>
</body>
</html>
3. Meta Tag with Document Revision Date :
This tag is used to give the information about the last updated document and this information is used by various web browsers when refreshing the web page.
Example :
<!DOCTYPE html>
<html>
<head>
<!-- meta tag starts -->
<meta name = "keywords"
content = "Meta Tags, Metadata" />
<meta name = "description"
content = "Learn about Meta Tags." />
<meta name = "revised detail"
content = "last updated time" />
<!-- meta tag ends -->
</head>
<body>
<p>Welcome to CSTechbook</p>
</body>
</html>
4. Meta Tag with Document Refreshing :
This tag is used to specify a duration after which the web page will keep refreshing automatically after the given duration. The time period to refresh the web page after 10 sec example is given below
Example :
<!DOCTYPE html>
<html>
<head>
<!-- meta tag starts -->
<meta name = "keywords about"
content = "Meta Tags, Metadata" />
<meta name = "description"
content = "Learning about Meta Tags." />
<meta name = "revised about"
content = "CSTechbook" />
<meta http-equiv = "refresh" content = "8" />
<!-- meta tag ends -->
</head>
<body>
<p>Welcome to CSTechbook</p>
</body>
</html>
5. Meta tag with Setting Author Name
Author name can be set on a web page through an HTML document using a meta tag.
Example :
<!DOCTYPE html>
<html>
<head>
<!-- meta tag starts -->
<meta name = "keywords used "
content = "Meta Tags, Metadata" />
<meta name = "description about"
content = "Meta tags learning." />
<meta name = "author" content = "Abdul Kalaam" />
<!-- meta tag ends -->
</head>
<body>
<p>Welcome to CSTechbook</p>
</body>
</html>
<meta> Tag Attributes
HTML <meta> tag support following specific attributes.
| Sno | Attributes | Value | Description |
|---|---|---|---|
| 1 | charset | charset | Specify the document character encoding.<meta charset="UTF-8"/> |
| 2 | content | text | Specifies the value for the http-equiv or name attribute. |
| 3 | http-equiv | content-type refresh | Specifies the name of a HTTP header for the value of the content attribute. content-type Specify the MIME type of the web page. <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>refresh Specify the time interval for the web page to reloaded itself. <meta http-equiv="refresh" content="15"/> |
| 4 | name | application-name author description generator keywords viewport | Specifies the name of document metadata. |
Global Attributes
HTML <meta> tag does not support any global attributes.
Event Attributes
HTML <meta> tag does not support any event attributes.
Browser Compatibility
| Sno | Browser | Support |
| 1 | Chrome | Yes |
| 2 | Firefox | Yes |
| 3 | Edge | Yes |
| 4 | Opera | Yes |
| 5 | Safari | Yes |
| 6 | Internet Explorer | Yes |