If you find this helpful, please click the Google Button to the left, if it is white, to make it turn blue or red. Thank you! (It also helps find this page again more easily.) |
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.