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>
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 that is visible to the user is called Viewport. The viewport can change from device to device. It can appear smaller on mobile phones than on 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>
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>
Explanation:
In the above example, we have displayed the view of the page on 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.