HTML5 Meta Tags

meta tags define metadata of HTML page. Metadata refers to data (additional information about a page in a variety of ways) about its content. Although metadata is not displayed on the page, it can be machine parsed and used by search engines (keywords), browsers (how do you display content or reload the page), and other web services.

Insert Meta tag in the HTML page

Only the HTML document’s head section can contain meta tags. Based on the information you wish to include in your document, you can include one or more meta tags.

<!DOCTYPE html>
  <html>
    <head>
      <title>Meta Tags Example</title>
      <meta name="description" content="Buy men women clothes online in cheapest price">
      <meta name = "keywords" content = "mens t-shirts, ladies t-shirt, kids wear, mens jeans, girls top, girls jeans" />
    </head>
    <body>
      <p>Welcome to my online shop, guys.</p>
    </body>
  </html>

Attribute Support

Meta tag supports global attributes and event attributes in HTML

Usage

You can use meta tags for many purposes, such as…

Provide content-related keywords to the page : 

<meta name = "keywords" content = "mens t-shirts, ladies t-shirt, kids wear, mens jeans, girls top, girls jeans" />

A brief description of the page that is content-related :

<meta name="description" content="Buy men women clothes online in cheapest price">

Declaring character Encoding in HTML : 

<meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8" />

Setting up the viewport on mobile devices :

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

Refresh document after a certain time period :

<meta http-equiv = "refresh" content = "10" />

Set Cookies with Expiry date-time :

<meta http-equiv = "cookie" content = "id = 321; expires = Saturday, 31-Jul-22 23:59:59 GMT;" />

Set Page Author Name

<meta name = "author" content = "Vinay Singh" />

When you add all the meta tags in your HTML page, it seems like this:

<!DOCTYPE html>
  <html>
    <head>
      <title>Meta Tags Example</title>
      <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv = "refresh" content = "300" />
      <meta name="description" content="Buy men women clothes online in cheapest price">
      <meta name = "keywords" content = "mens t-shirts, ladies t-shirt, kids wear, mens jeans, girls top, girls jeans" />
      <meta http-equiv = "cookie" content = "id = 321; expires = Saturday, 31-Jul-22 23:59:59 GMT;" />
      <meta name = "author" content = "Vinay Singh" />
    </head>
    <body>
      <p>Welcome to my online shop, guys.</p>
    </body>
  </html>

The above are some common and important meta tags used by almost all websites, but these are not all. You may see more meta tags like open graph meta tags that are used for social media linking and data sharing.

Next Lesson » « Previous Lesson