HTML meta tags or metadata are used to add metadata to a webpage. Usually meta tags are defined in <head> tag as these data are for search engines. Meta Tags were earlier known as meta tags, but in HTML5, the new name is metadata.
Meta tags are used in head to add meta charset, meta description, meta viewport, meta open graph etc.
Meta Tag example
meta charset is used to specify the character encoding of webpage. It is compulsory to declare meta charset in a webpage.
For Windows OS, the default value for meta charset is windows-1252.
UTF-8 or Unicode Transformation Format is the the most popular charset. UTF-8 can render almost all characters like alphabets, numbers, greek, devnagri, spanish, french, chinese etc. UTF-8 is also the default charset of Chrome Browser.
As per W3C, meta charset is compulsory in a webpage.
Meta description is the metadata used to declare description for search engines. Almost all search engines used meta description to know description of a webpage.
It is recommended to used meta description in head for search engines. The recommended character length for meta description is 160 characters.
Meta Description example
<meta name="description" content="type your description here">
Meta description on google search engine
Meta Viewport is used in head. Viewport means the visible part of screen on any device.
Meta viewport is used in Responsive Web Design to control the width, scaling and user scablility.
Without viewport, browser display a webpage as per the actual screen size. But meta viewport adjust the screen fonts as per the device pixel ratio. This means, we can see same desktop font on mobile device without zooming.
Meta Viewport Examaple
Viewport for most of the sites
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Viewport for the sites with no zoom
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
Viewport Width Vs Actual Width
|Device||Viewport Size||Actual Size|
|Iphone 8 Plus||414*736||1080*1920|
|Ipad (9.7 inch)||768*1024||1536*2048|
|Samsung Galaxy S8, S9||360*740||1440*2960|
|Macbook Pro (13 inch)||1280*800||2560*1600|