What are the different tags to define special meta information in HTML page?

HTML Web Development Front End Technology

Metadata means information about data. The <meta> tag in HTML provides complete information about HTML Document.

Adding the meta tag while making the webpage or website is a good practice because search engines use this meta tag to understand the information about the website. It is also helpful while searching for a specific website, then the result page will display in search results. These tags are basically used to add author name, value pairs to describe properties of HTML documents, such as expiry date, author name etc. i.e.., it is used to specify a character set, page description and viewport settings.

The attribute of this tag carries all the information related to the web page.

We can include one or more meta tags depending on information, it doesn’t affect the physical appearance of the web document.

The <meta> tag accepts four attributes.

Name − It is used to define the name of the property.
http-equiv − It is used to get the HTTP response message header.
Content − It is used to specify properties value.
Charset − It is used to specify a character encoding for an HTML file.

The <meta> tag contents are not visible on your browser. They are just added to give additional information about the HTML document.

The <meta> tags are added to our HTML document for the purpose of Search Engine Optimization.

The <meta> tag is added inside the <head>.

Syntax

Following is the syntax for the meta tag in HTML.

<meta attribute-name="value">

Example 1

Here are the different ways to add meta information and use the <meta> tag – for example,

Keywords− The value corresponding to the attribute defined the keywords for search engine.

<meta name="keywords" content="HTML, CSS, JavaScript">

Character Set− The value corresponding to the attribute defined the character_set – character encoding for the HTML document.

<meta charset="UTF-8">

Following is the example for the meta tag in HTML, adding the meta information of keywords and character set.


<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta name="keywords" content="meta tag">
</head>
<body>
   <p>In this example we have added two meta tags. For</p>
   <ol>
      <li>character_set</li>
      <li>keyword</li>
   </ol>
   <p>Meta tag contents are not visible on your browser.They are just added to give additional information about the HTML document. The mata tag is added inside the head tag</p>
</body>
</html>

Following is the output for the above example program.

Example 2

Here are the different ways to add meta information and use the <meta> tag – for example,

Author− Use the following syntax to add the author of the web page.

<meta name="author" content="Amit">

Description− Use the following syntax to define the description of the web page.

<meta name="description" content="Learn from Text and Video Tutorials">

Following is the example for the meta tag in HTML.


<!DOCTYPE html>
<html>
<head>
   <meta name="description" content="meta tag in HTML">
   <meta name="author" content="lokesh">
</head>
<body>
   <p>In this example we have added two meta tags. For</p>
   <ol>
      <li>description</li>
      <li>author name</li>
   </ol>
   <p>Meta tag contents are not visible on your browser. They are just added to give additional information about the HTML document. The mata tag is added inside the head tag</p>
</body>
</html>

Following is the output for the above example program.

Example 3

Following is the syntax for the meta tag in HTML.

Refresh− The value corresponding to the attribute defined the refresh − refresh the document for every specified time in seconds.

<meta http-equiv="refresh" content="30">

Viewport− The value corresponding to the attribute defined the viewport – layout changes based on the size and capabilities of the device.

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

Following is the example for the meta tag in HTML.


<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="refresh" content="30">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
   <p>In this example we have added two meta tags. For</p>
   <ol>
      <li>refresh - for refreshing the page </li>
      <li>viewport - layout changes based on the size and capabilities of the device </li>
   </ol>
   <p>Meta tag contents are not visible on your browser. They are just added to give additional information about the HTML document. The mata tag is added inside the head tag</p>
</body>
</html>

Following is the output for the above example program.

We can include one or more meta tags depending on information, it doesn’t affect the physical appearance of the web document.

Example 4

Here are the different ways to add meta information and use the <meta> tag – for example,

Author− Use the following syntax to add the author of the web page.

<meta name="author" content="Amit">

Description− Use the following syntax to define the description of the web page.

<meta name="description" content="Learn from Text and Video Tutorials">

Keywords− Use the following syntax to add keywords to the web page.

<meta name="keyword" content="Java, WordPress, Drupal, Android, iOS">

To set viewport− Viewport is used to control layout on mobile browsers. It is used inside the <meta> tag to give the browser instructions on how to work for controlling the web page’s dimensions and scaling.

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

Following is the example for the meta tag in HTML.


<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta name="description" content="meta tag in the web document">
   <meta name="keywords" content="HTML,CSS">
   <meta name="author" content="lokesh">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
   <p>Meta tag contents are not visible on your browser. They are just added to give additional information about the HTML document. </p>
</body>
</html>