HTML-Iframes

Die YouTube-Lektion nutzte ein bekanntes iframe-Rezept für einen gehosteten Player. Diese Sitzung kehrt zur allgemeinen Idee zurück: ein Inline-Frame zeigt ein anderes HTML-Dokument in einem Rechteck auf deiner Seite — Karten, Docs, Dashboards, Hilfs-Widgets oder eine kleine lokale Seite von dir. Du bist nicht auf Video-Hosts beschränkt. Du rahmst einen verschachtelten Browsing-Kontext mit eigener URL, Scrollbereich und (oft) eigenen Skripten. Behandle YouTube als Spezialfall desselben Elements, nicht als einzigen Grund für iframes.

Was ein iframe leistet

Ein iframe lässt den Browser ein zweites Dokument laden und in reserviertem Platz auf der Elternseite zeichnen. Besucher sehen weiterhin deine Überschriften und Navigation um den Frame, aber Klicks, Scrollen, Formulare und Skripte innen gehören meist zur verschachtelten Seite. Das ist stark für Demos und Tools, die du nicht neu baust — und teuer, wenn du zu viele schwere Drittanbieter-Frames auf eine Anfängerseite stapelst. Trenne mental das Elterndokument, das du schreibst, vom Kinddokument, das der Frame lädt.

Direkte Antwort

Nutze <iframe src="https://example.com/page" title="Description" width="600" height="400"></iframe>. src ist die URL der verschachtelten Seite (remote oder relative lokale Datei). title benennt den Frame für Barrierefreiheit. Breite und Höhe reservieren Layout-Platz. Nicht jede Site erlaubt Einbettung; viele lehnen Framing ab. Wenn kein volles Embed nötig ist, ist ein normaler Link oft klarer, leichter und einfacher zu debuggen.

Einbetten oder nur verlinken?

Einfache Remote-Vorschau

Ein einfaches Muster lädt eine öffentliche Seite, die Einbettung erlaubt (oder scheitert ehrlich). Setze immer einen sinnvollen title.

Das Basisbeispiel lesen

• src zeigt auf die URL des verschachtelten Dokuments
• title ist der Barrierefreiheitsname — Pflichtgewohnheit, kein Schmuck
• width und height reservieren Platz, damit umgebender Text nicht springt
• Bleibt der Frame leer, blockiert das Ziel oft Einbettung; meist Policy, kein kaputtes Tag
• YouTube-Embeds sind eine Spezialnutzung desselben Elements mit Embed-URL aus Share → Embed
• Leere Frames lehren früh: Kontrolle endet, wo die Regeln der anderen Site beginnen

Übung mit lokaler Kindseite

Für zuverlässige Übung lege ein kleines child.html neben die Elternseite und rahme es. Du kontrollierst beide Seiten, also blockiert keine Fremdsite. Das ist der sicherste Weg, das Element zu lernen, bevor du Drittanbieter-Embeds jagst, die fehlen können.

Das lokale Beispiel lesen

• Relatives src="child.html" lädt eine Datei neben dem Elternteil (gleiche Pfadregeln wie Bilder/Skripte)
• Kurze Überschrift und Absatz in child.html, damit Inhalt sichtbar ist
• Kindtext ändern, Elternseite aktualisieren, Frame-Update prüfen
• Dieses Muster lehrt das Element ohne Drittanbieter-Allow-Listen

YouTube-Embeds vs. allgemeine iframes

YouTubers Share → Embed-Dialog füllt geführt ein iframe für ihren Player mit korrekter Embed-URL. Allgemeine iframes nutzen dasselbe Element für jede erlaubte URL: Doku-Viewer, Karten, eigene Hilfsseiten und mehr. Behalte die YouTube-Gewohnheiten (title, sinnvolle Größe, offizielle Embed-URL bei Bedarf) und ergänze das breitere Urteil dieser Sitzung: nur einbetten, wenn Interaktion vor Ort zählt, sonst normaler Link.

Sicherheit und Leistung für Einsteiger

Jedes iframe lädt ein weiteres Dokument, bringt Scroll-Eigenheiten und einen weiteren Ort für mögliche Drittanbieter-Skripte. Fortgeschrittene Attribute wie sandbox können verschachtelte Seiten einschränken — späteres Thema, nachdem Einbetten und Titel sitzen. Drei Anfängerregeln: keine schweren iframe-Stapel über jedem Absatz; Link bevorzugen, wenn ein Besuch ausreicht; leerer Frame heißt nicht kaputtes HTML, wenn das Ziel Framing ablehnt.

Barrierefreiheits-Gewohnheiten

Benenne jedes iframe mit klarem title zum Inhalt („Kurskarte“, „Lokale Übungsseite“), nicht „frame1“ oder leer. Stelle das Embed mit einem kurzen Satz vor. Ist die verschachtelte Seite wesentliches Lernmaterial, biete auch einen normalen Link zur Vollseite. Barrierefreiheit bei Frames heißt Benennung und Kontext, nicht so zu tun, als wären Eltern und Kind ein Dokument.

Übung im Editor

1. Erstelle child.html mit Überschrift und Übungsabsatz.
2. Bette auf der Elternseite mit iframe, klarem title und moderater Größe ein.
3. Öffne die Elternseite lokal und prüfe den Kindinhalt im Rechteck.
4. Optional Remote-URL testen; bleibt sie leer, zurück zum lokalen Kind — oft Policy, kein fehlendes Tag.
5. Normalen Link zur gleichen Kind-URL ergänzen und mit dem Frame vergleichen.
6. Einen Satz über dem Frame schreiben und prüfen, ob title dazu passt.

Leichte Fehler

• Fehlender title am iframe
• Annehmen, jede externe Site lade im Frame
• Viele schwere iframes auf einer Seite stapeln
• „URL im Absatz verlinkt“ mit „Frame eingebettet“ verwechseln
• Blockiertes Remote-Embed als kaputten src-Pfad behandeln
• Vergessen, dass YouTube nur ein iframe-Rezept ist

Zusammenfassung

• iframe bettet eine andere Seite über src ein
• Immer einen klaren title setzen
• Das Ziel kann Einbettung blockieren
• Normalen Link bevorzugen, wenn keine Interaktion vor Ort nötig ist
• Sicher mit lokalem child.html üben, bevor Drittanbieter-Seiten nötig sind