HTML Guides for percentage

According to the HTML Living Standard, the width and height attributes on the <object> element accept only valid non-negative integers — plain numbers representing pixels, such as 600 or 400. The validator expects each character in the value to be a digit (0–9). When it encounters a % sign, it reports "Expected a digit but saw '%' instead."

This is different from some legacy HTML 4 behavior where certain elements accepted percentage values in dimension attributes. In modern HTML, the <object> element's dimension attributes are strictly pixel-only. The same restriction applies to elements like <img>, <video>, and <canvas>.

Why this matters

• Standards compliance: Browsers may still render percentage values in these attributes, but the behavior is not defined by the specification and cannot be relied upon across browsers or future versions.
• Predictable rendering: Pixel values in attributes give the browser a concrete intrinsic size for the object, which helps with layout calculations and prevents content reflow as the page loads.
• Accessibility and tooling: Assistive technologies and other tools that parse HTML rely on well-formed attribute values. Invalid values may cause unexpected behavior.

How to fix it

You have two options:

1. Use pixel values in the attributes if you know the exact dimensions you need.
2. Use CSS if you need percentage-based or responsive sizing. Remove the width and height attributes (or set them to pixel fallback values) and apply CSS width and height properties instead.

When using CSS for 100% height, remember that percentage heights require the parent elements to also have a defined height. This typically means setting height: 100% on html and body as well.

Examples

❌ Invalid: percentage values in attributes

<object data="example.pdf" type="application/pdf" width="100%" height="100%"></object>

The validator flags both width="100%" and height="100%" because % is not a digit.

✅ Fixed: pixel values in attributes

<object data="example.pdf" type="application/pdf" width="600" height="400"></object>

Plain integer values are valid and give the object a fixed size in pixels.

✅ Fixed: percentage sizing with CSS

<object

data="example.pdf"

type="application/pdf"

style="width: 100%; height: 500px;">

</object>

Using inline CSS allows you to mix units freely, including percentages, vh, em, and more.

✅ Fixed: full-page object with CSS

When you need the <object> to fill the entire viewport, use a stylesheet to set heights on the ancestor elements:

<!DOCTYPE html>

<html lang="en">

<head>

<title>Full-Page Object Example</title>

<style>

html, body {

height: 100%;

margin: 0;

}

object {

display: block;

width: 100%;

height: 100%;

}

</style>

</head>

<body>

<object data="example.pdf" type="application/pdf"></object>

</body>

</html>

This approach is fully valid, responsive, and gives you much more control over sizing than HTML attributes alone.

letter-spacing takes normal or a length such as 0.05em, and the validator rejects anything else, including percentages like 1%.

CSS Text Module Level 4 adds percentages to letter-spacing and resolves them against the font size, so 1% is one hundredth of the font size. Only recent browser versions support this, and the validator's CSS checker doesn't recognize it. A browser without support ignores the declaration, and the text keeps whatever spacing it inherits.

The em unit gives the same result in every browser. 1em is the element's font size, so 1% becomes 0.01em and 5% becomes 0.05em. The spacing still scales with the text.

Made-up keywords such as wide trigger the same message. Use normal to reset the spacing, 0 for no extra space, or a length like 0.05em or 1px. Negative lengths are allowed and pull the letters closer together.

Invalid example

<h1 style="letter-spacing: 1%;">Upcoming events</h1>

Valid example

<h1 style="letter-spacing: 0.01em;">Upcoming events</h1>