HTML - <meta> Tag

Quiz

Introduction to <meta> Tag

The HTML <meta> tag is used to provide the metadata about a webpage, although it is not displayed directly to the user but it is essential for browsers, search engines and other web services. The metadata typically includes information like the character set, author, description and keywords. The <meta> tag is placed within the <head> section of an HTML document.

It plays a crucial role in SEO and for overall user experience. For example, the description meta tag summarizes the content, influencing how search engines display the webpage in search results.

Syntax

Following is the syntax of HTML <meta> tag −

<meta attribute-name="value">

Attributes

HTML meta tag supports Global and accepts some specific attributes as well which is listed below.

Attribute	Value	Description
name	application-name author description generator keywords viewport	Name for the property. Can be anything. Examples include, keywords, description, author, revised, generator etc.
content	text	Specifies the property's value.
charset	character_set	Specifies character encoding to for HTML document.
http-equiv	content-security-policy content-type default-style refresh	Used for http response message headers. For example, http-equiv can be used to refresh the page or to set a cookie.

Example : Specifying Character Set

Let's look at the following example, where we are going to set the character encoding for the webpage to UTF-8.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<style>
    body{
        color:#8e44ad ;
        font-family:verdana;
    }
</style>
<body>
    <h2 style="color:green">Special Characters</h2>
    <ul>
        <li> - Copyright symbol</li>
        <li> - Euro symbol</li>
        <li> - Greek Omega</li>
    </ul>
</body>
</html>

Example : Defining Viewport

Consider the following example, where we are going to set the viewport width to the device width to ensure the page is responsive.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            font-family:verdana;
            margin: 0;
            padding: 0;
        }
        .container {
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1 style="color:#8e44ad">Welcome to TutorialsPoint</h1>
        <p>Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.</p>
    </div>
</body>
</html>

Supported Browsers

Tag
meta	Yes	Yes	Yes	Yes	Yes

html_tags_reference.htm

Print Page