FactorPad
Build a Better Process

HTML meta Tag Reference and Examples

Face it. Your HTML document just won't load and connect with third-parties appropriately without this tag.
  1. About - Understand the purpose of the meta tag.
  2. Syntax - Describe how it is used.
  3. Settings - View required and optional attributes plus default behaviors.
  4. Examples - Review common examples.
face pic by Paul Alan Davis, CFA
Updated: February 23, 2021
That's how we'll learn about this important tag, so let's get going.

Outline Back Tip Next

/ factorpad.com / tech / html5 / reference / html-meta-tag.html


An ad-free and cookie-free website.


Understanding the HTML meta Tag

Beginner

The <meta> tag is one of several important tags the developer places in every HTML document.

HTML Tags Reference

1. About the meta tag

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.

2. Syntax for the meta tag

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.

The content attribute is used with both http-equiv and name to set the value of the named attribute.

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Page Title</title> </head> <body></body> </html>
Character set and document encoding

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.

<meta charset="UTF-8">

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.

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

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.

The viewport

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.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

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.

3. Settings for the meta tag

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.

Standard metadata

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.
Custom third-party metadata

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.

Default behaviors

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.

meta { display: none; }

4. Examples of the meta tag

Example 1 - Show the base-case meta tags in context

The following code will set up a document with meta settings for the page description and viewport.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Page Title</title> <meta name="description" content="Page description"> </head> <body></body> </html>
Example 2 - Set a page as off limits to search engines

Add a line that tells search engines not to index and not to follow hyperlinks on that page.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Page Title</title> <meta name="description" content="Page description"> <meta name="robots" content="noindex, nofollow"> </head> <body></body> </html>

Related HTML Content

The <meta> tag is paired with other essential tags that should be included in every HTML document.


What's Next?

Have you seen our YouTube Channel yet? Subscribe and see if the videos help you learn faster.

Outline Back Tip Next

/ factorpad.com / tech / html5 / reference / html-meta-tag.html


examples of html meta tag
html meta tag
seo metadata
html metadata
how to use the html meta element
meta description
meta keywords
meta og element
meta charset
meta viewport
what goes in the html meta tag
seo title tag
html meta examples
html charset
html viewport
html description
html keywords
html meta defaults

A newly-updated free resource. Connect and refer a friend today.