Appearance
Which Tag is Better to Use: <embed> or <object>
The difference between the <embed> and <object> tags
Both the <embed> and <object> tags are used to load external plugin content, and they are quite similar in functionality. Note that while <embed> was deprecated in XHTML, it is a standard HTML5 element.
So, the <object> tag is currently the standard tag used to embed something on a page. However, since not all browsers consistently display content inside <object>, you may need to use the <embed> element within an <object> to ensure broader browser compatibility and document validity. Because the <embed> tag is an HTML5 element, this approach does not cause validation errors.
Additionally, any fallback content inside <object> tags will be displayed if the browser does not support the specified plugin. The resource is requested via HTTP regardless of whether it is rendered.
Below, you can see some examples with the <object> and <embed> tags.
Example of including a PDF with the <object> tag:
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<object type="application/pdf"
data="data/uploads/media/default/0001/01/540cb75550adf33f281f29132dddd14fded85bfc.pdf"
width="300"
height="200">
<a href="https://www.w3docs.com/uploads/media/default/0001/01/540cb75550adf33f281f29132dddd14fded85bfc.pdf">download pdf</a>
</object>
</body>
</html>Example of including a video with the <object> tag:
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Steve Jobs' Stanford Commencement Address - YouTube</p>
<object width="320" height="240" data="https://www.youtube.com/embed/bZNEB_o3Hzw?ecver=2">
</object>
</body>
</html>Example of including a video with the <embed> tag:
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<embed type="video/mp4" src="https://www.w3docs.com/build/videos/arcnet.io(7-sec).mp4" width="300" height="200" title="Arcnet.io video" />
</body>
</html>Attributes of the <embed> and <object> tags
| Description | <embed> | <object> |
|---|---|---|
| URL of the content to be embedded | src | data |
| Media type of the content to be embedded | type | type |
| Height and width (used in pixels) of the box controlled by the plugin | height width | height width |
| Names and values needed for the plugin as parameters | ad hoc attributes with those names and values | single-tag <param> elements within <object> |
| Independent HTML content as a fallback for an unavailable resource | not supported (<noembed> is obsolete) | contained within <object>, after <param> elements |
Note that traditional plugins are largely obsolete in modern web development. For most use cases, modern alternatives like <iframe>, <video>, or <audio> are preferred.