HTML5 Meta Tags
HTML5 Meta Tags
HTML5 Meta Tags are generally used to add information about the document. It is a good programming practice to include metadata in our code that is nothing but information about the HTML document.
A closing tag does not follow the meta tag, but it contains information within its attributes. <meta> elements are not visible to the website viewer, but they are readable by the browser.
From a technical standpoint, meta tags will not be visible to your website’s visitors, so it doesn’t matter whether you place them in your code or not.
Here is the code to embed meta elements in your HTML5 code.
Example
<!DOCTYPE html>
<html>
<head>
<title>
HTML5 Meta Tags
</title>
<meta charset="UTF-8">
<meta name="description" content="Free training of web development">
<meta name="keywords" content="HTML,CSS, and JavaScript">
<meta name="author" content="Vinay Singh">
</head>
<body>
<p>All meta information goes in the head section...</p>
</body>
</html>
The output of this code will be
Adding HTML5 Meta Tags in your document
You can add meta tags in your HTML5 code by putting meta tags inside your document’s header. Meta tags can have the following attributes apart from their core attributes.
Attributes and Descriptions
-
Name
Name for the property can be author name, application name, or description
-
Content
It assigns the property’s value
-
Scheme
Defines a scheme to interpret the property value as we’ve discussed in the content attribute
-
HTTP-equiv
This attribute is generally used for refreshing the page or for configuring a cookie. Values that it can take are content-type, refresh, and set-cookie.
Specifying Keywords
HTML Meta tags can be used for specifying search keywords related to the document, and these keywords are then be used by a Google search bot to index your web page.
Example
The following example shows how to use HTML5 meta tags to specify keywords of your website.
<!DOCTYPE html>
<html>
<head>
<title> HTML5 Meta Tags Example</title>
<meta name="keywords" content="HTM, CSS, and JAVASCRIPT" />
</head>
<body>
<p> How to use meta tags to specify keywords </p>
</body>
</html>
The output of this code will be
Document Description
HTML5 Meta Tags allow you to include a short description of your document. It is also used by many search engines while crawling web pages.
Example
<!DOCTYPE html>
<html>
<head>
<title>
HTML5 Meta Tags
</title>
<meta name="keywords" content="HTM, CSS, and JAVASCRIPT" />
<meta name="keywords" content=“Learn web development for free" />
</head>
<body>
<p> How to use meta tags for document desciption </p>
</body>
</html>
The output of this code will be
Document Revise Date
HTML5 Meta Tags allow you to specify when your document was updated? This information helps many web browsers to refresh your web page accordingly.
Example
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name="keywords" content="HTM, CSS, and JAVASCRIPT" />
<meta name="keywords" content="Learn web development for free" />
<meta name="revised" content="Vish Academy, 15/10/21" />
</head>
<body>
<p> How to use meta tags for specifying document revision date </p>
</body>
</html>
The output of this code will be
Document Refreshing
A <meta> tag allows you to set the duration after which your page will refresh automatically.
Example
The following code will refresh your code after every 10 seconds.
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Meta Tags Example</title>
<meta name="keywords" content="HTM, CSS, and JAVASCRIPT" />
<meta name="keywords" content="Learn web development for free" />
<meta name="revised" content="Vish Academy, 15/10/21" />
<meta http-equiv=“refresh” content=“10” />
</head>
<body>
<p> How to refresh web page after every 10 seconds </p>
</body>
</html>
The output of this code will be
Page Redirection
<meta> tags can be used to redirect your web page to another page.
Example
Following is a code to redirect your web page after every 10 seconds.
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name="keywords" content="HTM, CSS, and JAVASCRIPT" />
<meta name="keywords" content="Learn web development for free" />
<meta name="revised" content="Vish Academy, 15/10/21" />
<meta http-equiv=“refresh” content=“10; url=https://www.vishacademy.com” />
</head>
<body>
<p> This meta tag will redirect your web page to another website after every 10 seconds </p>
</body>
</html>
The output of this code will be
Specify Character Set
You can specify which character sequencing you’ll use in your document by using meta tags.
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name="keywords" content="HTM, CSS, and JAVASCRIPT" />
<meta name="keywords" content="Learn web development for free" />
<meta name="revised" content="Vish Academy, 15/10/21" />
<meta http-equiv=“content-type” content=“text/html; charset=UTF-8” />
</head>
<body>
<p> This meta tag will specify the character sequencing </p>
</body>
</html>
The output of this code will be
Setting the Viewport
The viewport is an area of our webpage that is visible to the website viewer. It adjusts its size according to the device.
To make your web page work smoothly on all the devices, including the below-mentioned meta tag in all your web pages:
<meta name=”viewport” content=”width=device-width initial-scale =1.0”>
This meta element will instruct the browser on how to control the page’s dimensions.
The width=device-width will tell your web page to occupy the full-screen width that depends on the device.
The initial-scale=1.0 instructs the browser on how much to zoom the page when it is first loaded.
To learn more about meta tags, read the documentation.
<!DOCTYPE html>
<html>
<सिर>
<शीर्षक>मेटा टैग उदाहरण</शीर्षक>
<मेटा नाम = “कीवर्ड” सामग्री = “एचटीएम, सीएसएस, और जावास्क्रिप्ट” />
<मेटा नाम = “कीवर्ड” सामग्री = “मुफ्त में वेब विकास सीखें” />
<मेटा नाम = “संशोधित” सामग्री = “विश अकादमी, 15/10/21” />
<मेटा http-equiv = “ताज़ा करें” सामग्री = “10; url=https://www.vishacademy.com”/
</सिर>
<शरीर>
<p> यह मेटा टैग हर 10 सेकंड के बाद आपके वेब पेज को दूसरी वेबसाइट पर रीडायरेक्ट करेगा </p>
</body>
</html>