HTML Meta Tags and Attributes | HTML Tutorial

You already know about HTML <meta> tag from our previous chapters. The <head> element contains this tag.

In this tutorial, we will know about HTML meta tag and its attributes in detail.


What is HTML Meta Tag?

The HTML <meta> tag provides metadata about the HTML document.

Browsers do not display metadata in the webpage. It specifies additional information about a document in a variety of ways.

The HTML <meta> element is used to define character set of the document, page description, keywords, author, and other metadata.

This information is useful for browsers, search engines, and other web services.

This tag is an empty element. It does not have any closing tag but carries different attributes to hold information.

This is very important in case of SEO (Search Engine Optimization). Adding those metadata is also known as on-page SEO.


Adding HTML Meta Tags to Documents

You can add your metadata by adding HTML <meta> tag inside the <head> element of your document.

This tag does not have any closing but can have following attributes:

  • Name attribute: This attribute defines the name of a property. It can contain different values e.g. keywords, description, revised, author, category etc.
  • Content attribute: This attribute is used to define properties value.
  • Scheme attribute: This attribute defines the scheme to interpret the property’s value in which metadata is described.
  • http-equiv attribute: This attribute is used to get http response message header. It can be used to refresh the page or to set a cookie.

Specifying HTML Meta Keywords

To specify keywords to your HTML document, you have to use two attribute in <meta> tag.

These attributes are name and content. The name attribute contains the property value and the content attribute contains the keywords you want to add to your document.

Here, the property value is “keywords” and content may be anything you want related to your document.

Meta keywords are very important for search engines. They use those keywords while indexing a webpage for searching purpose.

<!DOCTYPE html>
<html>
   
   <head>
      <title>Meta Tags Example</title>
      <meta name = "keywords" content = "HTML Meta, Meta Tags, Metadata" />
   </head>
   
   <body>
      <p>Hello World!!!</p>
   </body>
   
</html>

The output shows in a web browser:

Hello World!!!


HTML Meta Description

Adding Meta description is almost the same as adding meta keywords to your HTML document.

Here you also have to use same two attributes i.e. name and content.

The difference is here property value is “description” that will go inside name attribute.

Main description will go inside the content attribute.

<!DOCTYPE html>
<html>

   <head>
      <title>Meta Tags Example</title>
      <meta name = "keywords" content = "HTML Meta, Meta Tags, Metadata" />
      <meta name = "description" content = "Short description about your document will go here..." />
   </head>
	
   <body>
      <p>Hello World!!!</p>
   </body>
   
</html>

The output shows in a web browser:

Hello World!!!


Setting HTML Meta Viewport

New feature has introduced in HTML5 to let designers take control over the viewport, through the <meta> tag.

The viewport is the visible area of a web page. It’s size is different for different devices.

The size will be smaller on a mobile phone than on a computer screen.

You have to include the following code in the <head> section of your HTML document.

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

This code will control web page width to adept with the device screen. If device screen is large, page width will be large. However, if device screen is small, page width will be small too.

The width=device-width part sets the width of the page to follow the screen-width of the device (which is different depending on the device).

The initial-scale=1.0 part sets the initial zoom level when the page first loads by the browser.


HTML Document Refreshing

You can set a specific duration after which your web page will keep refreshing automatically.

If you need this for your document, you can add the following code to that document.

This code will refresh your page after every 5 seconds. However, you are allowed to change the number according to your requirement.

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

It contains http-equiv attribute with the value “refresh” and content attribute with the number of second that you want to use for your page.


Setting Author Name

You can add an author name in a web page by using HTML meta tag.

Include the following code to set an author name in your document.

<meta name = "author" content = "Your name will go here..." />

Specify Character Set

The charset attribute defines the character encoding for the HTML document.

To add character set in your document, use the following code:

<meta charset="UTF-8">

Here, charset is the only attribute used with a character encoding.

There are many character encoding values available. However, most common values are:

  • UTF-8 – Character encoding for Unicode
  • ISO-8859-1 – Character encoding for the Latin alphabet

Note: you will find all the available character encodings, in this link IANA character sets.


Document Revision Date

The HTML <meta> tag can specify information about the last update of the document.

To add the revision date in your document include the following code:

<meta name = "revised" content = "last updated time" />

Time to practice

OUTPUT

You can read more about HTML Headings, our tutorial – HTML Headings