BLOG1

New to HTML? Confused about what or how meta tags in HTML work? Welcome to my first blog based on the basic terminology of Meta tags and their usage. Happy reading! :)

The <meta> tag is an empty element and does not have a closing tag but is very crucial. It is used to provide the additional important data about an HTML document. Meta data refers to the information about the data. Also, it does not loads on the webpage i.e it won't be visible to you. It is used by browsers(to display content or to reload the pages) , widely used for Search Engine Optimization(SEO) and other services also.

The metadata is added in the header section of an HTML webpage. The main attributes used in meta tags are as follows:

Charset : It specifies the character encoding used in out HTML document. Now,what is character encoding? The conversion of bytes into characters is done by character encoding. A proper character encoding is important to display or validate HTML document. "UTF-8" (Unicode Transformation Format) is a system which translates ay Uicode character to a unique binary string ad vice versa.

Code : <meta charset="UTF-8">

Content : It specifies the values of the properties used.

Code : <meta name="viewport" content="width=device-width, initial-scale=1.0"> (This makes your website look good on all devices)

Http-equiv : It is used to get http response message. It can be used to set a cookie or refresh a page.

Code : <meta http-equiv="refresh" content="10"> (It will refresh the document in every 10 seconds)

Name : It lets us specify the name for the metadata.

Description : It is used to write a short description about the HTML document

Code : <meta name = "description" content = "My first blog">

Revision Date : It is used to give the information about the latest document updates.

Code : <meta name = "revised date" content = "document update time-latest" >

These were few of the important and widely used meta tags.

Let's talk a bit about viewport

Viewport is that region of the webpage which is visible to us onn the screens and varies as the device's size varies. In desktops it will be different, in phones, different. The viewport attribute helps the browser in setting the dimensions and scaling of the document

width = device-width :

tells the browser to set the width of the document accoridng to the screen size.

initial-scale = 1.0 :

sets the initial zoom level when the page is first loaded by the browser.