The <meta> tag defines metadata about an HTML document. Metadata is — in its very simplest definition — data that describes data. For example, an HTML document is data, but HTML can also contain metadata in its <head> element that describes the document — for example, who wrote it, and its summary.
<meta> elements always go inside the <head> tag and are typically used to specify a character set, page description, keywords, author of the document, and viewport settings.
Metadata will not be displayed on the page but is machine parsable.
Metadata is used by browsers (how to display content or reload the page), search engines (keywords), and other web services.
All the browsers support <meta> tags.
There are a lot of different types of <meta> tags that can be included in your page's <head>. Few examples would be :
<meta charset="UTF-8">- This tag sets the character encoding of your document to UTF-8, which is a universal character set that includes pretty much any character from any human language, so browsers will be able to handle all characters and display it.- Essentially, it can now handle any textual content you might put on it. There is no reason not to set this and it can help avoid some problems later on.
<meta name="author" content="author's name">-namespecifies the type of meta element it is and what type of information it contains.contentspecifies the actual meta content, here it is the author's name.This tag is used on your page to define the author of the page and provide a concise description of the page.
Specifying an author is beneficial in many ways: it is useful to be able to understand who wrote the page and if you have any questions about the content, you can contact them. Some content management systems have facilities to automatically extract page author information and make it available for such purposes.
<meta name="descripton" content="description of the site">- Specifying a description that includes keywords relating to the content of your page is useful as it has the potential to make your page appear higher in relevant searches performed in search engines (such activities are termed Search Engine Optimization, or SEO).<meta name="viewport" content="width=device-width, initial-scale=1.0">- Theviewportis the user's visible area of a web page. It varies with the device - it will be smaller on a mobile phone than on a computer screen. This gives the browser instructions on how to control the page's dimensions and scaling.The
width=device-widthpart 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.0part sets the initial zoom level when the page is first loaded by the browser.
As you travel around the web, you'll find other types of metadata, too.
That's all for this article. I hope it has helped you to further understand about <meta> element.