The <meta> element defines metadata about an HTML document. Metadata is — in its very simplest definition — data that describes data. For example, a 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> element, and are typically used to specify character set, page description, keywords, author of the document, and view-port settings.
Metadata will not be displayed on the page, but is machine parsable.
Metadata is used by browsers (how to display content or reload page), search engines (keywords), and other web services.
All the browsers support <meta> elements.
There are a lot of different types of <meta> elements that can be included in your page's <head>. Few examples would be :
<meta charset="UTF-8">- This element 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; what type of information it contains.contentspecifies the actual meta content.Two such meta elements that are useful to include on your page 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, if you have any questions about the content and you would like to 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 <meta> element.