Guías HTML para embed

The HTML specification defines the height and width attributes on the <embed> element as valid non-negative integers. This means the value must consist only of digits — for example, 650 — with no units, whitespace, or other characters appended. When you write height="650px", the validator encounters the letter “p” where it expects either another digit or the end of the value, and it raises this error.

This is a common mistake because CSS requires units (e.g., 650px), and it’s easy to assume HTML attributes work the same way. They don’t. In HTML, the height attribute implicitly means CSS pixels, so writing 650 already means “650 pixels.” Adding px is not only redundant — it makes the value invalid.

While most browsers are forgiving and will parse 650px correctly by stripping the unit, relying on this behavior is problematic. It violates the HTML specification, causes validation errors that can mask other real issues in your markup, and there’s no guarantee every browser or embedded content handler will be equally tolerant. Standards compliance ensures consistent rendering across browsers and assistive technologies.

How to fix it

You have two approaches:

1. Remove the unit from the HTML attribute. Change height="650px" to height="650". This is the simplest fix and keeps your sizing in the markup.

2. Move sizing to CSS. Remove the height attribute entirely and use a stylesheet or inline style attribute instead. This approach is more flexible because CSS supports units like %, em, vh, and more.

The same rule applies to the width attribute on <embed>, as well as height and width on elements like <img>, <video>, <iframe>, and <canvas> — all of which expect plain integers in HTML.

Examples

❌ Invalid: unit included in the HTML attribute

The px suffix causes the validator error because the attribute value must be digits only.

<embed src="file.pdf" type="application/pdf" width="800" height="650px">

Other invalid variations include:

<embed src="file.pdf" type="application/pdf" height="100%">
<embed src="file.pdf" type="application/pdf" height="40em">
<embed src="file.pdf" type="application/pdf" height="50vh">

✅ Fixed: plain integer without a unit

Remove the unit so the value is a valid non-negative integer.

<embed src="file.pdf" type="application/pdf" width="800" height="650">

✅ Fixed: sizing moved to CSS

If you need units other than pixels, or prefer to keep presentation in your stylesheets, use CSS instead of the HTML attribute.

<embed class="pdf-viewer" src="file.pdf" type="application/pdf">

.pdf-viewer {
  width: 800px;
  height: 650px;
}

✅ Fixed: inline style as an alternative

You can also use the style attribute directly if a separate stylesheet isn’t practical.

<embed src="file.pdf" type="application/pdf" style="width: 800px; height: 80vh;">

This is especially useful when you need viewport-relative or percentage-based sizing that HTML attributes can’t express.

The HTML specification defines the width and height attributes on <embed> as accepting only valid non-negative integers. This means bare numbers like 600 or 800 that represent dimensions in CSS pixels. When you write width="100%", the validator expects a digit character but encounters the % sign, which doesn’t conform to the expected format.

This matters for several reasons. Browsers may interpret invalid attribute values inconsistently — some might ignore the percentage and fall back to a default size, while others might attempt to parse the number portion and discard the %. This leads to unpredictable rendering across different browsers and devices. Following the specification ensures your embedded content displays at predictable dimensions everywhere.

The same rule applies to the height attribute. Neither width nor height on <embed> supports units of any kind — no px, %, em, or other suffixes. Just a plain integer.

How to Fix It

You have two main approaches:

1. Use integer pixel values directly. Replace width="100%" with a specific pixel value like width="800". This is the simplest fix when you know the desired dimensions.

2. Use CSS for responsive or percentage-based sizing. Remove the width and height attributes (or set them to reasonable defaults) and apply CSS through a class, style attribute, or external stylesheet. This is the better approach when you need the embed to be fluid or responsive.

Examples

Invalid — percentage in the width attribute

This triggers the validator error because 100% is not a valid non-negative integer:

<embed src="file.pdf" type="application/pdf" width="100%" height="600">

Fixed — using pixel values in attributes

Replace the percentage with a plain integer:

<embed src="file.pdf" type="application/pdf" width="800" height="600">

Fixed — using CSS for percentage-based sizing

Remove the dimension attributes and use CSS to control the size:

<embed src="file.pdf" type="application/pdf" class="embed-fluid">

.embed-fluid {
  width: 100%;
  height: 600px;
}

Fixed — responsive embed with a wrapper container

For a fully responsive embed that maintains an aspect ratio, wrap it in a container and use CSS:

<div class="embed-wrapper">
  <embed src="file.pdf" type="application/pdf">
</div>

.embed-wrapper {
  width: 100%;
  max-width: 960px;
  aspect-ratio: 4 / 3;
}

.embed-wrapper embed {
  width: 100%;
  height: 100%;
}

This approach gives you full control over sizing and responsiveness without relying on invalid HTML attributes. The aspect-ratio property ensures the container (and therefore the embed) maintains consistent proportions as it scales.