The HTML <meta> tag

Omkar Arora | 24 Nov 2020 | 3 min read

The <meta> tag is used to define the metadata about the HTML document. Metadata is data or information about the data. The <meta> tag is written inside the <head> tag.

meta tag

The <meta> tag can have the following attributes —

  1. http-equiv : If the name attribute is set, document-level metadata is provided.
  2. name : If the http-equiv attribute is set, the meta element is a pragma directive, providing information equivalent to what can be given by a similarly-named HTTP header. In simple terms, it indicates the program to perform an action.
  3. charset : If the charset attribute is set, the meta element is a charset declaration, giving the character encoding in which the document is encoded. Most common charset used is UTF-8 and is understood by all common browsers. Check IANA character sets for all available character encodings.
  4. content : This attribute contains the value for the http-equiv or name attribute, depending on which is used.
  5. itemprop : This attribute is available for every HTML element and when used with <meta> tag the meta element provides user-defined metadata. An itemprop consists of a name-value pair. Each name-value pair is called a property, and a group of one or more properties forms an item.

Few examples -

charset : In the below example we set the character encoding to UTF-8.

<head>
   <meta charset="UTF-8">
<head/>

http-equiv : This example will refresh the document very 30 seconds.

<head>
   <http-equiv="refresh" content="30">
<head/>

name : One of the more common use cases for using the name attribute is used to set the viewport. The viewport is the user’s visible area of a web page and varies from one device to another. Setting the viewport is ensures that the website looks good on all devices.

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

The basic Emmet HTML preset looks like this -

meta tag

As you can see above, two <meta> tags are used. One for defining the charset, and the second defines the viewport. These two can be termed as the more important <meta> tags that should be defined.

<meta> tags for SEO

ASEO stands for Search Engine Optimization. SEO is important for your website to be viewed and listed higher in search results so as to get more traffic. SEO can be improved by using tags in your website.

Some important tags for SEO are -

  1. Meta charset
  2. Meta title
  3. Meta description
  4. Meta refresh redirect
  5. Meta viewport

Learn more about emmet here

To learn more about the <meta> tag and to check browser compatibility visit the MDN web docs

You can find more examples here