HTML <frameset>-Tag

Das <frameset>-Tag definierte die Struktur einer in mehrere Frames aufgeteilten Seite — separate scrollbare Bereiche, von denen jeder sein eigenes HTML-Dokument lädt. Es ersetzte das <body>-Element und verwendete die Attribute rows und cols, um Frames in einem Raster anzuordnen.

Gefahr

Die Tags <frameset> und <frame> sind veraltete HTML-Tags. Sie wurden in HTML5 entfernt und dürfen auf neuen Seiten nicht mehr verwendet werden. Ein HTML5-Dokument (eines, das mit <!DOCTYPE html> beginnt) kann kein Frameset verwenden. Diese Seite dokumentiert das veraltete Element und zeigt, was stattdessen verwendet werden sollte.

Diese Seite erklärt, was <frameset> bewirkt hat, warum es veraltet ist, und die modernen, barrierefreien Alternativen: CSS Grid- und Flexbox-Layouts zum Aufteilen der eigenen Seite in Bereiche sowie das <iframe>-Element zum Einbetten eines anderen Dokuments.

Warum `<frameset>` veraltet ist

Framesets wurden aus der Webplattform entfernt, weil sie grundlegendes Browserverhalten und die Barrierefreiheit beeinträchtigten. Die wichtigsten Probleme:

Defekte Navigation, Lesezeichen und Verlauf. Die Adressleiste zeigte nur die URL des äußeren Framesets, nie das Dokument innerhalb eines Frames. Benutzer konnten weder ein Lesezeichen setzen noch teilen, was sie tatsächlich sahen, und die Zurück-Schaltfläche des Browsers verhielt sich unvorhersehbar.
Defekter Druck. Der Druck eines Framesets lieferte typischerweise den falschen Frame oder eine leere Seite, da kein einzelnes Dokument zum Drucken vorhanden war.
Barrierefreiheitsprobleme. Screenreader hatten Schwierigkeiten zu vermitteln, dass die Seite aus mehreren unabhängigen Dokumenten bestand; Tastaturbenutzer konnten beim Wechseln des Fokus zwischen Frames feststecken, und die Fokusreihenfolge war inkonsistent.
Sicherheit (Clickjacking). Das Laden beliebiger Seiten in Frames ermöglichte Clickjacking-Angriffe. Moderne Websites schützen sich dagegen mit den Headern X-Frame-Options und Content-Security-Policy — die oft das Laden innerhalb eines Frames ganz verweigern.
Aus HTML5 entfernt. Aus all diesen Gründen hat die HTML5-Spezifikation Framesets vollständig gestrichen.

Barrierefreiheit

Framesets sind für assistive Technologie (AT) problematisch. Ein Screenreader präsentiert jeweils ein Dokument, sodass ein Fenster aus mehreren Frames keine natürliche Lesereihenfolge hat — Benutzer müssen Frames manuell entdecken und zwischen ihnen wechseln, mit wenig Kontext darüber, wie sie zusammenhängen. Auch die Tastaturnavigation leidet darunter: Die Tab-Reihenfolge über Frame-Grenzen hinweg ist unzuverlässig, und der Fokus kann in einem Frame feststecken, den der Benutzer nur schwer verlassen kann. Keine dieser Probleme tritt bei einem einzigen, gut strukturierten HTML5-Dokument auf, das mit CSS gestaltet wird.

Syntax

Das <frameset>-Tag kommt paarweise vor. Der Inhalt wird zwischen dem öffnenden (<frameset>) und dem schließenden (</frameset>) Tag geschrieben.

Das <frameset>-Tag kann einen oder mehrere <frame>-Tags enthalten. Es ist erlaubt, ein <frameset>-Tag in einem anderen zu verschachteln, wenn es notwendig ist, die Fenster in kleinere aufzuteilen.

Tipp

Das Frameset-Dokument verwendet das <frameset>-Element anstelle des <body>-Elements. Das Frameset-Element darf keinen Inhalt enthalten, sondern definiert und benennt in Zeilen und/oder Spalten angeordnete Frames.

