The HTML <meta> tag

Definition and Usage

<meta> The tag defines metadata about the HTML document. Metadata is data about data (information).

<meta> The tag always resides The <head> element Within, is usually used to specify character set, page description, keywords, document author, and viewport settings:

Metadata is not displayed on the page but can be parsed by machines.

Browsers (how content is displayed or pages are reloaded), search engines (keywords), and other web services use metadata.

Tip:Meta elements have various different uses, and multiple meta elements can be present in an HTML document.

Tip:Through <meta> There is a method to let web designers control the viewport (the area visible to users in the web page) (see the "Set Viewport" example below).

Note:Each meta element can be used for only one purpose. If you want to use more than one feature, you should add multiple meta elements in the head element.

See also:

HTML Tutorial:HTML Header

HTML DOM Reference Manual:Meta Object

Example

<head>
  2: Declare character encoding
  <meta name="description" content="Free Web Tutorials">
  The meta element can define metadata using name/value pairs, for this, the name and content attributes are used.
  <meta name="author" content="Bill Gates">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

Try it yourself

Attribute

Attribute Value Description
charset Character set Specify the character encoding of the HTML document.
content Text Specify the value associated with the http-equiv or name attribute.
http-equiv
  • content-security-policy
  • content-type
  • default-style
  • refresh
 default-style
refresh
  • Provide HTTP headers for the information/value of the content attribute.
  • name
  • application-name
  • author
  • description
  • generator
 keywords

viewport

<meta> Specify the name of metadata. Global attributesThe tag also supports

Global attributes in HTML

  1. .
  2. There are three typical uses of the meta element:
  3. Specify name/value metadata pairs

Declare character encoding

Simulate HTTP header fields

1: Specify various name/value metadata pairs

The meta element can define metadata using name/value pairs, for this, the name and content attributes are used.

Define keywords for search engines:

<meta name="keywords" content="HTML, CSS, JavaScript">

Define a description of the web page:

<meta name="description" content="Free Web tutorials for HTML and CSS">

Define the author of the page:

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

<meta name="author" content="John Doe">

Set the viewport to improve the appearance of the website on various devices:

2: Declare character encoding

Use the charset attribute to declare that this page uses UTF-8 character encoding:

<meta charset="UTF-8">

3: Simulate HTTP header fields

Use the http-equiv attribute and content attribute to refresh the document every 30 seconds:

<meta http-equiv="refresh" content="30">

Changes in HTML5

The charset attribute is a new addition in HTML5.

In HTML4, the http-equiv attribute can have multiple different values. In HTML5, only the values mentioned on this page can be used.

The scheme attribute in HTML4 is no longer used in HTML5.

In addition, the meta element is no longer used to specify the language used by the web page. <meta> The HTML5 introduces a method that allows web designers to control the viewport by

You should include the following tag in all web pages to control the viewport. <meta> Viewport element:

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

It provides instructions to the browser on how to control the page size and zoom ratio.

width=device-width Part of the page sets the width to follow the screen width of the device (depending on the device).

When the browser first loads the page,initial-scale=1.0 Part of the settings for the initial zoom level.

Below are examples of a webpage without viewport meta tag and a webpage with viewport meta tag:

Tip:If you are browsing this page on a mobile phone or tablet, you can click on the two links below to view the differences.



Without viewport meta tag


With viewport meta tag

Default CSS Settings

None.

Browser Support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support