The HTML content attribute
The HTML content attribute holds the value of a <meta> tag. That value might be a page description or viewport settings. It is required when the tag has name, http-equiv or itemprop, and it must be left out when the tag only has charset.
Overview
The content attribute supplies the value half of a <meta> tag. Another attribute on the tag says what is being set, and content says what it is set to, so a description tag carries the actual summary text in content.
The pairing rules come from the HTML Standard. Every meta tag has exactly one of name, http-equiv, charset or itemprop, and content must be present with name, http-equiv and itemprop and absent with charset.
What goes inside depends on that partner. A description is free-form text suited to a search engine's listing, keywords is a comma-separated list, and theme-color must be a valid CSS color. A viewport takes comma-separated key and value pairs like width=device-width, initial-scale=1, and a refresh takes a number of seconds with an optional URL.
The value is plain text, so tags inside content are not rendered as markup, and a double quote inside a double-quoted value has to be written as a character reference such as ". In JavaScript the content property reflects the attribute, which lets a script read or change the value after the page loads.
Syntax
<meta name="description" content="Step-by-step recipes for weeknight dinners.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="refresh" content="5; url=https://example.com/new-page">Values
| Value |
|---|
A string whose meaning depends on the tag's name, http-equiv or itemprop attribute. |
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Step-by-step recipes for weeknight dinners.">
<meta name="theme-color" content="#1e72e0">
<title>Weeknight recipes</title>
</head>
<body>
<ul id="out"></ul>
<script>
for (const meta of document.querySelectorAll('meta[name]')) {
const item = document.createElement('li');
item.textContent = meta.name + ' = ' + meta.content;
document.getElementById('out').append(item);
}
</script>
</body>
</html>More Examples
Best practices
- Write one description per page, since the HTML Standard allows only a single meta description in a document and expects it to describe that page.
- Remove meta tags you have no value for instead of shipping empty
contentattributes. - Leave
contentoff a meta charset tag, because the HTML Standard requires it to be omitted there. - Keep viewport values to settings like
width=device-width, initial-scale=1, and never adduser-scalable=no, which MDN warns stops people with low vision from zooming. - Use single quotes around a
contentvalue that needs double quotes inside it, or escape them as".
Accessibility
The viewport tag's content can block zooming. MDN warns that setting user-scalable to no prevents people with low vision from reading and understanding the page, so keep zoom enabled and let the layout respond to the device width instead.
Frequently asked questions
What is the content attribute in a meta tag?
Is the content attribute required in meta tags?
Can I put HTML inside the content attribute?
How do I change a meta tag's content with JavaScript?
document.querySelector('meta[name=theme-color]').content = '#000000'. The property reflects the content attribute, so the markup changes too.