HtmlConceptBeginner · 3 min read

What Are Meta Tags in HTML: Definition and Usage

In HTML, meta tags provide information about the web page that is not shown directly on the page but helps browsers and search engines understand it. They are placed inside the <head> section and can specify things like page description, character set, and viewport settings.

⚙️

How It Works

Think of meta tags as labels or notes attached to your web page that tell browsers and search engines important details about the page. These tags live inside the <head> part of your HTML, which is like the backstage area of a webpage where you keep information that helps the page work better.

For example, a meta tag can say what language the page uses, how to display it on different devices, or what the page is about. This information helps browsers show the page correctly and helps search engines show your page in search results with the right description.

💻

Example

This example shows common meta tags inside the <head> of an HTML page. It sets the character encoding, page description, and viewport for mobile devices.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="description" content="A simple page explaining meta tags in HTML">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Meta Tags Example</title>
</head>
<body>
  <h1>Welcome to Meta Tags Example</h1>
  <p>This page uses meta tags to provide extra information.</p>
</body>
</html>

Output

A webpage with a heading 'Welcome to Meta Tags Example' and a paragraph 'This page uses meta tags to provide extra information.'

🎯

When to Use

Use meta tags whenever you want to give extra information about your webpage that helps browsers and search engines. For example:

Setting the character set so text shows correctly.
Adding a description that appears in search results.
Making your page mobile-friendly with viewport settings.
Specifying keywords or author information.

These tags improve how your page is displayed and found online, making them important for all websites.

✅

Key Points

Meta tags go inside the <head> section of HTML.
They provide information about the page, not visible content.
Common uses include setting character encoding, page description, and viewport.
They help browsers display pages correctly and improve search engine results.

✅

Key Takeaways

Meta tags provide important information about a webpage inside the section.

They help browsers and search engines understand and display your page properly.

Common meta tags include charset, description, and viewport settings.

Using meta tags improves accessibility and search engine visibility.

Always include relevant meta tags for better user experience and SEO.