HTML content Attribute

Beginner
⏱️ 5 min read
📚 Updated: Jun 2026
🎯 4 Examples
Meta & SEO
HTML content attribute tutorial — set metadata values on meta tags
Overview

Introduction

The content attribute in HTML plays a crucial role in specifying metadata values for certain elements, especially <meta> tags in the document head. It provides a way to define machine-readable information such as page descriptions, authorship, and social sharing data.

What You’ll Learn

01

meta Tags

Primary use case.

02

name + content

description, author.

03

property + content

Open Graph.

04

http-equiv

refresh, CSP hints.

05

JavaScript

meta.content

06

Not Page Text

Use textContent.

Fundamentals

Purpose of content

The primary purpose of the content attribute is to supply the value half of a metadata pair on a <meta> element. The other half is defined by name, property, or http-equiv. Browsers, search engines, and social platforms read these values from the head — they are not displayed as normal page content.

💡
Not for visible element text

content does not set button labels or paragraph text. For visible content, write text inside elements or use JavaScript textContent / innerHTML.

Foundation

📝 Syntax

Add content to a <meta> element with a text value:

content.html
<meta name="description" content="Page summary for search engines.">
<meta property="og:title" content="My Page Title">
<meta http-equiv="refresh" content="30">

Syntax Rules

  • Used on <meta> elements in the <head>.
  • Must be paired with name, property, or http-equiv.
  • Value is plain text (attribute string), not rendered HTML.
  • Quote values that contain spaces or special characters.
Reference

💎 Values

The content attribute accepts various values depending on the type of metadata it describes. Here are some common patterns:

  • Text content — For many meta tags, content holds plain text such as a page description, author name, or keywords list.
  • Open Graph / social content — With property="og:...", content supplies titles, descriptions, and image URLs for link previews.
  • http-equiv values — With http-equiv, content may be a refresh interval, charset hint, or policy directive string.
content-values.html
<!-- name + content -->
<meta name="description" content="Learn HTML meta tags.">

<!-- property + content (Open Graph) -->
<meta property="og:description" content="Share preview text.">

<!-- http-equiv + content -->
<meta http-equiv="refresh" content="5; url=/home">
Cheat Sheet

⚡ Quick Reference

Meta TypeExamplePurpose
Descriptionname="description" content="..."Search snippet text
Authorname="author" content="..."Page author
Open Graphproperty="og:title" content="..."Social sharing
Viewportname="viewport" content="width=device-width"Responsive layout
Robotsname="robots" content="index, follow"Crawler hints
JavaScriptmeta.content = "..."Update at runtime
Scope

Applicable Elements

ElementSupported?Notes
<meta>YesPrimary and standard use
<link itemprop>SometimesMicrodata value on link elements
<div>, <p>NoNot a valid HTML attribute
<button>NoPut label text inside the button
CSS ::beforeDifferentCSS content property is unrelated
Hands-On

Examples Gallery

Meta description, Open Graph property, author metadata, and dynamic JavaScript updates.

👀 Live Preview

Common meta tags using the content attribute (values live in the head, not on screen):

<meta name="description" content="HTML content attribute tutorial.">
<meta name="author" content="Mari Selvan M P">

Text Content

For many meta tags, the content attribute allows you to set plain text metadata directly:

text-content.html
<meta name="description" content="A beginner-friendly guide to the HTML content attribute.">
Try It Yourself

Open Graph Content

Social platforms read property and content pairs for link preview text:

og-content.html
<meta property="og:description" content="Learn how the content attribute sets metadata values.">
Try It Yourself

Example

Let’s explore a simple example of how the content attribute can be used:

content.html
<meta name="author" content="Mari Selvan M P">
Try It Yourself

How It Works

The name attribute identifies what the metadata is (author), and content provides its value. Together they form a complete meta declaration in the document head.

Dynamic Values with JavaScript

The content attribute can be manipulated dynamically using JavaScript. This enables developers to update metadata based on user interactions or application state. Here’s an example:

dynamic-content.html
<meta name="description" content="Original description.">

