CODEWITHSUNDEEP
html
GrantRobertson
GrantRobertson

Reputation: 479

Using <object> tag to include HTML content: allowed format of included file

OK, I know how to include HTML content from a separate file using the <object> tag. What I can't find any info about is what is allowed/required within the included HTML file. Can said included file merely be some text with some HTML tags, or does it have to be a complete HTML file with headers, <head>, and <body>? How does this appear within the DOM of the original document, if it appears within that DOM at all? Or are the two documents treated entirely separately?

Yes, I know, I could experiment to see what works. However, I know enough about HTML to know that what happens to work, for now, may not be the correct way to do things. I am not expecting anyone to list out all the rules here, but if someone could post some links I would much appreciate it. This is a topic that has proven exceeding difficult to search the internet for.

Upvotes: 6

Views: 8182

Answers (3)

GrantRobertson
GrantRobertson

Reputation: 479

In 13.5 Notes on embedded documents, I believe I have found the answer to both of my questions. The second paragraph says,

An embedded document is entirely independent of the document in which it is embedded. For instance, relative URIs within the embedded document resolve according to the base URI of the embedded document, not that of the main document. An embedded document is only rendered within another document (e.g., in a subwindow); it remains otherwise independent.

So, yes, as both @Quentin and @Sinan said, it would require the embedded .html file to be a complete, valid .html file. And, no, it would not become part of the DOM of the original document.

Thanks to everyone for their prompt assistance. The StackOverflow community continues to amaze me.

Upvotes: 3

Sinan &#220;n&#252;r
Sinan &#220;n&#252;r

Reputation: 118128

<object> in HTML5 and <object> in HTML4.

The object element represents external content, which, depending on the type of the content, will either be treated as an image, as a nested browsing context, or as external content to be processed by a plugin.

Motivation from HTML4:

Previous versions of HTML allowed authors to include images (via IMG) and applets (via APPLET). These elements have several limitations:

  • They fail to solve the more general problem of how to include new and future media types.
  • The APPLET element only works with Java-based applets. This element is deprecated in favor of OBJECT.
  • They pose accessibility problems.

To address these issues, HTML 4 introduces the OBJECT element, which offers an all-purpose solution to generic object inclusion. The OBJECT element allows HTML authors to specify everything required by an object for its presentation by a user agent: source code, initial values, and run-time data. In this specification, the term "object" is used to describe the things that people want to place in HTML documents; other commonly used terms for these things are: applets, plug-ins, media handlers, etc. (emphasis mine)

So, basically, <object> elements are pretty generic. The only real condition is that there needs to be some kind of functionality on the client side to render the element.

For example:

<object data="test.html" height="50" width="50"></object>

renders the contents of test.html in a tiny area (no scaling!) with Firefox whereas links just displays [OBJ].

Embedded Content explains what happens when an <object> element is encountered.

Due to the algorithm above, the contents of object elements act as fallback content, used only when referenced resources can't be shown (e.g. because it returned a 404 error). This allows multiple object elements to be nested inside each other, targeting multiple user agents with different capabilities, with the user agent picking the first one it supports. (emphasis mine)

I believe that answers the question of how the <object> enters the DOM. If it were any other way, for example, element ids in included documents could trample on the DOM of the host page.

Regardless of what capabilities you observe in current user agents, you should ensure included HTML documents are well-structured, and valid.

Further down, consider the included example:

In this example, an HTML page is embedded in another using the object element.

<figure>
    <object data="clock.html"></object>
    <figcaption>My HTML Clock</figcaption>
  </figure>

Note the example refers to an HTML page — not a fragment.

Upvotes: 1

Quentin
Quentin

Reputation: 943510

<object> is a way to include a generic media object.

An HTML document is an example of such.

The HTML spec doesn't describe a means to provide a fragment of HTML to a browser, only a complete document. There is no standard MIME type for a fragment of HTML.

Therefore: You should use complete HTML documents.

That said, if you are going down that route, you would almost certainly be better off using <iframe> which has a much more featureful and robust set of APIs and documentation surrounding it.

How does this appear within the DOM of the original document, if it appears within that DOM at all?

As an object element. The child nodes of which are whatever alternative content you provide between the start and end tag.

Or are the two documents treated entirely separately?

Yes, much like an iframe.

Upvotes: 1

Related Questions