HTML Iframe
Ein HTML-Iframe wird verwendet, um eine Webseite innerhalb einer Webseite anzuzeigen.
HTML Iframe Syntax
Das HTML-Tag <iframe> gibt einen Inline-Frame an.
Ein Inline-Frame wird verwendet, um ein anderes Dokument in das aktuelle HTML-Dokument einzubetten.
Syntax
<iframe src="url" title="Beschreibung"></iframe>
Tipp: Es empfiehlt sich, immer ein title-Attribut für den <iframe> einzufügen. Dies wird von Screenreadern verwendet, um den Inhalt des Iframes vorzulesen.
Iframe - Legen Sie Höhe und Breite fest
Verwenden Sie die Attribute height und width, um die Größe des Iframes anzugeben.
Höhe und Breite werden standardmäßig in Pixel angegeben:
Beispiel
<iframe src="demo_iframe.htm" height="200" width="300" title="Iframe Beispiel"></iframe>
Try it Yourself »
Oder Sie können das Attribut style hinzufügen und die CSS-Elemente verwenden height und width-Eigenschaften:
Beispiel
<iframe src="demo_iframe.htm" style="height:200px;width:300px;" title="Iframe Beispiel"></iframe>
Try it Yourself »
Iframe - Entfernen Sie den Rand
Standardmäßig ist ein Iframe von einem Rahmen umgeben.
Um den Rahmen zu entfernen, fügen Sie das Attribut style hinzu und verwenden Sie die CSS-Eigenschaft border:
Beispiel
<iframe src="demo_iframe.htm" style="border:none;" title="Iframe Beispiel"></iframe>
Try it Yourself »
Mit CSS können Sie auch Größe, Stil und Farbe des Iframe-Rahmens ändern:
Beispiel
<iframe src="demo_iframe.htm" style="border:2px solid red;" title="Iframe Beispiel"></iframe>
Try it Yourself »
Iframe — Ziel für einen Link
Ein Iframe kann als Zielframe für einen Link verwendet werden.
Das Attribut target des Links muss auf das Attribut name des Iframes verweisen:
Beispiel
<iframe src="demo_iframe.htm" name="iframe_a" title="Iframe Beispiel"></iframe>
<p><a href="https://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>
Try it Yourself »
Kapitelzusammenfassung
- Das HTML-Tag
<iframe>gibt einen Inline-Frame an - Das Attribut
srcdefiniert die URL der einzubettenden Seite - Fügen Sie immer ein
title-Attribut ein (für Bildschirmleseprogramme) - Die Attribute
heightundwidthgeben die Größe des Iframes an - Verwenden Sie
border:none;, um den Rahmen um den Iframe zu entfernen
HTML Übungen
HTML iframe Tag
| Tag | Beschreibung |
|---|---|
| <iframe> | Definiert einen Inline-Frame |
Eine vollständige Liste aller verfügbaren HTML-Tags finden Sie in unserer HTML-Tag-Referenz.
