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.

Watch a course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

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