HTML <frame>-Tag
Der <frame>-Tag wurde aus HTML5 entfernt und wird von keinem modernen Browser dargestellt. Historische Referenz und moderne Alternativen: <iframe> und CSS-Layout.
Der <frame>-Tag (zusammen mit seinem Container <frameset>) wurde aus HTML5 entfernt und wird von keinem modernen Browser dargestellt — verwende ihn nicht. Diese Seite dient als historische Referenz. Wenn du eine andere Webseite einbetten möchtest, verwende das <iframe>-Element; für ein mehrteiliges Layout nutze stattdessen CSS Grid oder Flexbox.
<frame> und <frameset> sind veraltete HTML-Elemente. Sie sind kein Bestandteil des HTML-Standards und haben in keinem aktuellen Browser eine Wirkung. In den folgenden Abschnitten wird erklärt, wozu sie früher dienten, und es werden die modernen Alternativen vorgestellt.
Was <frame> früher tat
In HTML 4 und XHTML 1.0 Frameset konnte ein einzelnes Browserfenster in unabhängige Bereiche aufgeteilt werden. Jeder Bereich lud ein eigenes HTML-Dokument, scrollte separat und konnte von Links angesteuert werden.
Die Struktur sah folgendermaßen aus: Das <frameset>-Element ersetzte den <body>-Tag und beschrieb, wie das Fenster unterteilt wurde: Das cols-Attribut erzeugte vertikale Bereiche, das rows-Attribut horizontale Bereiche, und die Größe jedes Bereichs wurde in Prozent oder Pixeln angegeben. Ein <frame> darin verwies mit dem src-Attribut auf ein Dokument. Der <frame>-Tag war leer (kein schließendes Tag), musste aber in XHTML selbstschließend sein (<frame />).
Veraltetes Beispiel — zwei vertikale Bereiche (funktioniert heute nicht)
<!-- HISTORICAL ONLY: this renders nothing in modern browsers -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Title of the document</title>
</head>
<frameset cols="50%,50%">
<frame src="page-left.html">
<frame src="page-right.html">
<noframes>
<body>Your browser does not support frames.</body>
</noframes>
</frameset>
</html>Das <noframes>-Element enthielt Fallback-Inhalt für die wenigen Browser, die keine Frames anzeigen konnten. Auch dieses Element ist veraltet.
Veraltetes Beispiel — drei horizontale Bereiche mit rows (funktioniert heute nicht)
<!-- HISTORICAL ONLY: this renders nothing in modern browsers -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Title of the document</title>
</head>
<frameset rows="30%,30%,40%">
<frame src="top.html">
<frame src="middle.html">
<frame src="bottom.html">
</frameset>
</html>Moderne Alternativen
Eine Seite einbetten: <iframe>
Um ein anderes HTML-Dokument innerhalb der aktuellen Seite zu laden, verwende das <iframe>-Element. Im Gegensatz zu <frame> ist es ein normales Inline-Element, das im regulären Seitenfluss existiert und daher neben gewöhnlichem Inhalt funktioniert.
<!DOCTYPE html>
<html>
<head>
<title>Embedding a page</title>
</head>
<body>
<h1>Documentation</h1>
<iframe
src="https://www.w3docs.com/"
title="W3docs home page"
width="600"
height="400">
</iframe>
</body>
</html>Mehrteiliges Layout: CSS Grid oder Flexbox
Das klassische „Header, Sidebar, Inhalt"-Frameset-Layout wird heute mit semantischen Elementen aufgebaut, die mit CSS gestaltet werden — alles in einem einzigen Dokument, sodass Links, Lesezeichen und die Zurück-Schaltfläche normal funktionieren.
<!DOCTYPE html>
<html>
<head>
<title>Modern layout</title>
<style>
body {
margin: 0;
display: grid;
grid-template-columns: 200px 1fr;
grid-template-rows: 60px 1fr;
grid-template-areas:
"header header"
"sidebar main";
height: 100vh;
}
header { grid-area: header; background: #222; color: #fff; }
nav { grid-area: sidebar; background: #eee; }
main { grid-area: main; padding: 1rem; overflow: auto; }
</style>
</head>
<body>
<header>Site title</header>
<nav>Sidebar links</nav>
<main>Main content goes here.</main>
</body>
</html>Weitere Informationen zu diesen Layout-Techniken findest du unter The Ultimate Guide to Flexbox und grid-template-areas.
Warum Frames abgelöst wurden
Frames ermöglichten es früher, mehrere Dokumente in einem Fenster anzuzeigen und Seiten von verschiedenen Servern nebeneinander zu laden. Diese Vorteile werden heute besser durch <iframe> und CSS-Layout erfüllt, während die Nachteile ausschlaggebend blieben:
- Eine URL verwies nur auf das Frameset, sodass einzelne Bereiche nicht mit einem Lesezeichen versehen, geteilt oder mit der Zurück-Schaltfläche wiederhergestellt werden konnten.
- Suchmaschinen indizierten die gerahmten Dokumente isoliert, was der SEO schadete.
- Sie verursachten Probleme bei der Barrierefreiheit und beim Drucken.
- Sie wurden aus HTML5 entfernt und werden von keinem aktuellen Browser unterstützt.
Frames vs. iframes
Die Elemente <frame> und <iframe> verhielten sich ähnlich, was der Hauptgrund dafür ist, dass <iframe> als empfohlene Alternative gilt. Der wesentliche Unterschied: <frame> existierte nur innerhalb eines <frameset>, das den gesamten <body> ersetzte, während <iframe> ein gewöhnliches Element ist, das direkt in den Seitenfluss neben andere Inhalte eingefügt werden kann — und im Gegensatz zu <frame> ist es noch immer Teil von HTML.
Attribute (veraltet)
Das gesamte <frame>-Element ist veraltet, daher haben keines der unten aufgeführten Attribute in HTML5 oder aktuellen Browsern eine Wirkung. Sie sind zum Nachschlagen in veralteten Markup-Dokumenten aufgeführt.
| Attribut | Wert | Beschreibung |
|---|---|---|
| bordercolor | color | Definierte die Farbe des Rahmens um den Frame. |
| frameborder | 0, 1 | Definierte, ob der Rahmen um den Frame angezeigt wurde. |
| longdesc | URL | Verwies auf eine Seite mit einer ausführlichen Beschreibung des Frame-Inhalts. |
| marginheight | pixels | Definierte den oberen und unteren Rand des Frames. |
| marginwidth | pixels | Definierte den linken und rechten Rand des Frames. |
| name | text | Definierte den Namen des Frames, der verwendet wurde, um ihn von Links aus anzusteuern. |
| noresize | noresize | Definierte, ob der Benutzer die Größe des Frames ändern konnte. |
| scrolling | yes, no, auto | Definierte, ob die Scrollleiste angezeigt wurde. |
| src | URL | Definierte die URL der im Frame geladenen Seite. |