HTML Guides for property
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.
This error is almost always caused by copying and pasting code from a word processor, CMS rich-text editor, blog post, or PDF. These tools often auto-correct straight quotation marks (") into typographic (curly or “smart”) quotes (" and "). While curly quotes look nicer in prose, they are not valid as attribute delimiters in HTML. The browser and the W3C validator only recognize the standard straight double quote (", U+0022) or straight single quote (', U+0027) as attribute value delimiters.
When the validator encounters markup like <meta property="og:type", the curly quotes are treated as part of the attribute’s value. The validator then sees the value as "og:type" — a string wrapped in literal curly quote characters. Since the property attribute in RDFa (which Open Graph Protocol relies on) expects a term or an absolute URL, and "og:type" is neither, the validator reports the error.
This problem can affect any HTML attribute, but it’s especially common with <meta> tags for Open Graph, Twitter Cards, and other social sharing metadata, since developers frequently copy these snippets from documentation or tutorials.
How to fix it
- Find the curly quotes. Look at the property attribute value in your source code. Curly opening quotes (", U+201C) and closing quotes (", U+201D) may look nearly identical to straight quotes in some fonts, so use your editor’s find-and-replace feature to search for " and ".
- Replace them with straight quotes. Swap every " and " with a standard straight double quote (").
- Disable smart quotes in your editor. If you’re writing HTML in a rich-text editor or word processor, turn off the “smart quotes” or “typographic quotes” feature. Better yet, use a dedicated code editor (like VS Code, Sublime Text, or similar) that won’t auto-replace quotes.
Examples
Incorrect — curly quotes around the attribute value
<meta property="og:type" content="website" />The curly " and " characters become part of the value itself, producing the validator error: Bad value "og:type" for attribute property.
Correct — straight quotes around the attribute value
<meta property="og:type" content="website" />Standard straight double quotes correctly delimit the attribute values, and the validator sees og:type as expected.
Correct — single straight quotes are also valid
<meta property='og:type' content='website' />Straight single quotes (', U+0027) work just as well as straight double quotes for delimiting HTML attribute values. Use whichever style your project prefers, but be consistent.
Full Open Graph example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Page</title>
<meta property="og:title" content="My Page">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/">
<meta property="og:image" content="https://example.com/image.png">
</head>
<body>
<p>Hello, world!</p>
</body>
</html>All property and content attributes use straight double quotes, ensuring clean validation and correct parsing by social media crawlers.
The validator flags any declaration where the property token doesn’t match a known CSS property in its ruleset. Common causes include typos, wrong hyphenation, using values where property names should go, properties from older drafts that were renamed, or relying solely on vendor-prefixed/experimental properties without a standard equivalent. It can also show up when copy-pasting snippets that include custom, nonstandard properties.
Why this matters:
- Browser compatibility: Unknown properties are ignored, causing styles to silently fail.
- Maintainability: Typos and nonstandard syntax make CSS harder to debug.
- Standards compliance: Clean, validated CSS reduces cross-browser surprises and eases future maintenance.
How to fix it:
- Check spelling and hyphenation exactly (e.g., text-decoration-skip-ink, not text-decoration-skipink).
- Verify the property exists on MDN or in the CSS specifications; if it’s not documented, it’s likely invalid.
- Replace deprecated or draft names with current standardized ones.
- If using experimental features, include a standard fallback and keep vendor-prefixed versions alongside the unprefixed property when supported.
- Remove framework- or tool-specific tokens that aren’t valid CSS at runtime.
- Don’t invent properties. If you need custom data for JS, use data-* attributes in HTML, not fake CSS properties.
Examples
Example that triggers the error (typo) and the corrected version
Invalid:
<p style="colr: red;">Hello</p>Valid:
<p style="color: red;">Hello</p>Example using a deprecated/draft name replaced with the current property
Invalid (older draft name):
<div style="gap: 1rem; grid-row-gap: 8px;"></div>Valid (current, standardized property):
<div style="row-gap: 8px; gap: 1rem;"></div>Example with vendor-prefixed property plus standard fallback
Invalid (only vendor-prefixed, missing standard property):
<div style="-webkit-user-select: none;"></div>Valid (fallback plus prefix):
<div style="user-select: none; -webkit-user-select: none;"></div>Example removing a nonstandard custom property name misuse
Invalid (attempting to invent a property):
<div style="button-style: primary;"></div>Valid (use classes and real CSS properties):
<style>
.btn--primary {
background-color: #0b5fff;
color: #fff;
}
</style>
<button class="btn--primary">Submit</button>Example with custom properties (variables) used correctly
Valid use of CSS custom properties (won’t trigger the error because the property is standard and custom properties start with --):
<style>
:root {
--brand-color: #0b5fff;
}
.tag {
color: var(--brand-color);
}
</style>
<span class="tag">Tag</span>Full document with corrected properties
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Property Validation Fixes</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.card {
display: grid;
gap: 1rem;
row-gap: 0.5rem;
user-select: none;
-webkit-user-select: none;
color: #222;
}
</style>
</head>
<body>
<div class="card">Valid CSS properties in use</div>
</body>
</html>Quick checklist:
- Confirm the property on MDN. If not found, it’s probably invalid.
- Fix spelling/casing; CSS properties are lowercase with hyphens.
- Prefer standardized names; keep prefixes only as supplements.
- Use CSS custom properties starting with -- if you need variables.
- Remove tool-specific placeholders before validation.
The <link> element connects your HTML document to external resources like stylesheets, icons, fonts, and prefetched pages. According to the HTML specification, a <link> element must include at least one of rel, itemprop, or property so that its purpose is clearly defined. A bare <link> with only an href is meaningless—it points to a resource but doesn’t explain what that resource is for. The validator raises this error to enforce that every <link> carries semantic meaning.
This matters for several reasons. Browsers rely on these attributes to decide how to handle the linked resource. A <link> with rel="stylesheet" triggers CSS loading, while rel="icon" tells the browser to use the resource as a favicon. Without one of the required attributes, browsers may ignore the element entirely, leading to missing styles, icons, or other resources. It also affects accessibility tools and search engines that parse your markup for structured data.
Understanding the three attributes
-
rel — The most common attribute. It defines the relationship between your document and the linked resource. Examples include stylesheet, icon, preconnect, preload, canonical, and alternate. Most <link> elements in practice use rel.
-
itemprop — Used when the <link> element is part of an HTML Microdata structure. It specifies a property name within an itemscope, linking to a URL as the property’s value. This is commonly seen with Schema.org vocabularies.
-
property — Used with RDFa metadata (such as Open Graph tags). It defines a metadata property for the document, like og:image or schema:citation.
You only need one of these three attributes to satisfy the requirement, though you can combine them when appropriate.
Examples
Invalid: <link> with no relationship attribute
This triggers the validation error because the element has no rel, itemprop, or property attribute:
<head>
<title>My Page</title>
<link href="styles.css">
</head>Fixed: adding rel for a stylesheet
<head>
<title>My Page</title>
<link rel="stylesheet" href="styles.css">
</head>Fixed: common uses of rel
<head>
<title>My Page</title>
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="favicon.ico">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="canonical" href="https://example.com/page">
</head>Fixed: using itemprop with Microdata
When a <link> appears inside an element with itemscope, use itemprop to define a property that takes a URL value:
<div itemscope itemtype="https://schema.org/Article">
<h2 itemprop="name">Understanding HTML Validation</h2>
<link itemprop="mainEntityOfPage" href="https://example.com/article">
</div>Fixed: using property with RDFa / Open Graph
Open Graph meta tags for social sharing commonly use the property attribute. While <meta> is more typical for Open Graph, <link> with property is valid for URL-type values:
<head>
<title>My Page</title>
<link property="og:image" href="https://example.com/image.jpg">
<link property="schema:citation" href="https://example.com/source.html">
</head>Invalid: typo or misplaced attribute
Sometimes this error appears because of a misspelled attribute name:
<head>
<title>My Page</title>
<link rел="stylesheet" href="styles.css">
</head>Double-check that rel is spelled correctly and isn’t accidentally omitted when copying markup from templates or code snippets.
Quick fix checklist
- Linking to a stylesheet, icon, font, or other resource? Add the appropriate rel value.
- Defining Microdata properties? Use itemprop within an itemscope context.
- Adding RDFa or Open Graph metadata? Use property with the correct vocabulary prefix.
- Still seeing the error? Check for typos in the attribute name or ensure the attribute isn’t accidentally empty.
The <meta> element provides metadata about the HTML document — information that isn’t displayed on the page but is used by browsers, search engines, and other web services. According to the HTML specification, a <meta> tag without any of the recognized attributes is meaningless. The validator flags this because a bare <meta> element (or one with only unrecognized attributes) provides no useful metadata and likely indicates an error or incomplete tag.
This issue commonly occurs when a <meta> tag is left empty by accident, when an attribute name is misspelled (e.g., naem instead of name), or when a required attribute is accidentally deleted during editing.
Most <meta> use cases fall into a few patterns, each requiring specific attribute combinations:
- charset — Used alone to declare the document’s character encoding.
- name + content — Used together to define named metadata like descriptions, viewport settings, or author information.
- http-equiv + content — Used together to simulate an HTTP response header.
- property + content — Used together for Open Graph and similar RDFa-based metadata.
- itemprop + content — Used together for microdata annotations.
Note that content alone is not sufficient — it must be paired with name, http-equiv, property, or itemprop to have meaning.
Examples
Incorrect: bare <meta> tag with no attributes
This triggers the validation error because the <meta> element has no recognized attributes:
<meta>Incorrect: misspelled attribute
A typo in the attribute name means the validator doesn’t recognize it:
<meta nane="description" content="An example page.">Incorrect: content without a pairing attribute
The content attribute alone is not enough — it needs name, http-equiv, property, or itemprop:
<meta content="some value">Correct: character encoding with charset
<meta charset="UTF-8">Correct: named metadata with name and content
<meta name="description" content="A brief description of the webpage.">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Jane Doe">Correct: HTTP-equivalent with http-equiv and content
<meta http-equiv="X-UA-Compatible" content="IE=edge">Correct: Open Graph metadata with property and content
<meta property="og:title" content="My Page Title">
<meta property="og:description" content="A summary of the page content.">Correct: microdata with itemprop and content
<meta itemprop="name" content="Product Name">Full document example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A brief description of the webpage.">
<meta property="og:title" content="My Page Title">
<title>Example Page</title>
</head>
<body>
<p>Hello, world!</p>
</body>
</html>How to fix
- Find the flagged <meta> tag in your HTML source at the line number the validator reports.
- Check for typos in attribute names — make sure name, charset, http-equiv, property, or itemprop is spelled correctly.
- Add the missing attribute. Determine what the <meta> tag is supposed to do and add the appropriate attribute(s). If you can’t determine its purpose, it may be safe to remove it entirely.
- Ensure proper pairing. If you’re using content, make sure it’s paired with name, http-equiv, property, or itemprop. The charset attribute is the only one that works on its own without content.
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 content attribute when using name or property.
- Using non-standard attributes without the required ones (e.g., only specifying a custom attribute).
- Placing a charset meta in the <body>, where it’s not valid.
- Typos in attribute names like contents instead of content.
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>
<meta charset="utf-8">
<title>My Page</title>
<meta name="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>
<meta charset="utf-8">
<title>My Page</title>
<meta name="description" content="A brief description of the page.">
</head>Incorrect: <meta> with property but no content
<head>
<meta charset="utf-8">
<title>My Page</title>
<meta property="og:title">
</head>Correct: Open Graph <meta> with property and content
<head>
<meta charset="utf-8">
<title>My Page</title>
<meta property="og:title" content="My Page">
</head>Incorrect: <meta> with only a non-standard attribute
<head>
<meta charset="utf-8">
<title>My Page</title>
<meta name="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>
<meta charset="utf-8">
<title>My Page</title>
<meta name="theme-color" content="#ff0000">
</head>Incorrect: Bare <meta> tag with no meaningful attributes
<head>
<meta charset="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>
<div itemscope itemtype="https://schema.org/Product">
<span itemprop="name">Example Product</span>
<meta itemprop="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 (no content needed)
- 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>
<meta charset="utf-8">
<title>My Page</title>
<meta name="description">
<meta name="viewport">
</head>Both <meta> tags with name are missing their required content attribute.
❌ Empty or bare <meta> tag
<head>
<meta charset="utf-8">
<title>My Page</title>
<meta>
</head>A <meta> element with no attributes at all is invalid.
❌ Open Graph tag missing content
<head>
<meta charset="utf-8">
<title>My Page</title>
<meta property="og:title">
</head>✅ Correct usage with name and content
<head>
<meta charset="utf-8">
<title>My Page</title>
<meta name="description" content="A brief description of the page">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>✅ Correct usage with http-equiv and content
<meta http-equiv="refresh" content="30">✅ Correct usage with Open Graph property and content
<meta property="og:title" content="My Page Title">
<meta property="og:description" content="A description for social sharing">✅ Correct charset declaration (no content needed)
<meta charset="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, or property attribute?
- Add the missing content attribute with an appropriate value. If you intended the metadata to be empty, use content="", 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 without itemprop or property won’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 itemprop or property: A <meta> element inside the <body> is being used for structured data but is missing the required itemprop or property attribute.
Examples
Incorrect: <meta> with http-equiv inside the <body>
This <meta> tag belongs in the <head>, not the <body>:
<body>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<form>
<input type="text" name="q">
</form>
</body>Fixed: Move the <meta> to the <head>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>My Page</title>
</head>
<body>
<form>
<input type="text" name="q">
</form>
</body>Incorrect: <meta> in the <body> without itemprop or property
<div itemscope itemtype="https://schema.org/Offer">
<span itemprop="price">9.99</span>
<meta content="USD">
</div>The <meta> element is missing the itemprop attribute, so the validator reports the error.
Fixed: Add the itemprop attribute
<div itemscope itemtype="https://schema.org/Offer">
<span itemprop="price">9.99</span>
<meta itemprop="priceCurrency" content="USD">
</div>Correct: Using property for RDFa
The property attribute is also valid for <meta> elements in the <body> when using RDFa:
<div vocab="https://schema.org/" typeof="Event">
<span property="name">Concert</span>
<meta property="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>
<meta name="author" content="Jane Doe">
<p>Welcome to my site.</p>
</body>Fixed: Move it to the <head>
<head>
<title>My Site</title>
<meta name="author" content="Jane Doe">
</head>
<body>
<p>Welcome to my site.</p>
</body>
Ready to validate your sites?
Start your free trial today.