diff options
Diffstat (limited to 'files/el/web/html/element')
| -rw-r--r-- | files/el/web/html/element/embed/index.html | 120 | ||||
| -rw-r--r-- | files/el/web/html/element/index.html | 109 |
2 files changed, 229 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> diff --git a/files/el/web/html/element/index.html b/files/el/web/html/element/index.html new file mode 100644 index 0000000000..216697c5a6 --- /dev/null +++ b/files/el/web/html/element/index.html @@ -0,0 +1,109 @@ +--- +title: HTML elements reference +slug: Web/HTML/Element +tags: + - Basic + - Element + - HTML + - NeedsTranslation + - Reference + - TopicStub + - Web + - 'l10n:priority' +translation_of: Web/HTML/Element +--- +<div>{{HTMLSidebar("Elements")}}</div> + +<p><span class="seoSummary">This page lists all the {{Glossary("HTML")}} {{Glossary("Element","elements")}}, which are created using {{Glossary("Tag", "tags")}}.</span> They are grouped by function to help you find what you have in mind easily. An alphabetical list of all elements is provided in the sidebar on every element's page as well as this one.</p> + +<div class="note"> +<p>For more information about the basics of HTML elements and attributes, see <a href="/en-US/docs/Web/Guide/HTML/Introduction#Elements_%E2%80%94_the_basic_building_blocks">the section on elements in the Introduction to HTML article</a>.</p> +</div> + +<h2 id="Main_root">Main root</h2> + +<p>{{HTMLRefTable("HTML Root Element")}}</p> + +<h2 id="Document_metadata">Document metadata</h2> + +<p>Metadata contains information about the page. This includes information about styles, scripts and data to help software ({{Glossary("search engine", "search engines")}}, {{Glossary("Browser","browsers")}}, etc.) use and render the page. Metadata for styles and scripts may be defined in the page or link to another file that has the information. </p> + +<p>{{HTMLRefTable("HTML Document Metadata")}}</p> + +<h2 id="Sectioning_root">Sectioning root</h2> + +<p>{{HTMLRefTable("Sectioning Root Element")}}</p> + +<h2 id="Content_sectioning">Content sectioning</h2> + +<p>Content sectioning elements allow you to organize the document content into logical pieces. Use the sectioning elements to create a broad outline for your page content, including header and footer navigation, and heading elements to identify sections of content. </p> + +<p>{{HTMLRefTable("HTML Sections")}}</p> + +<h2 id="Text_content">Text content</h2> + +<p>Use HTML text content elements to organize blocks or sections of content placed between the opening {{HTMLElement("body")}} and closing <code></body></code> tags. Important for {{Glossary("accessibility")}} and {{Glossary("SEO")}}, these elements identify the purpose or structure of that content. </p> + +<p>{{HTMLRefTable("HTML Grouping Content")}}</p> + +<h2 id="Inline_text_semantics">Inline text semantics</h2> + +<p>Use the HTML inline text semantic to define the meaning, structure, or style of a word, line, or any arbitrary piece of text.</p> + +<p>{{HTMLRefTable("HTML Text-Level Semantics")}}</p> + +<h2 id="Image_and_multimedia">Image and multimedia</h2> + +<p>HTML supports various multimedia resources such as images, audio, and video.</p> + +<p>{{HTMLRefTable("multimedia")}}</p> + +<h2 id="Embedded_content">Embedded content</h2> + +<p>In addition to regular multimedia content, HTML can include a variety of other content, even if it's not always easy to interact with.</p> + +<p>{{HTMLRefTable({"include":["HTML embedded content"], "exclude":["multimedia"]})}}</p> + +<h2 id="Scripting">Scripting</h2> + +<p>In order to create dynamic content and Web applications, HTML supports the use of scripting languages, most prominently JavaScript. Certain elements support this capability.</p> + +<p>{{HTMLRefTable("HTML Scripting")}}</p> + +<h2 id="Demarcating_edits">Demarcating edits</h2> + +<p>These elements let you provide indications that specific parts of the text have been altered.</p> + +<p>{{HTMLRefTable("HTML Edits")}}</p> + +<h2 id="Table_content">Table content</h2> + +<p>The elements here are used to create and handle tabular data.</p> + +<p>{{HTMLRefTable("HTML tabular data")}}</p> + +<h2 id="Forms">Forms</h2> + +<p>HTML provides a number of elements which can be used together to create forms which the user can fill out and submit to the Web site or application. There's a great deal of further information about this available in the <a href="/en-US/docs/Web/Guide/HTML/Forms">HTML forms guide</a>.</p> + +<p>{{HTMLRefTable({"include": ["HTML forms"], "exclude":["Deprecated"]})}}</p> + +<h2 id="Interactive_elements">Interactive elements</h2> + +<p>HTML offers a selection of elements which help to create interactive user interface objects.</p> + +<p>{{HTMLRefTable("HTML interactive elements")}}</p> + +<h2 id="Web_Components">Web Components</h2> + +<p>Web Components is an HTML-related technology which makes it possible to, essentially, create and use custom elements as if it were regular HTML. In addition, you can create custom versions of standard HTML elements.</p> + +<p>{{HTMLRefTable({"include":["Web Components"],"exclude":["Deprecated", "Obsolete"]})}}</p> + +<h2 id="Obsolete_and_deprecated_elements">Obsolete and deprecated elements</h2> + +<div class="warning"> +<p><strong>Warning:</strong> These are old HTML elements which are deprecated and should not be used. <strong>You should never use them in new projects, and should replace them in old projects as soon as you can.</strong> They are listed here for informational purposes only.</p> +</div> + +<p>{{HTMLRefTable({"include":["Deprecated","Obsolete"]})}}</p> |