Beispiel des HTML-`<frameset>`-Tags:

<!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="https://www.w3docs.com/learn-html/html-basic.html">
    <frame src="https://www.w3docs.com/learn-css/css-syntax.html">
  </frameset>
</html>

Probier es selbst »

Ergebnis

Beispiel des HTML-`<frameset>`-Tags mit dem rows-Attribut:

<!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%,40%,30%">
    <frame src="https://www.w3docs.com/learn-javascript.html">
    <frame src="https://www.w3docs.com/learn-git.html">
    <frame src="https://www.w3docs.com/learn-php.html">
  </frameset>
</html>

Probier es selbst »

Moderne Alternativen

Alles, was <frameset> leistete, wird jetzt besser mit CSS und <iframe> erledigt.

Eigene Seite in Bereiche aufteilen (CSS Grid)

Um ein einzelnes Dokument in eine Seitenleiste, eine Kopfzeile und einen Inhaltsbereich aufzuteilen — der klassische Anwendungsfall für Framesets — verwende CSS Grid. Es ist ein einzelnes Dokument, sodass Navigation, Lesezeichen, Druck und Screenreader normal funktionieren.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Two-pane layout with CSS Grid</title>
    <style>
      body { margin: 0; }
      .layout {
        display: grid;
        grid-template-columns: 200px 1fr;
        height: 100vh;
      }
      .sidebar { background: #f4f4f4; padding: 1rem; overflow: auto; }
      .content { padding: 1rem; overflow: auto; }
    </style>
  </head>
  <body>
    <div class="layout">
      <nav class="sidebar">Sidebar</nav>
      <main class="content">Main content</main>
    </div>
  </body>
</html>

Ein flexibles Zeilen-und-Spalten-Layout kann auch mit Flexbox erstellt werden.

Externe Seite einbetten (`<iframe>`)

Um eine separate Webseite in das eigene Dokument zu laden — das Einzige, was <frame> bot, was CSS nicht bietet — verwende ein <iframe>. Anders als Framesets ist ein iframe ein gültiges HTML5-Element, hält die URL der übergeordneten Seite als Lesezeichen speicherbar und unterstützt Sandboxing für die Sicherheit.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Embedding with an iframe</title>
  </head>
  <body>
    <h1>My page</h1>
    <iframe
      src="https://www.w3docs.com/"
      title="W3docs home page"
      width="600"
      height="400">
    </iframe>
  </body>
</html>

Gib einem <iframe> immer ein beschreibendes title-Attribut, damit assistive Technologie seinen Zweck ankündigen kann.

Attribute

In einem echten Frameset waren nur zwei Attribute standardisiert: rows und cols.

Attribut	Wert	Beschreibung
cols	Pixel, %, *	Definiert die Anzahl und Größe der Frame-Spalten. In HTML5 entfernt.
rows	Pixel, %, *	Definiert die Anzahl und Größe der Frame-Zeilen. In HTML5 entfernt.

Hinweis: In HTML 4.01 konnte frameborder sowohl auf <frameset> (als Standard für seine Frames) als auch auf jeden einzelnen <frame> gesetzt werden. framespacing war eine nicht standardisierte Erweiterung von Netscape/Internet Explorer und war nie Teil der HTML-Spezifikation. Beide sind veraltet und sollten nicht verwendet werden.

Das <frameset>-Element unterstützte auch die globalen Attribute.

Übungen

Übung

Warum sollte das HTML-Frameset-Element auf neuen Seiten nicht verwendet werden?

Es wurde aus HTML5 entfernt und beeinträchtigt Navigation, Lesezeichen, Druck und Barrierefreiheit.Es funktioniert nur in HTML5-Dokumenten.Es wird langsamer gerendert als eine Tabelle.Es erfordert aktiviertes JavaScript.

Übung

Welches moderne Element ersetzt ein Frameset beim Einbetten einer separaten externen Seite?

Das iframe-Element.Das frame-Element.Die CSS-float-Eigenschaft.Das table-Element.

Warum <frameset> veraltet ist