Include meta data in an HTML document


To include meta data in an HTML document, we use <meta> tag. Metadata provides important information about HTML document. It is used to add value pairs for describing the properties of HTML documents, like document author, list of keywords, expiry date, author name, etc.

The meta data consists of only one tag, opening tag <meta>. Meta data carries information within its attributes. The <meta> tag does not change the physical appearance of document, even though we include one or more meta tags in a web document based on information.

Syntax

The following is the usage of meta tag in HTML −

<meta attribute-name="value">

Features

Following are the important points to be remember while using <meta> tag.

  • <meta> data in HTML is not visible, but they can have parsed by machine.

  • It simply helps us to give additional information about HTML document.

  • We are adding <meta> tags for the purpose of Search Engine Optimization.

  • The <meta> tags are used by web browsers, search engines, and other web sites.

  • we will write meta tags inside head section.

Attributes of Meta tag

Following are the attributes used by <meta> tag to perform operations.

  • name − Defines the name of the property.

  • http-equiv − It is used to get HTTP response message header.

  • content − It specify properties value.

  • charset − It specifies a character encoding for an HTML file.

  • scheme − It determines a scheme which can be utilized to decipher the value of the substance attribute.

Example

Following is the example, which demonstrates the usage of <meta> tag −

<html>
<head>
   <title>HTML meta tag</title>
   <meta name="keywords" content="HTML, meta tag, metadata" />
   <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">
   <meta name="description" content="Description of the document" />
   <meta http-equiv="refresh" content="10" />
</head>
<body style="background-color:orange">
   <p> Meta data used to add value pairs for describing the properties of HTML documents, like document author, list of keywords, expiry date, author name, etc.</p>
</body>
</html>

There are different ways to implement the <meta> tag which can use the following attribute values −

  • Highlighting Important Keywords:

  • Providing a Description of the web page:

  • Document Revision Date:

  • Automatic Refresh:

  • Specifying Author of the Webpage:

Highlighting important keywords

The meta tag provides keywords which are present on the web page that are utilized by the web browser to allocate ranking to the page based on searches. For optimizing the SEO rank of content we use Search Engine Optimization.

Example

In the following is the example, we are trying to highlight the keywords −

<!DOCTYPE html>
<html>
<head>
   <meta name="keywords" content="Meta Tags, Metadata" />
</head>
<body>
   <p>Welcome to TutorialsPoint</p>
</body>
</html>

Providing description to web page

The short description of web pages can be included in meta tag, which helps in ranking the pages on Internet.

Example

In the following example we are trying to provide website description using <meta> tag −

<!DOCTYPE html>
<html>
<head>
   <!-- meta tag starts -->
   <meta name="keywords" content="Meta Tags, Metadata" />
   <meta name="description" content="Tutorials Point is a leading Ed Tech company " />
   <!-- meta tag ends -->
</head>
<body>
   <p>TutorialsPoint.com</p>
</body>
</html>

Document Revision Date

The <meta> tag can also provide information about last updated document also, which helps to different web browsers when refreshing the web page.

Example

In here, we are trying to retrieve the information about the last updated using the <meta> tag −

<!DOCTYPE html>
<html>
<head>
   <meta name="keywords" content="Meta Tags, Metadata" />
   <meta name="description" content="Learn about Meta Tags." />
   <meta name="revised information" content="last updated time" />
</head>
<body>
   <p>TutorialsPoint WebSite</p>
</body>
</html>

Automatic Refresh

The <meta> tag is used to refreshing automatically the web pages after given duration. A particular time is mentioned in <meta> tag after which webpage has to be automatically refreshed.

Example

Following is the example to include refresh attribute value in <meta> tag.

<!DOCTYPE html>
<html>
<head>
   <meta name="keywords about" content="Meta Tags, Metadata" />
   <meta name="description" content="Knowing about Meta Tags." />
   <meta name="revised about" content="Tutorials" />
   <meta http-equiv="refresh" content="8" />
<body>
   <p>TutorialsPoint WebSite</p>
</body>
</html>

Mentioning the author of Webpage

If we want to mention the author of web page, we use <meta> tag.

Example

Following is the example to include author name as attribute value in <meta> tag.

<!DOCTYPE html>
<html>
<head>
   <meta name="keywords used " content="Meta Tags, Metadata" />
   <meta name="description about" content="Meta tags." />
   <meta name="author" content="Bhanu Priya" />
</head>
<body>
   <p>TutorialsPoint WebSite</p>
</body>
</html>

Updated on: 10-Oct-2023

213 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements