HTML <meta> Tag

Beginner
⏱️ 6 min read
📚 Updated: Jun 2026
🎯 3 Examples
Document Metadata
HTML meta tag tutorial — charset, viewport, description, and SEO metadata
Overview

What You’ll Learn

The <meta> tag in HTML plays a crucial role in providing metadata about a document. Understanding its usage and attributes is essential for enhancing the structure, SEO, and presentation of your web pages.

This guide will delve into the intricacies of the HTML <meta> tag and how it can be effectively utilized by beginners and experienced developers alike.

01

What meta is

Head metadata.

02

Syntax

Void element.

03

charset

UTF-8 encoding.

04

name/content

Description, robots.

05

viewport

Mobile scaling.

06

SEO basics

Search snippets.

Fundamentals

What Is the <meta> Tag?

The <meta> tag is an HTML element designed for specifying metadata about a document. Metadata includes information such as character set, viewport settings, page description, and more. This tag is placed within the <head> section of an HTML document.

💡
Invisible but essential

meta tags are not rendered as visible page content. Browsers, search engines, and social platforms read them to encode text, scale layouts, and describe your page correctly.

You will typically use several meta elements on every page — at minimum charset, viewport, and often a description.

Foundation

📝 Syntax

The <meta> tag is a void (self-closing) element and does not require a closing tag. It typically includes attributes to define the type of metadata:

syntax.html
<meta name="description" content="Brief description of the page">

Syntax Rules

  • Place all meta elements inside <head>, not <body>.
  • Put <meta charset="UTF-8"> as the first child of head when possible.
  • Use name + content for document metadata, or charset alone for encoding.
  • meta is void — write <meta ...> without inner content.
Cheat Sheet

⚡ Quick Reference

PurposeCode SnippetNotes
Character encoding<meta charset="UTF-8">First in head
Responsive viewport<meta name="viewport" content="width=device-width, initial-scale=1.0">Mobile layouts
Page description<meta name="description" content="...">Search snippets
Robots directive<meta name="robots" content="index, follow">Crawler hints
Open Graph title<meta property="og:title" content="...">Social sharing
Refresh redirect<meta http-equiv="refresh" content="5;url=/new">Use sparingly
Comparison

⚖️ charset vs name vs property

PatternAttributesTypical use
Encodingcharset="UTF-8"Text decoding (HTML5 shorthand)
Document metadataname + contentdescription, viewport, robots, author
HTTP header emulationhttp-equiv + contentcontent-type, refresh, cache control
Social / Open Graphproperty + contentog:title, og:image for link previews
Reference

🧰 Common Attributes

The <meta> tag uses different attribute combinations depending on the metadata type. These three patterns cover most beginner use cases:

charset Essential

Specifies the character set used in the document. This is crucial for ensuring proper rendering of text and symbols.

<meta charset="UTF-8">
name + content Common

Used in pairs to define various types of metadata. For example, setting the page description:

<meta name="description" content="...">
viewport Responsive

Defines viewport settings, crucial for responsive web design on phones and tablets.

name="viewport" content="width=device-width, initial-scale=1.0"
http-equiv Advanced

Simulates an HTTP response header. Used for content-type, refresh redirects, and cache directives.

http-equiv="refresh" content="5;url=/home"
property Social

Open Graph and similar protocols use property instead of name for link preview metadata.

property="og:title" content="..."
content Required*

The value paired with name, http-equiv, or property. Not used with charset.

content="width=device-width, initial-scale=1.0"

* content is required when using name, http-equiv, or property.

Hands-On

Examples Gallery

Practice the most common meta patterns beginners use on every real-world page.

👀 Live Preview

Typical meta tags inside head (not visible on the page, but read by browsers and crawlers):

📚 Common Use Cases

These three meta patterns appear on nearly every production HTML page.

Page Description

Enhance search engine results by providing a concise and relevant page description:

page-description.html
<meta name="description" content="Explore the world of HTML meta tags and their significance in web development.">
Try It Yourself

