|
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
xmlnsattribute on the <html> tag. - Code either a
nameattribute or anhttp-equivattribute, but not both. The value of the attribute, which is enclosed in double quotes, is the name of the metadata or directive. - Code the
contentattribute 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
xmlnsattribute on the <html> tag. - Inside the <meta> tag, include an
itempropattribute 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
contentattribute 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.