HTML content Attribute
The HTML content attribute sets the value paired with a meta tag's name or http-equiv attribute. Learn its common values for SEO, viewport, and more.
The content attribute holds the value of a metadata declaration. It is meaningless on its own — it is always one half of a key-value pair, supplying the data for whatever the meta tag's name or http-equiv attribute names.
You can only use content on the <meta> element, which lives inside the <head> of the document. Think of name/http-equiv as the key and content as the value:
name+content— document-level metadata for browsers, search engines, and social platforms (description, keywords, viewport, etc.).http-equiv+content— a pragma directive that simulates an HTTP response header (for example a page refresh or a content type).
If you write a <meta> tag with a name or http-equiv but no content, the declaration does nothing.
Syntax
<meta name="description" content="A description of the document">Common name values and their content
The content value is interpreted according to the name it pairs with. These are the ones you will use most often:
name | What content holds |
|---|---|
viewport | How the page maps to the device screen. The standard value is width=device-width, initial-scale=1, which makes a page render responsively on mobile. |
description | A short summary of the page. Search engines often show it as the snippet under your result, so keep it under ~160 characters. |
keywords | A comma-separated list of keywords. Largely ignored by modern search engines, but still common in legacy markup. |
robots | Instructions for search-engine crawlers (see the breakdown below). |
author | The name of the page's author. |
The viewport meta is the single most important one to remember — without it, mobile browsers assume a desktop-width layout and zoom out:
<meta name="viewport" content="width=device-width, initial-scale=1">The robots directive values
The content of a robots meta is a comma-separated list of directives telling crawlers what they may do with the page. The two most misunderstood — noindex and nofollow — control different things:
| Value | What it tells the crawler |
|---|---|
index | The page may appear in search results. This is the default, so you rarely need to write it. |
follow | The crawler may follow the links on the page to discover other pages. Also the default. |
noindex | Do not show this page in search results — even though the crawler can still read it and follow its links. |
nofollow | Do not follow the links on this page. The page itself may still be indexed. |
Because they are independent, you often combine them. For example, to hide a page from search and stop crawlers passing through its links:
<meta name="robots" content="noindex, nofollow">Open Graph and social-sharing metadata
When a page is shared on social platforms (Facebook, LinkedIn, Slack, etc.), the platform reads Open Graph meta tags to build the preview card. Open Graph uses the property attribute (instead of name) together with content:
<meta property="og:title" content="HTML content Attribute - W3docs" />
<meta property="og:description" content="Learn how the HTML content attribute pairs with a meta tag's name or http-equiv to set page metadata." />
<meta property="og:image" content="https://www.w3docs.com/assets/preview.png" />og:title— the headline shown on the share card (falls back to the page title if omitted).og:description— the summary text under the title.og:image— an absolute URL to the thumbnail image. Always use a fullhttps://URL here; relative paths will not resolve on other sites.
These are among the most common real-world uses of content, so it is worth adding them alongside your description meta.
Common http-equiv values and their content
The http-equiv attribute lets a <meta> tag stand in for an HTTP header. The content attribute then carries that header's value:
http-equiv | What content holds |
|---|---|
refresh | A number of seconds before the page reloads. Add ;url=... to redirect instead — e.g. content="5;url=https://www.w3docs.com". See the accessibility warning below. |
content-type | The document's MIME type and character set, e.g. text/html; charset=UTF-8. In HTML5 the shorter <meta charset="UTF-8"> is preferred. |
The X-UA-Compatible value (e.g. IE=edge) only ever affected Internet Explorer's rendering mode. Internet Explorer is end-of-life, so this directive is legacy and safe to omit from new pages.
Using <meta http-equiv="refresh"> to redirect to another page is discouraged for accessibility. It is a documented WCAG 2.2 failure (Success Criteria 2.2.1 and 3.2.5): it gives the user no control over the timing and can disorient people who use screen readers or who need more time to read. Prefer a real server-side HTTP redirect (a 301/302 response). If you must redirect from the client, set the delay to 0 so it happens immediately, or provide a visible link the user can activate themselves.
Example of the HTML content attribute
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="Free hands-on tutorials and references on HTML, CSS, JavaScript, PHP and Git, with runnable examples to learn web development step by step." />
<meta name="keywords" content="HTML,CSS,JavaScript,PHP, Git" />
<meta http-equiv="refresh" content="30" />
</head>
<body>
<h1>Example of the HTML "content" attribute</h1>
<p>Lorem ipsum, or lorem ipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
</body>
</html>Here is what each content value does in the example above:
width=device-width, initial-scale=1tells the browser to match the layout to the device's screen width and start at 100% zoom.- The
descriptionvalue ("Free hands-on tutorials and references on HTML, CSS, JavaScript, PHP and Git…") is the page summary a search engine may display as the result snippet. "HTML,CSS,JavaScript,PHP, Git"is the comma-separated keyword list."30"on therefreshdirective reloads the page every 30 seconds. Use auto-refresh sparingly — see the accessibility note above before relying on it.