HTML Guides for meta
Learn how to identify and fix common HTML validation errors flagged by the W3C Validator — so your pages are standards-compliant and render correctly across every browser. Also check our Accessibility Guides.
The <meta> element is used to provide metadata about an HTML document. According to the HTML specification, a <meta> element must serve a specific purpose, and that purpose is determined by its attributes. A bare <meta> tag or one with only a charset attribute in the wrong context will trigger this validation error.
There are several valid patterns for <meta> elements:
name+content: Standard metadata pairs (e.g., description, viewport, author).http-equiv+content: Pragma directives that affect how the browser processes the page.charset: Declares the document's character encoding (only valid once, in the<head>).itemprop+content: Microdata metadata, which can appear in both<head>and<body>.property+content: Used for Open Graph and RDFa metadata.
When a <meta> tag doesn't match any of these valid patterns, the validator raises this error. The most common causes are:
- Forgetting the
contentattribute when usingnameorproperty. - Using non-standard attributes without the required ones (e.g., only specifying a custom attribute).
- Placing a
charsetmeta in the<body>, where it's not valid. - Typos in attribute names like
contentsinstead ofcontent.
This matters for standards compliance and can also affect SEO and social sharing. Search engines and social media crawlers rely on properly formed <meta> tags to extract page information. Malformed tags may be silently ignored, meaning your metadata won't take effect.
Examples
Incorrect: <meta> with name but no content
<head>
<metacharset="utf-8">
<title>My Page</title>
<metaname="description">
</head>
The <meta name="description"> tag is missing its content attribute, so the validator reports the error.
Correct: <meta> with both name and content
<head>
<metacharset="utf-8">
<title>My Page</title>
<metaname="description"content="A brief description of the page.">
</head>
Incorrect: <meta> with property but no content
<head>
<metacharset="utf-8">
<title>My Page</title>
<metaproperty="og:title">
</head>
Correct: Open Graph <meta> with property and content
<head>
<metacharset="utf-8">
<title>My Page</title>
<metaproperty="og:title"content="My Page">
</head>
Incorrect: <meta> with only a non-standard attribute
<head>
<metacharset="utf-8">
<title>My Page</title>
<metaname="theme-color"value="#ff0000">
</head>
Here, value is not a valid attribute for <meta>. The correct attribute is content.
Correct: Using content instead of value
<head>
<metacharset="utf-8">
<title>My Page</title>
<metaname="theme-color"content="#ff0000">
</head>
Incorrect: Bare <meta> tag with no meaningful attributes
<head>
<metacharset="utf-8">
<title>My Page</title>
<meta>
</head>
A <meta> element with no attributes serves no purpose and should be removed entirely.
Correct: Using itemprop in the <body>
The itemprop attribute allows <meta> to be used within the <body> as part of microdata:
<body>
<divitemscopeitemtype="https://schema.org/Product">
<spanitemprop="name">Example Product</span>
<metaitemprop="sku"content="12345">
</div>
</body>
The <meta> element is used to provide machine-readable metadata about an HTML document, such as its description, character encoding, viewport settings, or social media information. The HTML specification defines several valid forms for <meta>, and most of them require a content attribute to supply the metadata's value.
This error typically appears when a <meta> tag includes a name or http-equiv attribute but is missing the corresponding content attribute. It can also appear when a <meta> tag has no recognizable attributes at all, or when the property attribute (used by Open Graph / RDFa metadata) is present without content.
A <meta> element must use one of these valid attribute patterns:
name+content— Named metadata (e.g., description, author, viewport)http-equiv+content— Pragma directives (e.g., refresh, content-type)charset— Character encoding declaration (nocontentneeded)property+content— RDFa/Open Graph metadata (e.g.,og:title)itemprop+content— Microdata metadata
Without the proper combination, browsers and search engines cannot correctly interpret the metadata, which can hurt SEO, accessibility, and proper page rendering. For example, a <meta name="description"> tag without content provides no description to search engines, and a <meta name="viewport"> without content won't configure the viewport on mobile devices.
Examples
❌ Missing content attribute
<head>
<metacharset="utf-8">
<title>My Page</title>
<metaname="description">
<metaname="viewport">
</head>
Both <meta> tags with name are missing their required content attribute.
❌ Empty or bare <meta> tag
<head>
<metacharset="utf-8">
<title>My Page</title>
<meta>
</head>
A <meta> element with no attributes at all is invalid.
❌ Open Graph tag missing content
<head>
<metacharset="utf-8">
<title>My Page</title>
<metaproperty="og:title">
</head>
✅ Correct usage with name and content
<head>
<metacharset="utf-8">
<title>My Page</title>
<metaname="description"content="A brief description of the page">
<metaname="viewport"content="width=device-width, initial-scale=1">
</head>
✅ Correct usage with http-equiv and content
<metahttp-equiv="refresh"content="30">
✅ Correct usage with Open Graph property and content
<metaproperty="og:title"content="My Page Title">
<metaproperty="og:description"content="A description for social sharing">
✅ Correct charset declaration (no content needed)
<metacharset="utf-8">
The charset form is the one exception where content is not required, because the character encoding is specified directly in the charset attribute value.
How to fix
- Find the flagged
<meta>tag in your HTML source at the line number reported by the validator. - Determine what type of metadata it represents. Does it have a
name,http-equiv, orpropertyattribute? - Add the missing
contentattribute with an appropriate value. If you intended the metadata to be empty, usecontent="", though it's generally better to either provide a meaningful value or remove the tag entirely. - If the
<meta>tag has no attributes at all, decide what metadata you intended to provide and add the correct attribute combination, or remove the element.
The <meta> element is most commonly used inside the <head> section to define metadata like character encoding, viewport settings, or descriptions. Inside <head>, attributes like charset, http-equiv, and name are perfectly valid. However, the HTML specification also allows <meta> to appear inside the <body> — but only under specific conditions.
When a <meta> element appears in the <body>, it must have either an itemprop attribute (for microdata) or a property attribute (for RDFa). It must also have a content attribute. Additionally, it cannot use http-equiv, charset, or name attributes in this context. These rules exist because the only valid reason to place a <meta> tag in the <body> is to embed machine-readable metadata as part of a structured data annotation — not to define document-level metadata.
Why this matters
- Standards compliance: The HTML living standard explicitly restricts which attributes
<meta>can use depending on its placement. Violating this produces invalid HTML. - Browser behavior: Browsers may ignore or misinterpret
<meta>elements that appear in the<body>without proper attributes. For example, a<meta http-equiv="content-type">tag inside the<body>will have no effect on character encoding, since that must be determined before the body is parsed. - SEO and structured data: Search engines rely on correctly structured microdata and RDFa. A
<meta>element in the body withoutitemproporpropertywon't contribute to any structured data and serves no useful purpose.
Common causes
- Misplaced
<meta>tags: A<meta>element meant for the<head>(such as<meta http-equiv="...">or<meta name="description">) has accidentally been placed inside the<body>. This can happen due to an unclosed<head>tag, a CMS inserting tags in the wrong location, or simply copying markup into the wrong section. - Missing
itemproporproperty: A<meta>element inside the<body>is being used for structured data but is missing the requireditemproporpropertyattribute.
Examples
Incorrect: <meta> with http-equiv inside the <body>
This <meta> tag belongs in the <head>, not the <body>:
<body>
<metahttp-equiv="content-type"content="text/html; charset=UTF-8">
<form>
<inputtype="text"name="q">
</form>
</body>
Fixed: Move the <meta> to the <head>
<head>
<metahttp-equiv="content-type"content="text/html; charset=UTF-8">
<title>My Page</title>
</head>
<body>
<form>
<inputtype="text"name="q">
</form>
</body>
Incorrect: <meta> in the <body> without itemprop or property
<divitemscopeitemtype="https://schema.org/Offer">
<spanitemprop="price">9.99</span>
<metacontent="USD">
</div>
The <meta> element is missing the itemprop attribute, so the validator reports the error.
Fixed: Add the itemprop attribute
<divitemscopeitemtype="https://schema.org/Offer">
<spanitemprop="price">9.99</span>
<metaitemprop="priceCurrency"content="USD">
</div>
Correct: Using property for RDFa
The property attribute is also valid for <meta> elements in the <body> when using RDFa:
<divvocab="https://schema.org/"typeof="Event">
<spanproperty="name">Concert</span>
<metaproperty="startDate"content="2025-08-15T19:00">
</div>
Incorrect: <meta name="..."> inside the <body>
The name attribute is only valid on <meta> elements inside the <head>:
<body>
<metaname="author"content="Jane Doe">
<p>Welcome to my site.</p>
</body>
Fixed: Move it to the <head>
<head>
<title>My Site</title>
<metaname="author"content="Jane Doe">
</head>
<body>
<p>Welcome to my site.</p>
</body>
The HTML living standard mandates UTF-8 as the only permitted character encoding for HTML documents. Legacy encodings like windows-1252, iso-8859-1, shift_jis, and others were common in older web pages, but they support only a limited subset of characters. UTF-8, on the other hand, can represent every character in the Unicode standard, making it universally compatible across languages and scripts.
This issue typically arises from one or more of these causes:
- Missing or incorrect
<meta charset>declaration — Your document either lacks a charset declaration or explicitly declares a legacy encoding like<meta charset="windows-1252">. - File not saved as UTF-8 — Even with the correct
<meta>tag, if your text editor saves the file in a different encoding, characters may become garbled (mojibake). - Server sends a conflicting
Content-Typeheader — The HTTPContent-Typeheader can override the in-document charset declaration. If your server sendsContent-Type: text/html; charset=windows-1252, the browser will use that encoding regardless of what the<meta>tag says.
Why This Matters
- Standards compliance: The WHATWG HTML living standard explicitly states that documents must be encoded in UTF-8. Using a legacy encoding makes your document non-conforming.
- Internationalization: Legacy encodings like
windows-1252only support a limited set of Western European characters. If your content ever includes characters outside that range—emoji, CJK characters, Cyrillic, Arabic, or even certain punctuation—they won't render correctly. - Security: Mixed or ambiguous encodings can lead to security vulnerabilities, including certain types of cross-site scripting (XSS) attacks that exploit encoding mismatches.
- Consistency: When the declared encoding doesn't match the actual file encoding, browsers may misinterpret characters, leading to garbled text that's difficult to debug.
How to Fix It
Step 1: Declare UTF-8 in your HTML
Add a <meta charset="utf-8"> tag as the first element inside <head>. It must appear within the first 1024 bytes of the document so browsers can detect it early.
Step 2: Save the file as UTF-8
In most modern text editors and IDEs, you can set the file encoding:
- VS Code: Click the encoding label in the bottom status bar and select "Save with Encoding" → "UTF-8".
- Sublime Text: Go to File → Save with Encoding → UTF-8.
- Notepad++: Go to Encoding → Convert to UTF-8.
If your file already contains characters encoded in windows-1252, simply changing the declaration without re-encoding the file will cause those characters to display incorrectly. You need to convert the file's actual encoding.
Step 3: Check your server configuration
If your server sends a charset parameter in the Content-Type HTTP header, make sure it specifies UTF-8. For example, in Apache you can add this to your .htaccess file:
AddDefaultCharset UTF-8
In Nginx, you can set it in your server block:
charset utf-8;
Examples
Incorrect: Legacy encoding declared
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="windows-1252">
<title>My Page</title>
</head>
<body>
<p>Hello world</p>
</body>
</html>
This triggers the error because windows-1252 is a legacy encoding.
Incorrect: Using the long-form http-equiv with a legacy encoding
<metahttp-equiv="Content-Type"content="text/html; charset=iso-8859-1">
This older syntax also triggers the error when it specifies a non-UTF-8 encoding.
Correct: UTF-8 declared properly
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="utf-8">
<title>My Page</title>
</head>
<body>
<p>Hello world</p>
</body>
</html>
The <meta charset="utf-8"> tag appears as the first child of <head>, and the file itself should be saved with UTF-8 encoding.
Correct: Using http-equiv with UTF-8
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8">
While the shorter <meta charset="utf-8"> form is preferred, this longer syntax is also valid as long as it specifies UTF-8.
According to the HTML specification, <meta> elements are metadata content and must appear within the <head> element. When a <meta> tag appears between </head> and <body>, browsers have to error-correct by either ignoring the element or silently relocating it into the head. This can lead to unpredictable behavior — for instance, a <meta charset="utf-8"> tag in the wrong position might not be processed in time, causing character encoding issues. Similarly, a misplaced <meta name="viewport"> could fail to apply on some browsers, breaking your responsive layout.
There are several common causes for this error:
- A
<meta>tag accidentally placed after</head>— perhaps added hastily or through a copy-paste error. - A duplicate
<head>section — if a second<head>block appears in the document, the browser closes the first one implicitly, leaving orphaned<meta>elements in limbo. - An unclosed element inside
<head>— a tag like an unclosed<link>or<script>can confuse the parser, causing it to implicitly close</head>earlier than expected, which pushes subsequent<meta>tags outside the head. - Template or CMS injection — content management systems or templating engines sometimes inject
<meta>tags at incorrect positions in the document.
To fix the issue, inspect your HTML source and ensure every <meta> element is inside a single, properly structured <head> section. Also verify that no elements within <head> are unclosed or malformed, as this can cause the parser to end the head section prematurely.
Examples
Incorrect — <meta> between </head> and <body>
<!DOCTYPE html>
<htmllang="en">
<head>
<title>My Page</title>
<metacharset="utf-8">
</head>
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<body>
<p>Hello, world!</p>
</body>
</html>
The <meta name="viewport"> tag is outside <head>, triggering the validation error.
Incorrect — duplicate <head> sections
<!DOCTYPE html>
<htmllang="en">
<head>
<title>My Page</title>
<metacharset="utf-8">
</head>
<head>
<metaname="description"content="A sample page">
</head>
<body>
<p>Hello, world!</p>
</body>
</html>
The second <head> block is invalid. The browser ignores it, leaving the <meta name="description"> element stranded between </head> and <body>.
Incorrect — unclosed element forces early head closure
<!DOCTYPE html>
<htmllang="en">
<head>
<title>My Page</title>
<metacharset="utf-8">
<linkrel="stylesheet"href="style.css">
<div>
<metaname="viewport"content="width=device-width, initial-scale=1.0">
</head>
<body>
<p>Hello, world!</p>
</body>
</html>
The <div> is not valid inside <head>, so the parser implicitly closes the head section when it encounters it. The subsequent <meta> tag ends up outside <head>.
Correct — all <meta> elements inside <head>
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="utf-8">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<metaname="description"content="A sample page">
<title>My Page</title>
<linkrel="stylesheet"href="style.css">
</head>
<body>
<p>Hello, world!</p>
</body>
</html>
All <meta> elements are properly contained within a single <head> section. Note that <meta charset="utf-8"> should ideally be the very first element in <head> so the browser knows the encoding before processing any other content.
The meta element's charset attribute only accepts utf-8 as its value in HTML5.
Older HTML versions and XHTML allowed character encodings like windows-1252, iso-8859-1, or shift_jis in the charset attribute. The HTML living standard restricts this to utf-8 only. UTF-8 is the required character encoding for HTML5 documents, and the W3C validator enforces this rule.
If a document actually uses a different encoding, convert the file to UTF-8 using a text editor or command line tool, then update the meta tag accordingly. Most modern text editors can save files as UTF-8.
The <meta charset="utf-8"> declaration should appear as early as possible within the <head> element, ideally as the first child. It must appear within the first 1024 bytes of the document so that browsers can detect the encoding before parsing the rest of the content.
HTML examples
Invalid charset value
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="windows-1252">
<title>Example</title>
</head>
<body>
<p>Hello world</p>
</body>
</html>
Valid charset value
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="utf-8">
<title>Example</title>
</head>
<body>
<p>Hello world</p>
</body>
</html>
In older HTML specifications (HTML 4.01), the scheme attribute was used to provide additional context for interpreting the content value of a <meta> element. It told browsers or metadata processors which encoding scheme, format, or vocabulary applied to the metadata. For example, you could specify that a date followed the W3CDTF format or that a subject classification used a particular taxonomy.
HTML5 dropped the scheme attribute because it was rarely used by browsers and its purpose was better served by making the scheme part of the metadata value itself. The WHATWG HTML living standard does not recognize scheme as a valid attribute on <meta>, so including it will produce a validation error. Keeping obsolete attributes in your markup can cause confusion for developers maintaining the code and signals outdated practices that may accompany other compatibility issues.
This issue most commonly appears in documents that use Dublin Core Metadata Initiative (DCMI) metadata, which historically relied on scheme to indicate the encoding format for dates, identifiers, and subject classifications.
How to fix it
There are several approaches depending on your use case:
- Simply remove the
schemeattribute if the format is already clear from context (e.g., ISO 8601 dates are universally understood). - Incorporate the scheme into the
nameattribute by using a more specific property name that implies the scheme. - Include the scheme declaration in the
contentvalue so the format information is preserved within the value itself.
For Dublin Core metadata specifically, the modern recommended approach is to use the DCTERMS namespace with RDFa or to simply drop the scheme attribute, since most date formats like YYYY-MM-DD are unambiguous.
Examples
Obsolete: using the scheme attribute
This triggers the validation error because scheme is not a valid attribute in HTML5:
<metaname="DC.Date.Created"scheme="W3CDTF"content="2009-11-30">
Another common example with subject classification:
<metaname="DC.Subject"scheme="LCSH"content="Web development">
Fixed: removing the scheme attribute
If the value format is self-evident (as with ISO 8601 dates), simply remove scheme:
<metaname="DC.Date.Created"content="2009-11-30">
Fixed: incorporating the scheme into the value
When the scheme information is important for processors to understand the value, embed it in the content attribute:
<metaname="DC.Subject"content="LCSH: Web development">
Fixed: using a more specific property name
You can make the scheme implicit by using a more descriptive name value:
<metaname="DCTERMS.created"content="2009-11-30">
Fixed: using RDFa for richer metadata
For documents that require precise, machine-readable metadata with explicit schemes, consider using RDFa attributes instead of the obsolete scheme:
<metaproperty="dcterms:created"content="2009-11-30">
This approach is compatible with HTML5 and provides the same semantic richness that the scheme attribute was originally designed to offer.
In older HTML practices, developers sometimes used <meta http-equiv="Content-Language" content="en"> inside the <head> to declare the document's primary language. The HTML living standard now marks this as obsolete because it was an unreliable and indirect way to communicate language information. It attempted to mirror an HTTP header rather than being a true part of the document structure, and its behavior was inconsistently implemented across browsers.
The lang attribute on the <html> element is the correct modern approach. It directly associates the language with the document's DOM tree, which has several important benefits:
- Accessibility: Screen readers rely on the
langattribute to select the correct pronunciation rules and voice profile. Without it, assistive technology may mispronounce content or fall back to a default language that doesn't match the text. - Browser behavior: Browsers use the
langattribute to make decisions about hyphenation, font selection, quotation mark styling, spell-checking, and other language-sensitive rendering. - Search engines: Declaring the language helps search engines index and serve content to the appropriate audience.
- CSS targeting: The
:lang()pseudo-class selector works based on thelangattribute, enabling language-specific styling.
The lang attribute also supports granular, element-level language declarations. If your page is primarily in English but contains a French quote, you can set lang="fr" on that specific element — something the <meta> approach could never do.
Examples
Incorrect: using the obsolete meta tag
This triggers the W3C validation warning because <meta http-equiv="Content-Language"> is obsolete for specifying the document language.
<!DOCTYPE html>
<html>
<head>
<metahttp-equiv="Content-Language"content="en">
<title>My Page</title>
</head>
<body>
<p>Hello, world!</p>
</body>
</html>
Correct: using the lang attribute on <html>
Remove the <meta http-equiv="Content-Language"> tag and add the lang attribute to the <html> element instead.
<!DOCTYPE html>
<htmllang="en">
<head>
<title>My Page</title>
</head>
<body>
<p>Hello, world!</p>
</body>
</html>
Correct: mixed-language content
Use the lang attribute on the root element for the primary language, then override it on specific elements as needed.
<!DOCTYPE html>
<htmllang="en">
<head>
<title>Multilingual Page</title>
</head>
<body>
<p>The French word for hello is <spanlang="fr">bonjour</span>.</p>
<blockquotelang="de">
<p>Die Grenzen meiner Sprache bedeuten die Grenzen meiner Welt.</p>
</blockquote>
</body>
</html>
Common language codes
Use a valid BCP 47 language tag as the value of the lang attribute. Here are some frequently used codes:
| Code | Language |
|---|---|
en | English |
fr | French |
de | German |
es | Spanish |
pt-BR | Brazilian Portuguese |
zh-Hans | Simplified Chinese |
ja | Japanese |
The fix is straightforward: remove any <meta http-equiv="Content-Language"> tags from your <head> and ensure your <html> element includes a lang attribute with the appropriate language code. This single change resolves the validation warning while improving your document's accessibility, rendering, and standards compliance.
Validate at scale.
Ship accessible websites, faster.
Automated HTML & accessibility validation for large sites. Check thousands of pages against WCAG guidelines and W3C standards in minutes, not days.
Pro Trial
Full Pro access. Cancel anytime.
Start Pro Trial →Join teams across 40+ countries