<meta> tags are typically used to provide structured metadata such as a document’s keywords, description, author name, character encoding and other metadata. Any number of meta tags can be placed inside the
head section of an HTML
Metadata will not be displayed on the web page but will be machine parsable, and can be used by browsers, search engines like Google or other web services.
The following section describes the use of meta tags various purposes
Declaring Character Encoding in HTML
Meta tag typically used to declare character enconding inside the HTML document
<title>Declaring Character Encoding</title>
To set the character encoding inside a CSS document, the
@charset at-rule is used
Defining the Author of a Document
You can also use the meta tag to clearly define who is the author or creator of the web page. The author can be individual, the company as a whole or a third party
<title>Defining Document's Author</title>
<meta name="author" content="Kudzanayi Dzvairo">
Keywords and Description of Search Engines
Some search engines use metadata especially keywords and description to the index web pages; however this may not necessarily be true. Keywords giving extra weight to a document’s keywords and descritpion provide a short synopsis of the page.
<title>Defining Keywords and Description</title>
<meta name="description" content="Easy to understand tuts">
Configuring the Viewport for Mobile Devices
You can use the viewport meta tag to display the webpage correctly on mobile devices.
Without a viewport meta tag, mobile browsers render the web pages at typical desktop screen widths and then scale it down to fit the mobile screen. As a result, it requires pinch-and-zoom to view the web page properly in mobile devices, which is very inconvenient.
The following demonstration shows two web pages — one with the viewport meta tag and other without the viewport meta tag set. Open these links on mobile devices to see how it works
The viewport meta tag allows you to set the best viewport size and scaling limits for viewing the web pages on mobile devices. A typical meta tag definition will look as follows
<title>Configuring the Viewport</title>
<meta name="viewport" content="width=device-width, intial-scale=1">
The width=device-width key-value pair inside the content attribute sets the width of the viewport to the same as the screen width of the device, whereas the initial-scale=1 sets the initial scale or soom lelvel to 100% when the page is first loaded by the browser