Meta HTML

HTML <meta> Tag

To specify the document title, character set, page description, keywords, author, and other meta information, the HTML <meta> element is used.

Example:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="HTML Examples">
<meta name="keywords" content="HTML,CSS,JavaScript">
<meta name="author" content="Codes Java">
</head>
<body>
<p>Hello World!!</p>
</body>
</html>

Output:

Explanation:

In the above example, we added a <meta> element under the <head> tag.

Syntax: To specify the character set used:

<meta charset="UTF-8">

Syntax: To define a page description:

<meta name="description" content="Page description">

Syntax: To specify keywords for search engines:

<meta name="keywords" content="kyeword1, kyeword2, kyeword3, kyeword4">

Syntax: To specify the author of a page:

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

Syntax: To refresh a document every 30 seconds:

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

Set the Viewport:

To take control over the viewport using <meta> tag, the HTML viewport method is used. The area of a webpage which is visible to the user is called Viewport. The viewport can change from device to device. It can appear smaller on mobile phones than computer screens.

Syntax:

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

Parameters:

  • <meta> viewport: Used to specify how to control the page’s dimensions and scaling.
  • width=device-width: Used to set the width of the page according to the screen-width of the respective device.
  • initial-scale=1.0: Used to set the initial zoom level for the page.

Example: Web page without the viewport <meta> tag:

<!DOCTYPE html>  
<html>  
<body>  
<p><b>Check this example on a phone or a tablet.</b></p>  
<img src="img.jpg" alt="sky" width="400" height="300">  
<p>  
Lorem ipsum dolor sit amet..... mazim placerat  
facer possim assum.  
</p>  
</body>  
</html>

Output:

Explanation:

In the above example, we have displayed the view of the page on a phone or a tablet when we don’t use the HTML Viewport method.

Example: Web page with the viewport <meta> tag:

<!DOCTYPE html>  
<html>  
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>  
</head>
<body>  
<p><b>Check this example on a phone or a tablet.</b></p>  
<img src="img.jpg" alt="sky" width="400" height="300">  
<p>  
Lorem ipsum dolor sit amet..... mazim placerat  
facer possim assum.  
</p>  
</body>  
</html>

Output:

Explanation:

In the above example, we have displayed the view of the page in a phone or tablet when we use the HTML Viewport method.

Tag specific Attributes:

Attribute Value Uses
charset character_set Used to define the character encoding of an HTML page.
content text Used to get the value of the “name” or “http-equiv” attribute in an HTML document.
http-equiv Content-type

default-style

refresh

Used to define an HTTP header for the info of the content attribute.
name application-name

author

description

generator

keywords

Used to define the name of the metadata.
scheme format/URL Used to define a scheme in which metadata is described, but this attribute is not supported in HTML5.

Global attributes:

The HTML global attributes are supported by the HTML <meta> tag.

Supporting Browsers:

Chrome, IE, Firefox, Opera and Safari.

Please Share