<area>

Das <area>-Element definiert einen klickbaren Bereich innerhalb einer Image Map. Es verhält sich wie ein unsichtbarer Link, der über einem bestimmten Teil eines Bildes liegt. Die Form und Position des Bereichs wird über shape und coords bestimmt. Rechtecke, Kreise und beliebige Polygone sind möglich.

Steckbrief <area>

Kategorie: Links & Medien
Art: Leeres Element
Attribute: 7
Beispiele: 4
Browser: 5 von 5
E-Mail: 5 von 5
Stand: 04.02.2026

Grundlagen

<area> ist das Element, das Image Maps interaktiv macht. Ohne <area> wäre eine <map> nur ein leerer Container. Jedes <area> beschreibt genau einen klickbaren Bereich mit Form, Koordinaten und Ziel-URL.

<area> ist ein Void-Element: Es hat keinen schließenden Tag und keinen Inhalt
Es darf nur innerhalb von <map> verwendet werden, außerhalb hat es keine Wirkung
Das shape-Attribut bestimmt die Form: rect (Rechteck), circle (Kreis), poly (Polygon) oder default (gesamtes Bild)
Die coords definieren die Pixel-Koordinaten der Form, relativ zur Original-Bildgröße
<area> verhält sich wie ein <a>-Element: Es unterstützt href, target, download und rel
Wenn href gesetzt ist, ist das alt-Attribut Pflicht
Ohne href ist <area> ein nicht-interaktiver Bereich und blockiert dann Klicks auf darunterliegende Bereiche

Syntax

index.html

Grundsyntax

<img src="bild.jpg"
     usemap="#meine-map"
     alt="Bild mit klickbaren Bereichen"
     width="300" height="200">

<map name="meine-map">
  <area shape="rect"
        coords="50,50,250,150"
        href="ziel.html"
        alt="Klickbarer Bereich">
</map>

Attribute

7 Attribute

Attribut und Beispiel	Beschreibung
`shape` String shape="rect"	Form des klickbaren Bereichs: rect (Rechteck), circle (Kreis), poly (Polygon) oder default (gesamtes Bild als Fallback).
`coords` String coords="0,0,100,80"	Komma-getrennte Pixel-Koordinaten. Format abhängig von shape: rect: x1,y1,x2,y2 \| circle: x,y,radius \| poly: x1,y1,x2,y2,...,xn,yn. Nicht nötig bei shape="default".
`href` URL href="seite.html"	Ziel-URL des Links. Ohne href ist der Bereich nicht klickbar.
`alt` String alt="Zur Startseite"	Alternativer Text für Screenreader. Pflicht, wenn href gesetzt ist. Beschreibt den Zweck des Links, nicht die Form.
`target` String target="_blank"	Wo der Link geöffnet wird: _self (Standard, gleicher Tab), _blank (neuer Tab), _parent, _top oder ein benanntes Fenster/Frame.
`download` String/Boolean download="karte.pdf"	Löst einen Download statt einer Navigation aus. Optionaler Wert: vorgeschlagener Dateiname.
`rel` String rel="noopener"	Beziehung zwischen aktuellem Dokument und Linkziel. Wichtig: Bei target="_blank" immer rel="noopener" setzen.

Beispiele

4 Beispiele

Rechtecke sind die einfachste Form. Die Koordinaten definieren die obere linke Ecke (x1,y1) und die untere rechte Ecke (x2,y2).

index.html

Rechteckige Bereiche

<img src="bereiche.jpg"
     usemap="#rect-map"
     alt="Zwei klickbare Bereiche"
     width="400" height="100">

<map name="rect-map">
  <!-- x1,y1 (oben-links) bis x2,y2 (unten-rechts) -->
  <area shape="rect"
        coords="0,0,200,100"
        href="bereich1.html"
        alt="Bereich 1">
  <area shape="rect"
        coords="200,0,400,100"
        href="bereich2.html"
        alt="Bereich 2">
</map>

Kreise werden durch Mittelpunkt (x,y) und Radius definiert. Sie eignen sich gut für runde Buttons, Icons oder Punkte auf einer Karte.

index.html

Kreisförmiger Bereich

<img src="karte.jpg"
     usemap="#circle-map"
     alt="Standortkarte"
     width="300" height="300">

<map name="circle-map">
  <!-- x,y (Mittelpunkt), Radius -->
  <area shape="circle"
        coords="150,150,80"
        href="standort.html"
        alt="Unser Standort">
