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. But the first thing we should note is that the <embed> tag is a deprecated HTML tag.
So, the <object> tag is currently the standard tag used to embed something on a page. But since currently, not all browsers display the information contained in the <object> tag, you may need to use the <embed> element within an <object> to provide support of more browsers and the validity of the document as well. Due to the fact that the <embed> tag is an HTML5 element, there isn’t any problem with the document validation in HTML5.
Besides the <param> tags, any content inside <object> tags will be rendered if the browser does not support the referred plugin of the <object> and as it is supposed, the content gets HTTP-requested no matter it gets rendered or not.
Below, you can see some examples with the <object> and <embed> tags.
Example of including a PDF with the <object> tag:
<!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="/uploads/media/default/0001/01/540cb75550adf33f281f29132dddd14fded85bfc.pdf">download pdf</a>
</object>
</body>
</html>
Example of including a video with the <object> tag:
<!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:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<embed type="video/ogg" src="/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 |