diff options
Diffstat (limited to 'files/el/web/html/element/embed/index.html')
| -rw-r--r-- | files/el/web/html/element/embed/index.html | 120 |
1 files changed, 120 insertions, 0 deletions
diff --git a/files/el/web/html/element/embed/index.html b/files/el/web/html/element/embed/index.html new file mode 100644 index 0000000000..0a6e398b10 --- /dev/null +++ b/files/el/web/html/element/embed/index.html @@ -0,0 +1,120 @@ +--- +title: '<embed>: The Embed External Content element' +slug: Web/HTML/Element/embed +translation_of: Web/HTML/Element/embed +--- +<div>{{HTMLRef}}</div> + +<p>The <strong>HTML <code><embed></code> element</strong> embeds external content at the specified point in the document. This content is provided by an external application or other source of interactive content such as a browser plug-in.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/embed.html", "tabbed-standard")}}</div> + +<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</div> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> This topic documents only the element that is defined as part of HTML5. It does not address earlier, non-standardized implementation of the element.</p> +</div> + +<p>Keep in mind that most modern browsers have deprecated and removed support for browser plug-ins, so relying upon <code><embed></code> is generally not wise if you want your site to be operable on the average user's browser.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/Guide/HTML/Content_categories">Content categories</a></th> + <td><a href="/en-US/docs/Web/Guide/HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content">phrasing content</a>, embedded content, interactive content, <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Palpable_content">palpable content</a>.</td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td>None, it is an {{Glossary("empty element")}}.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>Must have a start tag, and must not have an end tag.</td> + </tr> + <tr> + <th scope="row">Permitted parents</th> + <td>Any element that accepts embedded content.</td> + </tr> + <tr> + <th scope="row">Implicit ARIA role</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">No corresponding role</a></td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td>{{ARIARole("application")}}, {{ARIARole("document")}}, {{ARIARole("img")}}, {{ARIARole("none")}}, {{ARIARole("presentation")}}</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLEmbedElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes">Attributes</h2> + +<p>This element's attributes include the <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</p> + +<dl> + <dt>{{htmlattrdef("height")}}</dt> + <dd>The displayed height of the resource, in <a href="https://drafts.csswg.org/css-values/#px">CSS pixels</a>. This must be an absolute value; percentages are <em>not</em> allowed.</dd> + <dt>{{htmlattrdef("src")}}</dt> + <dd>The URL of the resource being embedded.</dd> + <dt>{{htmlattrdef("type")}}</dt> + <dd>The {{glossary("MIME type")}} to use to select the plug-in to instantiate.</dd> + <dt>{{htmlattrdef("width")}}</dt> + <dd>The displayed width of the resource, in <a href="https://drafts.csswg.org/css-values/#px">CSS pixels</a>. This must be an absolute value; percentages are <em>not</em> allowed.</dd> +</dl> + +<h2 id="Usage_notes">Usage notes</h2> + +<p>You can use the {{cssxref("object-position")}} property to adjust the positioning of the embedded object within the element's frame, and the {{cssxref("object-fit")}} property to control how the object's size is adjusted to fit within the frame.</p> + +<h2 id="Παράδειγμα">Παράδειγμα</h2> + +<pre class="brush: html notranslate"><embed type="video/quicktime" src="movie.mov" width="640" height="480" title="Title of my video"> +</pre> + +<h2 id="Accessibility_concerns">Accessibility concerns</h2> + +<p>Use the <a href="/en-US/docs/Web/HTML/Global_attributes/title"><code>title</code> attribute</a> on an <code>embed</code> element to label its content so that people navigating with assistive technology such as a screen reader can understand what it contains. The title's value should concisely describe the embedded content. Without a title, they may not be able to determine what its embedded content is. This context shift can be confusing and time-consuming, especially if the <code>embed</code> element contains interactive content like video or audio.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'embedded-content.html#the-embed-element', '<embed>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'semantics-embedded-content.html#the-embed-element', '<embed>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div class="note"> +<p><strong>Note</strong>: Prior to version 45, Firefox did not display content of HTML resource, but a generic message saying the content needs a plug-in (see {{Bug("730768")}}).</p> +</div> + +<div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("html.elements.embed")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>Other elements that are used for embedding content of various types include {{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{MathMLElement("math")}}, {{HTMLElement("object")}}, {{SVGElement("svg")}}, and {{HTMLElement("video")}}.</li> + <li>Positioning and sizing the embedded content within its frame: {{cssxref("object-position")}} and {{cssxref("object-fit")}}</li> +</ul> |