HTML <meta> Tag

We will look at HTML Tag meta with examples in this post. It should meet the learning needs.

The HTML <meta> tag is a metadata element that provides information about a web page. It is placed within the <head> section of an HTML document and is not visible to the user.

Metadata within HTML documents can be described as follows:


<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="description" content="Tutorials on the Web for free"> <meta name="keywords" content="HTML, CSS, Python"> <meta name="author" content="Mr Example"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <h1>Welcome To Mr Examples</h1> </body> </html>

Search engine keywords are classified as follows:


<!DOCTYPE html> <html> <head> <meta name="keywords" content="Python, HTML, Flutter"> </head> <body> <h1>Welcome To Mr Examples</h1> </body> </html>

Provide a brief description of your website as follows:


<!DOCTYPE html> <html> <head> <meta name="description" content="Learn Python and HTML for free with examples"> </head> <body> <h1>Welcome To Mr Examples</h1> </body> </html>

A page’s author can be stated as follows:


<!DOCTYPE html> <html> <head> <meta name="author" content="Mr Example"> </head> <body> <h1>Welcome To Mr Examples</h1> </body> </html>

The document should be refreshed every 45 seconds as follows:


<!DOCTYPE html> <html> <head> <meta http-equiv="refresh" content="45"> </head> <body> <h1>Welcome To Mr Examples</h1> </body> </html>

You can make your website look good on all devices by setting the viewport as follows:


<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <h1>Welcome To Mr Examples</h1> </body> </html>

Here is example of the <meta> tag with all of its uses:


<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="robots" content="index, follow"> <meta name="keywords" content="example, website, html, metadata"> <meta name="description" content="This is an example website that demonstrates the use of various types of meta tags in HTML."> <meta name="author" content="Mr Example"> <meta name="publisher" content="Mr Example"> <meta name="copyright" content="Copyright © 2023 Mr Examples"> <meta name="language" content="en-US"> <meta name="revised" content="Monday, January 19th, 2023, 5:00 pm"> <meta http-equiv="refresh" content="3600"> <title>Mr Examples</title> </head> <body> <h1>Welcome To Mr Examples</h1> </body> </html>

Tag Meta Usage

The Tag meta <meta> specifies metadata for an HTML document. The term metadata refers to data (information) about data.

The <meta> tags are generally included within the <head> element. They are primarily used to identify the character set, page details, keywords, author of a document and viewport settings.

The metadata will not appear on the page but will be processed by the computer.

The browser relies on metadata (to determine how to render content or reload pages), search engines (keywords), and various web services.

A Tag <meta> gives web designers access to the viewport (the area visible to users) via the <meta> tag (for an example, see “Setting The Viewport” below).

Sure, here are some common uses of the HTML <meta> tag :

  1. Describing the web page for search engines and social media shares.
  2. Specifying the character encoding used in the document.
  3. Setting the viewport for mobile devices.
  4. Controlling search engine indexing and following or nofollowing links.
  5. Providing author information for the web page.
  6. Specifying relevant keywords for search engine optimization (SEO).
  7. Redirecting the user to a different page after a specified amount of time.



The Tag <meta> includes the Global Attributes in HTML.

Attributes List

contenttextProvides the value that corresponds to the http-equiv or name attributes.
charsetcharacter_setThis attribute indicates the character encoding used in HTML documents.
Incorporates content attribute information into an HTTP header.
Indicates the metadata’s name.

Configuring the Viewport

A viewport is a web page section presented to the user when discussing Tag <meta>.

A mobile phone display will be narrower than a computer display – the size differs with the device. Every time you create a web page, you will need to use the following <meta> element:

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>.

The browser uses these guidelines to manage the dimensions and scaling of the page.

It enables the width of the page to be determined by the screen-width of the device (which will differ from device to device).

As soon as the browser retrieves the page, the initial-scale=1.0 part determines the zoom level.

The following is an example of a web page lacking the viewport meta tag and the same web page containing it – Please click on the two links at the bottom to see the variations if you are viewing this page on a phone or tablet.

Without the
viewport meta tag

With the
viewport meta tag

Tip: Learn more about Tag meta in our forthcoming Responsive Web Design – The Viewport Tutorial.

Browser Compatibility


HTML <meta> Tag Advantages

Here are some advantages of using the HTML <meta> tag:

  • By using the <meta> tag to specify relevant keywords and descriptions for the web page, web developers can improve its visibility in search engine results pages (SERPs) and drive more traffic to the site.
  • By setting the viewport using the <meta> tag, web developers can ensure that the web page is displayed properly on mobile devices, which improves the user experience and reduces bounce rates.
  • By specifying the character encoding using the <meta> tag, web developers can ensure that special characters and symbols are displayed correctly on the web page, which improves its readability and usability.
  • By providing alternative text for images and other media using the <meta> tag, web developers can improve the accessibility of the web page for users with disabilities.
  • By using the <meta> tag to specify caching policies and other performance optimizations, web developers can improve the loading times of the web page, which enhances the user experience and reduces bounce rates.
If you find this article informative, do share this meaningful information with your friends by clicking on the links below.
We value your feedback.

Subscribe To Our Newsletter
Enter your email to receive a weekly round-up of our best posts. Learn more!

Leave a Reply

Your email address will not be published. Required fields are marked *