HTML meta Tag

  • HTML <meta> tag is used to provide structured metadata about a web page. meta data contains information about a document in a variety of ways.

  • The <meta> tag does not display into body part of the web page. They are part of a web page head section.

  • One or more meta elements with different attributes can be used on the same web page.

  • The <meta> tag is used to specify page description, keywords and other important information. It's help to optimize the web page on search engine. This process known as search engine optimization (SEO).

Example

Specifies keywords attributes this was popular for search engines.

<!DOCTYPE html>
<html>
<head>
  <title>HTML meta tag</title>
  <meta name="keywords" content="html, html tutorial, html5"/>
</head>
<body>
  ...
  ...
</body>
</html>

Unlike the keywords attribute, the description attribute is supported by all major search engines.

<!DOCTYPE html>
<html>
<head>
  <title>HTML meta tag</title>
  <meta name="description" content="HTML tutorials includes HTML Tags, Examples."/>
</head>
<body>
  ...
  ...
</body>
</html>

Define the author attribute that specifies author name of the page.

<!DOCTYPE html>
<html>
<head>
  <title>HTML meta tag</title>
  <meta name="author" content="Zenia Sroll"/>
</head>
<body>
  ...
  ...
</body>
</html>

Define the viewport attribute, which gives various predefined sizes and options that help you to best view on all devices. Here width=device-width specifies page follow device screen width and initial-scale=1.0 specifies initial zoom level 1 when page load.

<!DOCTYPE html>
<html>
<head>
  <title>HTML meta tag</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
  ...
  ...
</body>
</html>

<meta> Tag Attributes

HTML <meta> tag support following specific attributes.

Attributes Value Description
charset charset Specify the document character encoding.
<meta charset="UTF-8"/>
content text Specifies the value for the http-equiv or name attribute.
http-equiv content-type
refresh		 Specifies the name of a HTTP header for the value of the content attribute.

content-type Specify the MIME type of the web page. 
<meta http-equiv="content-type"
      content="text/html; charset=UTF-8"/>

refresh Specify the time interval for the web page to reloaded itself. 
<meta http-equiv="refresh" content="15"/>
name application-name
author
description
generator
keywords
viewport		 Specifies the name of document metadata.
<meta name="keywords"
  content="html, html tutorial, html5"/>
<meta name="description"
  content="HTML tutorials includes HTML Tags, Examples."/>
<meta name="author"
  content="Zenia Sroll"/>
<meta name="viewport"
  content="width=device-width, initial-scale=1.0"/>

Global Attributes

HTML <meta> tag does not support any global attributes.

Event Attributes

HTML <meta> tag does not support any event attributes.

Browser Compatibility

  • Google Chrome
    Yes
  • Mozilla Firefox
    Yes
  • Microsoft Edge
    Yes
  • Opera
    Yes
  • Safari
    Yes