The <meta> tags are used to store structured metadata, such as keywords, descriptions, author name, and character encoding. You can place any number of meta tags in the head section of your HTML or XML document.
Meta tags do not appear on your web page, but they are machine-readable and can be read by browsers, search engines such as Google, and other web services
In the next section, we’ll look at the different uses of meta tags.
Meta tag is one of the most common character encodings used in HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Declaring Character Encoding</title>
<meta charset="utf-8">
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>You can use the @charset at-rule to set the character encoding within a CSS document.
Note: As you can see, UTF-8 is one of the most flexible and recommended character encodings. If this is not the case, then the platform’s default encodings are used.
The meta tag can also be used to clearly indicate who the web page's author or creator is.
The author can be a person, the entire company, or a third-party entity.
<head>
<title>Defining Document's Author</title>
<meta name="author" content="Alexander Howick">
</head>Note: The meta tag name attribute specifies the name of the document-level metadata. The content attribute specifies the content attribute value. The content attribute value contains text and entities but does not contain HTML tags.
Some search engines index web pages based on metadata such as keywords and descriptions; however, this is not always the case. Keywords that give extra importance to a document’s keywords and description give a brief overview of the page’s content. Here is an example:
<head>
<title>Defining Keywords and Description</title>
<meta name="keywords" content="HTML, CSS, javaScript">
<meta name="description" content="Easy to understand tutorials and references on HTML, CSS, javaScript and more...">
</head>Tip: Meta description is often used by search engines to create brief summaries of a page when it appears in the search results. Check out the guidelines for meta description.
The viewport meta tag allows you to show the web pages properly on mobile devices.
On mobile browsers, the web pages are rendered at normal desktop screen widths and then scaled down to fit on the mobile screen. This means that you need to pinch and zoom to show the web page properly on the mobile devices. This is very inconvenient.
The following example shows two web pages — one with a viewport meta tag, and one without viewport meta tag set.
You can open these links on your mobile device and see how it works.
You can use the viewport meta tag to define the optimal viewport size as well as scaling limits for mobile web pages. A typical definition of a viewport meta tag is as follows:
With Viewport Meta Tag
Without Viewport Meta Tag<head>
<title>Configuring the Viewport</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>The width=device-width is a key-value pair within the content attribute that sets the width of your viewport to be equal to the screen width of your device, whereas the initial-scale=1 property sets the initial zoom level or scale to 100% the first time the browser loads the page.
Tip: Always include the <meta> tag in your pages. This tag will make your website easier to navigate and easier to use on mobile devices such as mobile phones and tablets.