HTML Meta Element

Metadata is data that describes data, and HTML has an “official” way of adding metadata to a document — the <meta> element. Of course, the other stuff we are talking about in this article could also be thought of as metadata too. 

There are a lot of different types of <meta> elements that can be included in your page’s <head>, but we won’t try to explain them all at this stage, as it would just get too confusing. Instead, we’ll explain a few things that you might commonly see, just to give you an idea.

<meta charset="UTF-8">

The charset attribute specifies the character encoding. In this example, we have set it to “UTF-8” which means it can handle to display any language.

<meta name="description" content="Free Web tutorials">    

If you give a meta description then it will be useful for the relevant search to perform by search engines.

<meta name="keywords" content="HTML, CSS, XML, JavaScript">

The keyword value is also used to provide keywords for a search engine, but it may ignore by browser due to spammers.

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

The author value specifies the name of the person who wrote the page content, and it is useful to automatically extract author information by some content management systems.

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

Meta refresh is used to provide instructions to the browser to automatically refresh the page after the given time interval. As in above example, it will automatically refresh after 30 sec.

<meta http-equiv= "refresh" content= "10; url= https://www.javatpoint.com/html-head>

If you add an URL with content value, then it will redirect to that page after the time limit will over.

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="UTF-8">  
<meta name="description" content="Free Web tutorials">  
<meta name="keywords" content="HTML,CSS,XML,JavaScript">  
<meta name="author" content="Akon">  
</head>  
<body>  
<p>All the meta information are set.</p>  
</body>  
</html>   

Above example illustrate all the meta tag like charset, description, keywords and author.


Use Meta <meta> Tag to Set The Viewport

This method is introduced in HTML5 to take control over the viewport by using <meta> tag.

Viewport is the user’s visible area of a webpage. It changes from device to device and appears smaller on mobile phones than computer screens.

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

Here, the <meta> viewport element specifies how to control the page’s dimensions and scaling.

The width=device-width is used to set 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 is used to set the initial zoom level when the page is first loaded by the browser.

<html>
   <head>
      <title>This Page Title</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
   </head>
   <body>
      <p> Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy</p>      
   </body>
</html>  

To see the difference clearly, open this page on a smartphone or tablet.