HTML meta elements provide information about an HTML document. A web page may have many meta elements, or very few (and sometimes none at all). When present, they must always appear in the document head. This article explains some of the uses of the meta element.
meta format and attributes
Here's a sample meta element:
<meta name="description" content="This is a document about the meta element.">
Notice that the meta element is empty, and has no closing tag. In HTML5, there's no need to close meta. This is one way in which the HTML5 meta tag is simpler than the XHTML meta tag.
The four attributes defined for meta are
name. When present, the name attribute gives a name for the metadata.
http-equiv. Used for binding values to the HTTP header of a document when it is served from a web server.
content. Contains the value associated with the http-equiv or name attribute.
charset. Defines the set of characters used in the document.
meta names defined by HTML5
The HTML5 specification mentions several possible values for the name attribute. These are
application-name. Specifies the name for the web application that the document represents. For example, if you created a web application called "Taco-matic," you could use the application-name attribute on pages within that application like this:
<meta name="application-name" content="Taco-matic">
author. Gives the name of one of the authors of the document. If the document has multiple authors, the document can have multiple author meta elements.
description. Describes the content of the document. You can put anything you like in the description meta element, but there can only be one such element per document.
generator. If the document is created using some sort of HTML page-creation software (such as Dreamweaver or Aptana Studio), the generator meta element identifies which one was used.
keywords. Contains a comma-separated list of terms relevant to the current page.
In addition to these name values, it's also possible for anyone who has a need to propose and register their own name values.
The charset meta element
Perhaps the most common meta element attribute is charset. Introduced with HTML5, charset provides a quick and easy way to specify to the browser what character encoding was used to author a page. You should always include a charset meta tag in every HTML5 document you write. Here's what it looks like:
<meta charset="utf-8">
Character encodings define the mappings between characters that are displayed on the screen and bits that are stored on the computer. Different character encodings exist for different alphabets and languages (Chinese, Japanese, Russian, and English for example) and other character encodings are more universal.
The most common character encoding is known as UTF-8, which can encode over 1 million different characters.
Using http-equiv meta elements
You can use the http-equiv meta element to send information to the server about how a web page should be served. In HTML versions that preceded HTML5, the most common use for http-equiv was to specify the character encoding for a document. Because this has been replaced with the charset attribute, http-equiv is less commonly used (and encountered) in HTML5.
Nevertheless, there are a couple things that you can do with http-equiv. Most common is the refresh value, which tells the browser to reload the page after a specified number of seconds.
<meta http-equiv="refresh" content="30">
You can also use http-equiv="refresh" to redirect a user to another URL after a specified number of seconds has elapsed. For example, the following tag causes the browser to wait 30 seconds after the page containing it loads and then to load http://www.example.com:
<meta http-equiv="refresh" content ="30;url=http://www.example.com">
For more information on the meta element in HTML5, go to w3schools.com.
