If you find this helpful, please click the Google |


The <meta/> Tag in HTML 5
The <meta/>
tag is used to define metadata for the HTML document or directives for the HTTP protocol. HTML metatag
elements have a content
attribute and either a name
attribute for document metadata or an http-equiv
attribute for protocol directives.
<meta http-equiv="..." content="..."/> <meta name="..." content="..."/> <meta itemprop="..." content="..."/>
See the HTML <meta> tag list for some of the values that can be coded for the name
attribute or the http-equiv
attribute. Other metadata can be expressed using specific HTML tags, such as:
List of <meta> tags in HTML 5
Most Common Metatags
The most common HTML metatags include:
Metatags for Search Engine Optimization (SEO)
- <meta name="description"/> tag
- <meta name="google"/> tag
- <meta name="googlebot"/> tag
- <meta name="keywords"/> tag
- <meta name="robots"/> tag
- <meta name="verify"/> tag
Metatags for HTML pages on Mobile / Handheld Devices
- <link rel="apple-touch-icon/> tag for Web Clips
- <meta name="format-detection"/> tag
- <meta name="HandheldFriendly"/> tag
- <meta name="viewport"/> tag
Metatags for Apps on Mobile / Handheld Devices
- <meta name="apple-mobile-web-app-capable"/> tag
- <meta name="apple-mobile-web-app-status-bar-style"/> tag
- <link rel="apple-touch-startup-image/> tag
<meta http-equiv="..."/> tags
- <meta http-equiv="default-style"/> tag
- <meta http-equiv="refresh"/> tag
- <meta http-equiv="Cache-Control"/> tag
- <meta http-equiv="Content-Disposition"/> tag
- <meta http-equiv="Content-Type"/> tag
- <meta http-equiv="Expires"/> tag
- <meta http-equiv="X-UA-Compatible"/> tag
Less common HTML metatags include:
<meta/> Tag Syntax
<?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet ...?> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> ... metadata content ... <meta http-equiv="..." content="..."/> ... metadata content ... <title>My Title</title> ... metadata content ... <meta name="..." content="..."/> ... metadata content ... </head> <body> ... flow content expected ... <meta itemprop="..." content="..."/> ... ... phrasing content expected ... <meta itemprop="..." content="..."/> ... </body> </html>
Rules for coding the HTML meta element
Make sure you understand the difference between a tag and element and are familiar with the definitions of namespace and other HTML terms.
<meta/> tag as metadata content
- Code any <meta> tags in the <head> section of the HTML document where metadata content is expected.
- Each meta element consists of a standalone <meta/> tag. The element name uses lower case letters and should be in the HTML namespace, which it will pick up automatically from the
xmlns
attribute on the <html> tag. - Code either a
name
attribute or anhttp-equiv
attribute, but not both. The value of the attribute, which is enclosed in double quotes, is the name of the metadata or directive. - Code the
content
attribute with the value for the named metadata or directive in double quotes. - Since the
<meta/>
tag is a void element, it should always be coded as a self-closing tag terminated with the delimiter string/>
.
<meta/> tag for microdata properties
- Code the <meta> tag in the <body> section of the HTML document where either flow content or phrasing content is expected.
- The meta element consists of a standalone <meta/> tag. The element name uses lower case letters and should be in the HTML namespace, which it will pick up automatically from the
xmlns
attribute on the <html> tag. - Inside the <meta> tag, include an
itemprop
attribute to indicate the meta element represents a microdata property. The value of the attribute, which is enclosed in double quotes, is the name or URL of the microdata property. - Inside the <meta> tag, code a
content
attribute with the value of the microdata property in double quotes. - Since the
<meta/>
tag is a void element, it should always be coded as a self-closing tag terminated with the delimiter string/>
.
<meta/> Content Model
Contents of the meta element
Content: Empty. All properties are coded using attributes.
Since the <meta/>
tag is a void element, it is not allowed to have any content, even HTML comments and therefore should always be coded as a self-closing standalone tag, ending with the delimiters />
rather than just >
(<meta .../>
).
<meta/> Tag Attributes
Attributes of the <meta/> tag
global attributes | In addition to the personal attributes of the <meta/> tag below, any of the common HTML attributes can also be coded. The itemprop attribute is required when the <meta/> tag is used where flow content or phrasing content is expected. |
charset |
|
content |
|
http-equiv |
http-equiv="content-language" http-equiv="content-type" http-equiv="default-style" http-equiv="refresh" |
name |
name="application-name" name="author" name="classification" name="copyright" name="description" name="formatter" name="generator" name="google" name="googlebot" name="handheldfriendly" name="keywords" name="rating" name="verify" name="viewport" - see Using <meta name="viewport"/> to Control Zoom in Mobile Browsers |
<meta/> Tag Examples
Examples of the <meta/> tag in HTML 5
Changes in HTML 5 - <meta/> Tag
What's new in HTML 5
Differences between HTML 5 and HTML 4 / xHTML
- The
<meta charset="..."/>
tag should no longer be used because it is supported only for the purpose of migrating from xHTML.
In ployglot HTML documents the <meta/>
tag is coded as a self-closing tag the same as in the 2000-2010 Recommendations from the W3C HTML Working Group. Those specifications changed the ending delimiter to />
from >
in older recommendations. They also defined the HTML namespace for the meta element type name and the names of other HTML element types.