Things you don’t know about HTML meta tag.
A quick guide to explain how meta tag works in HTML
So the big question remains unanswered after all the years of web development career when someone asked me in an interview that
“What are the meta tags in HTML?”
Well for a moment I got confused “meta tags?” that's strange. Because in 4 years of my career as a frontend developer, I have known that there is only one meta tag and that we use for SEO purpose (for adding keywords description, etc.) So I answered the interviewer the same but he did not okay with it. It got me thinking that I am missing something major or I am not being attentive to the fact of the importance of meta tag in HTML architecture. I started googling the terms and found some interesting things about the meta tag which I will try to elaborate on in this article.
Meta tag which is always found in the head element of the HTML typically used to specify a character set, page description, keywords, author of the document, and viewport settings. This information is called metadata. Metadata does not render on the page but it is machine-readable.
So I was correct when I answered about metadata but the interviewer was expecting me to tell about the attributes of meta tags. Well, I have known only two attributes at that time skeptically which are keywords and descriptions. Most of the seasoned developers unaware of the attributes of the meta tags because generally, they use boilerplate code or readymade template.
below is an example of how a meta tag is added in the HTML
<head>
<meta charset=”UTF-8">
<meta name=”description” content=”Free Web tutorials”>
<meta name=”keywords” content=”HTML, CSS, JavaScript”>
<meta name=”author” content=”John Doe”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0">
</head>Charset, name, content are the attributes and these attributes have values that are pre-defined or undefined, collectively attributes and values referred to as metadata.
Charset attribute has character_set value which specifies the character encoding for the HTML document. These values are predefined.
Name attribute has many predefined values e.g. application-name, author, description, generator, keywords, viewport, etc. This attribute extended with content attributes and values is relative to the name attribute. Check out more example below,
<meta name="keywords" content="HTML, CSS, JavaScript">The above meta tag define keywords for search engines.
<meta name="description" content="Free Web tutorials for HTML and CSS">This meta tag defines a description of your web page.
<meta name="viewport" content="width=device-width, initial-scale=1.0">This meta tag sets the setting for the viewport to make your website look good on all devices. The width=device-width part sets 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 part sets the initial zoom level when the page is first loaded by the browser.
The meta tag is useful in storing and setting cookies data
<meta http-equiv="refresh" content="30">Above meta tag refresh document every 30 seconds.
<meta http-equiv = "cookie" content = "userid = xyz; expires = Wednesday, 01-dec-20 23:59:59 GMT;" />Cookies are data, stored in small text files on your computer and it is exchanged between the web browsers and web servers to keep track of various information based on your web application need.
You can use <meta> tag to store cookies on the client-side and later this information can be used by the webserver to track a site visitor.
So I sketched some important elements of the meta tag. For more information, you can check out the MDN link.
Thanks for the reading. Cheers!
