HTML <meta> Tag Tutorial - Usage, Syntax,
Attributes and Example

Introduction

Metadata is data that describes data. The HTML <meta> tag is used to add meta data to webpage. This metadata is not visible to users but helps search engines, browsers, and other services understand the page's content and behaviour.

The type of information that can be provided with <meta> element is listed below (List not exhaustive):

• Providing SEO-related metadata (title, description, keywords)
• Providing general metadata (web-application name, author name, generator, color-schemes).
• Configuring viewport settings for mobile responsiveness
• Specifying character encoding
• HTTP headers like Content-Security-Policy, x-ua-compatible, Content-type and others.
• media type
• Refreshing or redirecting a page
• Open Graph Tags

Attributes

The attributes of <meta> element are listed below:

• charset
• http-equiv
• media
• name
• content

1. charset

This attribute specifies the character encoding of webpage. Charset is the set of characters you can use. Encoding is process of assigning character a binary code so that it can be read and written uniformly by different systems. The only encoding supported by HTML5 is UTF-8.

Ex. In UTF-8, the character "A" is encoded as 01000001.

Syntax:

<meta charset="UTF-8">

2. http-equiv

http-equiv is short-form of http-equivalent. This attribute is used to set HTTP headers hence the name http-equiv. The allowed values of this attribute are names of HTTP headers. The values it can take are listed below. This attribute is describe in detail at our Meta: http-equip page.

a. content-security-policy

It is used to defined a security-policy for current page. Content-security-policy define which resources a browser is allowed to load for a given page and from which origin.

The policy is specified as a series of directives, separated by semi-colons. Each directive has name followed by space and followed by value specifying resource type and its permitted origin respectively.

Example: In the below example img-src directive instructs the browser that it can load images only from same origin or from sample.com

<meta http-equip="Content-Security-Policy" content="img-src 'self' sample.com">

b. content-type

It is used to specify the media-type of document or resource. There are more than 100+ media types. The most common and frequently used are listed below. You can explore this topic in more detail at our HTML: Content-type blogpost.

Text Type

• text/css
• text/csv
• text/html
• text/javascript
• text/xml

Audio Type

• audio/mp3
• audio/mpeg
• audio/x-wav
• audio/x-ms-wma

Application Type

• application/json
• application/ogg
• application/pdf
• application/javascript
• application/xml

Image Type

• image/jpeg
• image/png
• image/gif
• image/x-icon
• image/tiff

c. default-style

It specifies the preferred CSS style sheet.

<meta http-equip="default-style" content="URL of preferred stylesheet">

d. x-ua-compatible

It allows web designers to specify what version of Microsoft Internet explorer Browser the webpage should be rendered as. The allowed values specify user agent and version ex: "IE=7", "IE=8" and so on. The allowed values are listed below.

<meta http-equip="x-ua-compatible" content="IE=edge">

• "IE=edge"
• "IE=11"
• "IE=10"
• "IE=9"
• "IE=8"
• "IE=7"
• "IE=5" - quirks mode
• "IE=EmulatelE11" - IE11 mode if valid <!DOCTYPE> is present otherwise quirks mode
• "IE=EmulatelE10" - IE10 mode if valid <!DOCTYPE> is present otherwise quirks mode
• "IE=EmulatelE9" - IE9 mode if valid <!DOCTYPE> is present otherwise quirks mode
• "IE=EmulatelE8" - IE8 mode if valid <!DOCTYPE> is present otherwise quirks mode
• "IE=EmulatelE7" - IE7 mode if valid <!DOCTYPE> is present otherwise quirks mode

e. refresh

It is used to reload a page or redirect it to another page after a time interval. The timer starts when page is completely loaded.

• When content attribute value is non-negative integer: It specifies the number of seconds after which the page should reload itself. Example:

  <meta http-equip="refresh" content="5">



• When content attribute value is non-negative integer and followed by URL: It specifies the number of seconds after which the page should redirect itself to another. Example:

  <meta http-equip="refresh" content="5" url="sample.com">

3. media

The media attribute specifies which media the color theme should be applied to. Its value is a media-query and its default value is all if this attribute is not specified. theme-color is name meta attribute which let you define the color for UI. The color value is specified using content attribute.

<meta name="theme-color" content="#E7E9F0" media="print">

4. name

Name and content attribute is used to provide document related information in terms of name-value pair (name is name of metadata and content is value). Below is list of some standard metadata names defined in HTML. This attribute is describe in detail at our Meta: Standard Names page.

• application-name - It is used to specify the name of web-application that the webpage represents.
• author - It is used to specify the name of author of the webpage
• description - The meta description is short summary of webpage. This description appears in search engine results.
• generator - It is used to specify name of software used to create the webpage.
• keywords - They are similar to tags of social media that can be used to give additional information about webpage to search engines. Google has stopped using meta keywords tag to rank web page. Bing has also made clear in a blog post that they ignore meta keywords. So, most SEO professionals don't use it
• referrer - referrer attribute is used to define the HTTP header referrer for the outgoing links from the current webpage. The HTTP Referrer header contains the address of the previous page from which a request was made. It makes possible to identify the referring website. Detailed article at this link.
• Color-scheme - This attribute specifies the color scheme with which the document is compatible being rendered with. Detailed article at this link.
• theme-color - This attribute let you define the color for UI
• viewport - Viewport meta tag tells the browser about the size of viewport. Viewport has been described in detail at our Viewport: An Basic Introduction blogpost.

5. content

This attribute is used in combination with other attribute and takes various form. It can be used with http-equiv, theme-color, viewport and others attributes as specified in this article.

Frequently Asked Questions (FAQ)

<link rel="alternate" hreflang="en" href="https://example.com/en/" />
<link rel="alternate" hreflang="fr" href="https://example.com/fr/" />
<link rel="alternate" hreflang="es" href="https://example.com/es/" />