<script>
  // Dynamically set content for a meta tag
  var meta = document.querySelector('meta[name="description"]');
  if (meta) meta.content = "New dynamic content!";
</script>
Try It Yourself

How It Works

In this script, the content of a meta tag with name="description" is dynamically set to New dynamic content! Use this pattern sparingly — search engines primarily read metadata present in the initial HTML response.

A11y

♿ Accessibility

  • Meta is not visible content — Do not rely on meta tags alone for information users must see; put essential text in the page body.
  • Write clear descriptions — Good name="description" content="..." text helps users choose relevant search results.
  • Avoid misleading metadata — Description content should match the actual page topic.
  • Do not hide critical info in meta only — Screen readers read the DOM body, not meta tag values.
  • Sanitize dynamic values — Treat user input before assigning to content to prevent injection issues.

🧠 How content Works

1

Author adds meta with content

Pair name, property, or http-equiv with a content value in the head.

Markup
2

Browser parses metadata

The user agent stores key/value metadata from meta tags.

Parse
3

External systems consume it

Search engines, browsers, and social crawlers read content values.

SEO / Share
=

Richer page context

Accurate metadata improves discovery, previews, and crawler understanding.

Compatibility

Browser Support

The content attribute on <meta> is supported in all modern browsers and is fundamental to HTML document metadata.

✓ HTML5 · Fully supported

Universal meta tag values

Every browser parses content on meta elements in the document head.

99% 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
content on meta 99% supported

Bottom line: Use content confidently on meta tags for SEO, viewport, and social metadata.

Pro Tips

💡 Best Practices

✅ Do

  • Use content on <meta> for descriptions, authors, and OG tags
  • Keep description content concise and accurate (roughly 150–160 characters)
  • Place essential meta tags in the static HTML head
  • Pair viewport content with responsive CSS
  • Validate social preview tags with sharing debug tools

❌ Don’t

  • Use content on div, p, or button for visible text
  • Put HTML markup inside the content attribute expecting it to render
  • Stuff keywords unnaturally into description content
  • Rely on late JavaScript-only meta for critical SEO metadata
  • Confuse HTML content with CSS content
  • Use the content attribute when you need to declare or update metadata on meta elements.
  • Be cautious when allowing user-generated strings in content values to prevent security vulnerabilities like cross-site scripting (XSS) in other contexts.
  • Check element documentation — content is defined for meta tags, not for general body elements.
Wrap Up

Conclusion

The content attribute provides a powerful way to supply metadata values on HTML <meta> elements. By understanding its usage and incorporating it into your projects, you can improve SEO, social sharing, and document-level configuration.

Remember that content is for metadata — not for visible page copy. Write user-facing text inside your HTML body and reserve content for the head.

View Examples Gallery Try meta description example
Summary

Key Takeaways

Knowledge Unlocked

Five truths every developer should know about content

Bookmark these before writing your next meta tags.

5
Core concepts
📄 01

meta Only

Metadata values.

Scope
🔎 02

name + content

description, robots.

SEO
📱 03

property + content

Open Graph.

Social
⚙️ 04

meta.content

JS updates.

Script
📝 05

Not Page Text

Use textContent.

Clarity
🎯 You know what HTML content is really for
Review Quick Reference →

❓ Frequently Asked Questions

On meta elements, it holds the metadata value paired with name, property, or http-equiv.
No. That is not valid HTML. Put visible text inside the element or use textContent in JavaScript.
No. HTML content is a meta attribute. CSS content inserts generated text in ::before / ::after pseudo-elements.
Tags inside the attribute value are plain text. They are not parsed or rendered as HTML on the page.
Use document.querySelector('meta[name=description]').content = '...' or setAttribute('content', '...').
Yes, on meta elements in all modern browsers. It is a core part of HTML metadata.

Master HTML metadata

Practice the content attribute with meta description, Open Graph, and JavaScript examples in the Try It editor.

Try meta description example →

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)

4 people found this page helpful

HTML compact Attribute HTML contenteditable Attribute