HTML Guides for quotes

The value given to a single-side margin property such as margin-left or margin-right does not match the syntax CSS allows for it, so browsers ignore the whole declaration.

Each side property (margin-top, margin-right, margin-bottom and margin-left) takes one value: a length like 10px or -1.5rem, a percentage like 5%, the keyword auto, or a global keyword such as inherit. Negative lengths are allowed, so -21px on its own is fine.

A common cause is wrapping the value in quotes, as in margin-left: '-21px'. Quotes turn the value into a CSS string, and no margin property accepts a string. This tends to happen when the style is built by code that quotes values the way JavaScript does (element.style.marginLeft = '-21px'). Putting !important inside the quotes makes it part of the string as well, so the priority flag is lost along with the value.

A keyword the property doesn't support, like margin-right: none, triggers the same message.

Invalid example

<div style="margin-left: '-21px !important'; margin-right: '-21px !important';">

Wide banner

</div>

Valid example

Remove the quotes and keep !important after the value:

<div style="margin-left: -21px !important; margin-right: -21px !important;">

Wide banner

</div>

The position property accepts only the keywords static, relative, absolute, fixed and sticky, written without quotes, so a quoted value such as "absolute" is rejected.

Quotation marks turn a CSS value into a string. "absolute" is a string that contains the word absolute, not the absolute keyword, and position has no string values. Quoted keywords usually come from a template or script that writes the CSS and wraps every value in quotes, the way JavaScript and JSON write strings. The validator reports any other value it doesn't recognize in the same way, such as the typo absolut or center borrowed from another property.

Browsers drop a declaration whose value they can't parse. The element keeps the position it would otherwise have, usually static, and top, right, bottom and left have no effect on it. A badge meant to sit in the corner of a card stays in the normal flow instead. If only the parent's position: "relative" is quoted, its absolutely positioned children are placed against the nearest positioned ancestor further up the page, or the page itself, rather than the parent.

Remove the quotes so the value is the bare keyword. The global keywords inherit, initial, unset and revert also work, and they don't take quotes either. When a template or script generates the CSS, fix the code that writes it, since a hand edit to the output won't survive the next build.

Invalid example

<style>

.card {

position: "relative";

}

.card-badge {

position: "absolute";

top: 0;

right: 0;

}

</style>

<div class="card">

<img src="shoe.jpg" alt="Trail running shoe">

<span class="card-badge">New</span>

</div>

Valid example

<style>

.card {

position: relative;

}

.card-badge {

position: absolute;

top: 0;

right: 0;

}

</style>

<div class="card">

<img src="shoe.jpg" alt="Trail running shoe">

<span class="card-badge">New</span>

</div>

An attribute value closed with two single quotes, or an apostrophe written as '' inside a single-quoted value, leaves a stray ' where the parser expects the next attribute name.

In a single-quoted value such as alt='Spring concert', the next ' after the opening one ends the value. After that the parser expects a space and another attribute, or the end of the tag. An extra quote right after the closing one, as in alt='Spring concert'', can't start an attribute name, so the validator reports it, usually next to "No space between attributes". Browsers treat the stray quote as the name of a new, unknown attribute, and the validator flags that attribute as not allowed on the element.

The doubled apostrophe does more damage. SQL string literals escape an apostrophe by writing it twice, and some code that builds HTML copies that convention, but HTML has no such escape. In alt='Children''s choir', the value ends after Children, and 's and choir' become separate junk attributes. Screen readers read the image's text alternative as just "Children".

The "probable cause" in the message is misleading for single quotes. A missing =, as in title'Contact', produces a different message about a quote in an attribute name. This one appears when the quote sits where a new attribute should start: right after a closing quote, or after a space that follows a complete attribute, as in class='note' 'intro'.

Delete the extra quote. When the value itself contains an apostrophe, wrap it in double quotes (alt="Children's choir") or write the apostrophe as ' or '. If a CMS or template prints the attribute, fix the escaping there so every page gets the correct output.

Invalid example

<img src="concert.jpg" alt='Spring concert'' width="300" height="200">

<img src="choir.jpg" alt='Children''s choir' width="300" height="200">

Valid example

<img src="concert.jpg" alt="Spring concert" width="300" height="200">

<img src="choir.jpg" alt="Children's choir" width="300" height="200">