</map>

Polygone erlauben beliebige Formen. Die Koordinaten sind Paare von x,y-Werten für jeden Eckpunkt. Der Browser verbindet den letzten Punkt automatisch mit dem ersten.

index.html

Polygon-Bereich

<img src="formen.jpg"
     usemap="#poly-map"
     alt="Bild mit Dreieck"
     width="300" height="260">

<map name="poly-map">
  <!-- Eckpunkte: x1,y1, x2,y2, x3,y3 -->
  <area shape="poly"
        coords="150,20,280,240,20,240"
        href="dreieck.html"
        alt="Dreieckiger Bereich">
</map>

shape="default" deckt das gesamte Bild ab. Er wird als Fallback verwendet: Wenn ein Klick keinen anderen Bereich trifft, greift der Default-Bereich.

<img src="bild.jpg"
     usemap="#fallback-map"
     alt="Bild mit Fallback-Link"
     width="400" height="300">

<map name="fallback-map">
  <area shape="circle"
        coords="200,150,60"
        href="details.html"
        alt="Details anzeigen">
  <!-- Fallback für den Rest des Bildes -->
  <area shape="default"
        href="uebersicht.html"
        alt="Zur Übersicht">
</map>

Barrierefreiheit

Das alt-Attribut auf <area> ist der Schlüssel zur Barrierefreiheit. Screenreader listen die <area>-Elemente als Links auf. Ohne alt-Text wären diese Links stumm und unbrauchbar.

Formuliere den alt-Text so, dass er den Zweck des Links beschreibt, nicht die Form oder Position:

Gut: alt="Zum Blog", alt="Unseren Standort auf der Karte anzeigen"
Schlecht: alt="Rechteck oben links", alt="Klicken Sie hier"

Bei komplexen Image Maps solltest du eine textbasierte Alternative anbieten, zum Beispiel eine Liste mit den gleichen Links unterhalb des Bildes. So stellst du sicher, dass alle Nutzer die Navigation nutzen können, auch wenn die Image Map nicht zugänglich ist.

Häufige Fehler

4 Fehler

01 alt-Attribut fehlt bei <area> mit href

Wenn ein <area> ein href hat, ist alt laut HTML-Spezifikation Pflicht. Ohne alt ist der klickbare Bereich für Screenreader-Nutzer unsichtbar.

02 coords passen nicht zur shape

Jede Form hat ein eigenes Koordinaten-Format. rect braucht 4 Werte, circle braucht 3, poly braucht mindestens 6 (3 Punkte). Falsche Anzahl oder Reihenfolge führt zu unerwartetem Verhalten.

03 <area> außerhalb von <map> verwenden

Ein <area> ohne umschließendes <map> hat keine Funktion. Der Browser ignoriert es stillschweigend (kein Fehler, aber auch keine Wirkung).

04 Überlappende Bereiche ohne Priorisierung

Wenn sich <area>-Bereiche überlappen, gewinnt der zuerst definierte. Das kann verwirrend sein, wenn der Nutzer auf einen Überlappungsbereich klickt und nicht den erwarteten Link erhält. Vermeide Überlappungen oder sortiere die <area>-Elemente so, dass kleinere Bereiche vor größeren stehen.

Browser-Kompatibilität

5 von 5

Das area-Element wird seit den Anfängen des Webs von allen Browsern unterstützt. Alle Formen (rect, circle, poly, default) funktionieren zuverlässig.

Chrome

Komplett

Seit Version 1
Firefox

Komplett

Seit Version 1
Safari

Komplett

Seit Version 1
Edge

Komplett
Opera

Komplett

Email-Kompatibilität

5 von 5

area-Elemente innerhalb von Image Maps werden von den meisten Email-Clients unterstützt. Image Maps gehören zu den wenigen interaktiven HTML-Features, die in E-Mails breit funktionieren.

Apple Mail

Komplett

Volle Unterstützung aller Formen (rect, circle, poly).
Gmail

Komplett

Image Maps mit area-Elementen funktionieren in Gmail korrekt.
Outlook

Komplett

Outlook unterstützt Image Maps zuverlässig, auch in älteren Versionen.
Thunderbird

Komplett
Yahoo Mail

Komplett

Volle Unterstützung.

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da

<area>

Grundlagen

Syntax

Attribute

Beispiele

Barrierefreiheit

Häufige Fehler

Browser-Kompatibilität

Email-Kompatibilität

Newsletter