Viewport Settings

Ensure proper scaling on different devices with viewport settings:

viewport-settings.html
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Try It Yourself

Character Set

Specify the character set to be used in the document:

character-set.html
<meta charset="UTF-8">
Try It Yourself

name and content

A general name and content pair for document-level metadata:

name-and-content.html
<meta name="description" content="A comprehensive guide to HTML meta tags">
A11y

♿ Accessibility

  • charset matters for all users — Correct encoding ensures screen readers and browsers display text accurately in every language.
  • viewport improves readability — Mobile users can read and zoom content without horizontal scrolling caused by missing viewport meta.
  • Do not hide content in meta — Important information for users belongs in visible body content, not only in meta tags.
  • Unique titles and descriptions — Distinct metadata helps users find the right page in search results and assistive browsing tools.

🧠 How <meta> Works

1

Browser parses head

Before rendering body, the browser reads meta tags in head.

Parse
2

Metadata is applied

charset sets encoding; viewport configures the layout viewport on mobile.

Configure
3

Crawlers index metadata

Search engines and social bots read description and og:* meta for listings and previews.

Discover
=

Correct encoding, layout, and discoverability

Well-written meta tags help every visitor and crawler understand your page before they see the body content.

Compatibility

Browser Support

Understanding the compatibility of the <meta> tag across different browsers is essential for delivering a consistent user experience. The meta element is supported everywhere:

✓ Baseline · HTML5

Universal metadata support

All browsers support <meta> for charset, viewport, and standard name/content metadata.

100% Modern browser support
Google Chrome Fully supported
Full support
Mozilla Firefox Fully supported
Full support
Apple Safari Fully supported
Full support
Microsoft Edge Fully supported
Full support
Internet Explorer Fully supported
Full support
Opera Fully supported
Full support
<meta> tag 100% — all browsers

Bottom line: Use charset, viewport, and description meta on every HTML page.

Wrap Up

Conclusion

Mastering the <meta> tag is fundamental for crafting well-structured and search engine-friendly web pages. By leveraging its attributes effectively, you can enhance the user experience and improve the discoverability of your content.

View Examples Gallery Try description meta
Pro Tips

💡 Best Practices

✅ Do

  • Include essential metadata to improve SEO and accessibility
  • Use relevant values for attributes to accurately describe your document
  • Keep the <meta> tag within the <head> section
  • Write a unique description for each page (roughly 150–160 characters)
  • Place charset as the first element inside head

❌ Don’t

  • Put meta tags in the body
  • Duplicate the same description on every page
  • Rely on obsolete keywords meta for ranking (largely ignored today)
  • Use http-equiv="refresh" when a server redirect is possible
  • Stuff meta tags with irrelevant keywords
Summary

Key Takeaways

Knowledge Unlocked

Six truths every developer should know about <meta>

Bookmark these before you publish your next page.

6
Core concepts
📄 01

In head only

Not visible.

Placement
🔤 02

UTF-8 charset

First in head.

Encoding
📱 03

viewport

Mobile scale.

Responsive
🔎 04

description

Search snippet.

SEO
🔗 05

name/content

Key-value pairs.

Attributes
✓ 06

100% Support

All browsers.

Compatibility
🎯 You know the essential meta tags for every page
Review Quick Reference →

❓ Frequently Asked Questions

The meta tag provides machine-readable metadata about an HTML document — encoding, viewport, description, robots directives, and more — inside head.
Inside <head>, before body. Place charset as early as possible.
name="viewport" content="width=device-width, initial-scale=1.0" tells mobile browsers to match the layout width to the device screen.
It does not directly rank pages, but search engines often use it as the snippet in results. Write a unique, accurate summary per page.
Yes. The meta element has full support in Chrome, Firefox, Safari, Edge, Opera, and Internet Explorer.

Build correct page metadata

Add charset, viewport, and description meta tags in the Try It editor before you publish.

Try description meta →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

6 people found this page helpful

HTML menuitem Tag HTML meter Tag