HTML valuetype Attribute

Introduction

The valuetype attribute is used on <param> elements to specify how the browser should interpret the value attribute. It tells the user agent whether value is an external URL, a reference to another element in the page, or another embedded object.

This attribute was especially important in the era of browser plugins (such as Flash) inside <object> elements. You will see it in legacy HTML, but it is uncommon in modern web apps that use native video, PDF viewers, or JavaScript components instead.

What You’ll Learn

Purpose of valuetype

The valuetype attribute is primarily used with the <param> element, which defines named parameters for an <object> (historically plugins like Flash or Java applets). It indicates how the parameter’s value string should be interpreted so the embedded content can load resources correctly.

Without the correct valuetype, a plugin might treat an in-document reference as a literal filename, or fail to resolve an external URL.

📝 Syntax

Place <param> elements inside <object> with name, value, and optional valuetype:

<object data="movie.swf" type="application/x-shockwave-flash">
  <param name="movie" value="movie.swf" valuetype="data">
  <param name="quality" value="high">
  <p>Fallback content</p>
</object>

Syntax Rules

• Only valid on <param> elements.
• Keywords: data, ref, object.
• Default is data if omitted.
• Always pair with name and value on the same <param>.
• Parent <object> should include fallback content for unsupported embeds.
• JavaScript: paramElement.setAttribute("valuetype", "ref").

💎 Values

The valuetype attribute accepts three keywords:

• data (default) — The value is a URL pointing to an external resource. The browser treats it as a reference to load from outside the document.
• ref — The value is a URL that references another element defined in the same HTML document (often a fragment like #id).
• object — The value identifies another <object> element in the same document (by id).

<param name="movie" value="clip.swf" valuetype="data">
<param name="source" value="#mediaBlock" valuetype="ref">
<param name="nested" value="#otherObject" valuetype="object">

Applicable Elements

valuetype vs value vs type

Examples Gallery

See classic object/param markup, switch valuetype with JavaScript, and compare all three keyword values.

<param name="movie" value="movie.swf" valuetype="data">

<object data="movie.swf" type="application/x-shockwave-flash">
  <param name="movie" value="movie.swf" valuetype="data">
  <param name="quality" value="high">
  <param name="bgcolor" value="#000000">
</object>

<param id="paramElement" name="movie" value="movie.swf">

<script>
  document.getElementById("paramElement").setAttribute("valuetype", "ref");
</script>

<!-- External file URL (default) -->
<param name="src" value="asset.swf" valuetype="data">

<!-- In-document element reference -->
<param name="src" value="#media" valuetype="ref">

<!-- Another object element on the page -->
<param name="src" value="#embedObj" valuetype="object">

♿ Accessibility

• Provide fallback content — Text inside <object> when plugins or embeds fail helps all users.
• Avoid plugin-only experiences — Legacy object/param embeds were often inaccessible; prefer native HTML alternatives.
• Do not hide critical info in params — Screen readers do not expose param metadata to users.
• Use descriptive fallback links — Offer downloadable or alternative formats when embeds are unsupported.
• Modern media — Use <video> with captions instead of opaque plugin objects when possible.

💡 Best Practices

• Use valuetype so the browser correctly interprets param values when maintaining legacy object embeds.
• Test across environments if you must support old plugin content.
• Set valuetype according to whether the value is an external URL, in-document ref, or object id.

🎉 Conclusion

The valuetype attribute clarifies how <param> values should be interpreted inside <object> elements. It was essential for plugin configuration in older web pages and remains part of the HTML vocabulary for that use case.

For new development, focus on native HTML, CSS, and JavaScript. Know valuetype so you can understand and maintain legacy markup confidently.