FactorPad
Faster Learning Tutorials

HTML meta tag

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.
by Paul Alan Davis, January 2, 2018
Updated: December 13, 2018
That's how we'll learn about this important tag, so let's get going.

Outline Back Next

~/ home  / tech  / html5  / reference  / html meta tag


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.

  • 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.

<!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.

  • Alexa - to verify site ownership
  • Apple - specialized Apple Safari settings
  • Dublin Core - a standard setter for metadata
  • Facebook - for Open Graph specifications
  • FindLaw - for categorizing legal documents
  • Globrix - data for a real estate search engine
  • Google - settings for Chrome, Google Scholar, site verification
  • Internet Engineering Task Force (IETF) - for geospatial data
  • Microsoft - settings for Windows, mobile devices, image locations
  • OpenSearch.org - standard setter for search engines
  • Twitter - application settings, cards, photos
  • Webtrends - web tracking information
  • Yahoo - to verify site ownership
  • Yandex - to verify site ownership

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>

Other 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 here and see if the videos help you learn faster.

  • For the complete HTML tag list, click Outline.
  • To learn about the <body> tag, click Back.
  • To create a hyperlink with the <a> tag, click Next.

Outline Back Next

~/ home  / tech  / html5  / reference  / html meta tag



 
 
Keywords:
html meta
html meta tag
html meta element
html meta tag attributes
seo metadata
metadata examples
html metadata
meta og
meta dublin core
html charset
seo description
html viewport
html meta keywords
html description
meta description
html meta defaults