HTML and CSS Reference
In-Depth Information
The
meta
element is multipurpose and can carry several kinds of data, depending on which attributes are
present:
With a
name
attribute, the
meta
element represents
document-level metadata
that applies to the
entire document.
With an
http-equiv
attribute, the element represents a
pragma directive
, which is information
sent to the web server about how the document should be served.
With a
charset
attribute, the element declares the character set used for rendering the page.
HTML5 also introduces the
itemprop
attribute that combines with other attributes to
allow web authors to include user-defined metadata in their documents. This
microdata
is very bleeding edge at the time we write this, and hasn't yet been fully defined or
implemented, so we won't be covering it in this topic, but there's some great potential for
microdata in the near future as the standard takes shape. If you're curious, you can read
more at
whatwg.org/specs/web-apps/current-work/multipage/microdata.html
The
charset
attribute is new in HTML5 and turns a
meta
element into a
character set declaration
for the
document, instructing browsers about how the document is encoded and what characters it should use to
render the text. A
character encoding system
is the code computers use to draw letters and symbols, so
declaring your document's character set will inform the browser about what characters it should call upon
to display your text accurately. Declaring the wrong character set might cause incorrect rendering or
missing symbols if the text requires a character that isn't part of the declared set. The de-facto standard
character set for web pages is UTF-8—short for
UCS Transformation Format, 8-bit
—and you'll rarely need
to use anything else:
<meta charset="utf-8">
Technically, declaring your document's character set in the header is optional. Web servers usually send
character encoding information when they send the document to the browser, so if you include your own
meta
charset
declaration in your page's header, make sure the character set you declare is the same as
the server's. You can override the character set declared in the header for individual elements on the page
using the
lang
attribute, handy if you need to include special characters from other languages that might
not be part of the UTF-8 standard set (though UTF-8 includes thousands of characters).
Apart from the
charset
attribute,
meta
elements usually provide their metadata in the form of a name-
value pair where a
name
or
http-equiv
attribute provides the name or category of the data and the
content
attribute provides the value:
<meta name="author" content="Craig Cook">
<meta name="title" content="Foundation HTML5 with CSS3 - Chapter 3: The Document">
<meta http-equiv="date" content="Thu, 15 Dec 2011 09:19:41 UTC">
<meta http-equiv="last-modified" content="Tue, 17 Apr 2012 22:34:13 UTC">
The
http-equiv
attribute lets a
meta
element act as an equivalent to an
HTTP response header
, settings
typically sent directly to the browser by the web server. You may not always have the option of modifying
server-side configurations to change these, so a
meta
element with
http-equiv
can step in.