HTML Meta Tag

Metadata is information about data. The tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable. Meta elements are used to specify the page description, keywords, author of the document, last modified and other metadata.

How to use Meta tags:

<meta> tags are always go inside the <head> element.

Metadata is always passed as name/value pairs.

How to set viewport using Meta:

HTML5 introduced a method to let web designers take control over the viewport, through the <meta> tag.

The viewport is the user's visible area of a web page. It varies with the device, and will be smaller on mobile than on computer screen.

You should include the following <meta> viewport element in your web pages:

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

A <meta> viewport element gives the instruction to browser how to control the page's dimensions and scaling.

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

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

Following are some specific syntaxes of meta tag which shows the different uses of meta tag:

<meta charset="utf-8">

"utf-8" character defines the character encoding, It means it will support to display text in any language.

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

It specifies the list of keyword which is used by search engines.

<meta name="description" content="HTML tutorials">

It defines the website description which is useful to provide relevant search performed by search engines.

<meta name="author" content="Rajendra A">

It specifies the author of the page.

<meta name="refresh" content="50">

This specifies to provide instruction to the browser to automatically refresh the content after every 30sec or any given time.

<meta http-equiv="refresh" content="5; url=https://www.tutorialsmint.com/html-tutorial">

This meta specifies to redirect to the url after 5sec.

Example
<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <meta name="keywords" content="PHP, HTML, CSS, JavaScript, Angular, Tutorials">  
    <meta name="description" content="HTML tutorials">  
    <meta name="author" content="Rajendra A">  
    <meta http-equiv="refresh" content="5; url=https://www.tutorialsmint.com/html-tutorial">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">    
</head>  
<body>  
<h2>Example of Meta tag</h2>  
<p>This example shows the use of meta tag within an HTML document</p>  
</body>  
</html>