Build a Better Process
Build a Better Process
/ factorpad.com / tech / html5 / reference / html-meta-tag.html
An ad-free and cookie-free website.
Beginner
The <meta> tag is one of
several important tags the developer places in every HTML document.
The <meta> tag sits inside the
<head> element, so it is not
visible to the user.
It has two primary purposes. First, to pass instructions to the browser for how to render the page and second to pass data to third parties about the page itself.
The <meta> tag for HTML5 only
requires a single tag and does not need to be closed with a separate
tag. For documents that also conform to XML and XHTML standards, it
should be closed with />.
The <meta> element is commonly
used with three primary attributes, and a fourth to set values.
by charset - an HTML5 attribute used
to pass the character encoding used in the document. In most cases
this is UTF-8. http-equiv - provides HTTP header
information including types and settings to refresh the page.name - the most-flexible and
most-used attribute with several standard values and many custom
values for third-parties like search engines.
The content attribute is used with
both http-equiv and
name to set the value of the named
attribute.
The topic of character set and document encoding is confusing.
Unicode refers to the set of characters used and how they
are translated to numbers. For example, the letter
a translates to the decimal number
97. This is a character set.
UTF-8 refers to what is called a document encoding, which is
basically taking the Unicode decimal
97 from above and translating that to
the 8-bit binary 01100001. This is
the job of the encoder.
The HTML5 standard simplified the specification with one simple line that sets both.
Prior to HTML5, and for documents written to satisfy the more-strict XML or XHTML standards, the most common way to specify this is with the following line.
In terms of order, it is common to put this line first within the
<head> tag because in the event
that the server does not specify the character set in the header
automatically, then anything interpreted before it will be interpreted
using ASCII. So accents and other non-ASCII characters in the
<title> tag may be misinterpreted.
To develop HTML so it renders properly on both computers and mobile
devices the viewport value sets
the viewing area in the browser on the mobile device properly.
For other viewport settings including height, minimum-scale, maximum-scale and user-scalable see the W3C CSS specifications. Most people do not modify the settings here and include this line as is.
As with all tags, Global Attributes can always be set.
Here we break out the discussion into standard metadata names and custom metadata set up by third-parties, like search engines or standard-setting organizations.
Below is a series of optional attributes and values that can be used
in the <meta> element.
| Attribute and Value | Purpose |
|---|---|
charset="UTF-8"(highly recommended) |
Sets the character set to Unicode and the encoding to UTF-8, common in HTML5. |
http-equiv="content-type"
content="text/html; charset=UTF-8"(optional) |
Settings for XHTML and prior to HTML5. |
http-equiv="refresh" content="10"
(discouraged) |
Tells the browser to reload the page every 10 seconds. This is generally not a well-liked tag by users and should be avoided. |
http-equiv="default-style"
content="title of stylesheet"(uncommon) |
Sets the preferred stylesheet and the content should point to the title of a link element or the title of a style element within the same document. This is not customarily used and instead developers commonly point to an external stylesheet. |
name="description" content="page
description"(highly recommended) |
A text description is used by search engines for document relevancy and to show in search results. |
name="viewport"
content="width=device-width, initial-scale=1.0"
(highly recommended) |
To set the viewport on mobile devices so it is rendered properly within the browser. The width matches the width of the document to the width of the mobile device whether held vertically or horizontally. The initial-scale sets the zoom level at 1.0, the default. |
name="keywords" content="keyword1,
keyword2"(recommended) |
A comma-separated list of keywords associated with the page. This is of less value now that most search engines use full-text indexing and create their own keywords for a page. |
name="author" content="Name or
company"(recommended) |
The individual or company name as the author of the document. |
name="robots"
content="instructions"(optional) |
To provide instructions to search engines as to whether you would like the page crawled. Here index and noindex sets whether you want the search engine to index that page. The follow and nofollow values dictate whether links should be followed. This can also be set on the server in a file called robots.txt. |
name="application-name"
content="app name"(optional) |
The name of the web application. |
name="generator" content="name of
generator"(optional) |
The software package used to generate the page, if any. |
name="referrer"
content="value"(optional) |
To fine-tune data sent as referral information with the document. There can be nine values here: "", no-referrer, no-referrer-when-downgrade, same-origin, origin, strict-origin, origin-when-cross-origin, strict-origin-when-cross-origin, unsafe-url. See the W3C Referrer Policy for more information. |
name="theme-color"
content="#000000"(optional) |
Styling is more common using CSS but this setting is available. |
Anyone can create their own labels for metadata. Before you do so, it is wise to check the document WHATSWG Wiki MetaExtensions for a listing of third-party metadata.
Below is sampling of organizations that publish their own metadata specifications. Some are widely used, others are not.
The use of custom metadata is highly dependent on the individual web developer's needs. Some Content Management Systems (CMS) by default include Facebook and Twitter metadata for SEO purposes.
Each user-agent (browser) has its own stylesheet per se. This dictates
how that browser styles each element by default. The Chrome browser
styles the <meta> element using
the following specifications.
The following code will set up a document with meta settings for the page description and viewport.
Add a line that tells search engines not to index and not to follow hyperlinks on that page.
The <meta> tag is paired
with other essential tags that should be included in every HTML
document.
Have you seen our YouTube Channel yet? Subscribe and see if the videos help you learn faster.
<link>
tag, click Back.<p> tag, click Next./ factorpad.com / tech / html5 / reference / html-meta-tag.html
A newly-updated free resource. Connect and refer a friend today.