HTML <area> tag

Der <area>-Tag definiert die aktiven Bereiche (Koordinaten, Form, Größe usw.) einer Image-Map, die durch den <map>-Tag festgelegt wird. Wenn Sie auf einen aktiven Bereich des Bildes klicken, wird eine bestimmte Aktion ausgelöst – zum Beispiel der Wechsel zu einer Seite mit detaillierten Informationen.

Diese Seite erklärt, was <area> leistet, wie das coords-Koordinatensystem funktioniert, alle Shape-Werte (einschließlich poly und default), die Barrierefreiheitsregeln, die Sie beachten müssen, sowie die Einschränkung bei responsiven Layouts, die in echten Projekten häufig Probleme bereitet.

Der <area>-Tag wird immer innerhalb des <map>-Tags platziert. Aktive Bereiche können sich überlappen. In diesem Fall wird beim Klicken der Bereich aktiviert, der später im DOM erscheint.

Warum und wann eine Image-Map verwenden

Eine Image-Map macht Teile eines einzelnen <img>-Elements zu separaten anklickbaren Links. Jedes <area> wird zu einem eigenen Hotspot mit einem eigenen href, sodass ein Bild zu mehreren Zielen führen kann – etwa ein anklickbares Diagramm, ein Grundriss oder eine Regionenkarte.

Sie verbinden ein Bild mit seiner Map über das usemap-Attribut im <img>-Tag, das auf den name der Map verweist (z. B. usemap="#blockmap" entspricht <map name="blockmap">).

Wann eine Image-Map sinnvoll ist:

Die anklickbaren Bereiche liegen tatsächlich innerhalb eines einzelnen Rasterbildes (ein Foto, ein eingescanntes Diagramm) und lassen sich nicht leicht in separate Elemente aufteilen.
Die Formen sind unregelmäßig (ein Länderumriss, ein nicht-rechteckiger Hotspot), bei dem ein poly-Bereich die natürliche Lösung ist.

Wann eine Alternative besser geeignet ist:

Rechteckige Hotspots über separaten Inhalten → Verwenden Sie einfach einzelne <a>-Links (jeder umschließt sein eigenes Bild oder gestalteten Block). Dies ist standardmäßig flexibler und responsiver.
Vektorgrafiken / skalierbare Diagramme → Verwenden Sie eingebettetes SVG mit <a>-Elementen darin. SVG-Hotspots skalieren mit dem Layout, unterstützen Hover- und Fokus-Styling und sind deutlich zugänglicher als pixelbasierte <area>-Formen.
Einfache Overlay-Schaltflächen → Absolut positionierte CSS-Links über dem Bild skalieren besser als feste coords.

Der große Kompromiss: <area>-Koordinaten werden in festen Pixeln gemessen, sodass eine Image-Map sich nicht anpasst, wenn das Bild durch responsives CSS skaliert wird (siehe den Abschnitt über Einschränkungen bei responsiven Layouts unten).

Syntax

Der <area>-Tag ist ein leeres Element, d. h. das schließende Tag ist nicht erforderlich. In XHTML muss der <area>-Tag jedoch geschlossen werden (<area />).

Beispiel des HTML `<area>`-Tags:

HTML-Tag <area>

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>Click on the logo or on one of the logo item to watch it closer:</p>
    <img src="/uploads/media/news_gallery/0001/01/thumb_316_news_gallery_list.jpeg"  width="250" height="150" alt="block" usemap="#blockmap" />
    <map name="blockmap">
      <area shape="circle" coords="50,32,25" alt="html" href="/uploads/media/book_gallery/0001/01/d450f0358f947dffb3af91195c3002600d74101b.png" />
      <area shape="circle" coords="218,115,25" alt="css" href="/uploads/media/book_gallery/0001/01/25521e981b34da57c8f51baddc5b76351b855818.png" />
      <area shape="circle" coords="195,32,28" alt="php" href="/uploads/media/book_gallery/0001/01/4bbee6698c4884f25c46010d61b658dd62d2c04f.png" />
      <area class="homepage" shape="rect" coords="35,55,90,90" alt="php" href="https://www.w3docs.com/" />
    </map>
  </body>
</html>

Probier es selbst »

So funktioniert das coords-Koordinatensystem

Dies ist der Teil, den Entwickler am häufigsten falsch verstehen. Alle coords-Werte sind Pixel-Offsets, gemessen von der oberen linken Ecke des Bildes – nicht der Seite und nicht des Viewports. Die erste Achse (x) verläuft nach rechts; die zweite Achse (y) verläuft nach unten.

Die Bedeutung der Zahlen hängt von shape ab:

rect — x1,y1,x2,y2: die obere linke Ecke, dann die untere rechte Ecke.
circle — x,y,radius: der Mittelpunkt, dann der Radius (alle in Pixeln).
poly — x1,y1,x2,y2,...,xn,yn: eine geordnete Liste von Eckpunkten; der Browser verbindet sie und schließt die Form automatisch.
default — keine coords; der Bereich deckt das gesamte Bild ab.

Arbeitsbeispiel

Für ein Bild mit einer Breite von 250 und einer Höhe von 150 Pixeln lautet ein Rechteck, das das obere linke Viertel abdeckt:

<area shape="rect" coords="0,0,125,75" alt="Top-left quarter" href="/top-left">

Gelesen als: obere linke Ecke bei (0, 0), untere rechte Ecke bei (125, 75). Ein Kreis, der in der Mitte desselben Bildes zentriert ist und einen Radius von 40 px hat, lautet coords="125,75,40".

Da es sich um rohe Pixelwerte handelt, müssen diese der intrinsischen (natürlichen) Größe des Bildes entsprechen, nicht einer durch CSS skalierten Darstellungsgröße.

Beispiel für die Polygonform (poly)

Verwenden Sie shape="poly" für jeden nicht-rechteckigen, nicht-kreisförmigen Hotspot – ein Dreieck, einen Pfeil, einen Länderumriss. Listen Sie die Eckpunkte in der richtigen Reihenfolge auf; der Browser zeichnet gerade Linien zwischen aufeinanderfolgenden Punkten und schließt den Pfad zurück zum ersten Punkt.

<!DOCTYPE html>
<html>
  <head>
    <title>Polygon image map</title>
  </head>
  <body>
    <p>Click inside the triangle:</p>
    <img src="/uploads/media/news_gallery/0001/01/thumb_316_news_gallery_list.jpeg"
         width="250" height="150" alt="Diagram" usemap="#shapemap" />
    <map name="shapemap">
      <!-- A triangle: top-center, bottom-left, bottom-right -->
      <area shape="poly" coords="125,20,30,130,220,130"
            alt="Triangle hotspot linking to the docs" href="https://www.w3docs.com/" />
    </map>
  </body>
</html>

Die drei Punkte (125,20), (30,130), (220,130) bilden die Ecken des Dreiecks; Sie müssen den ersten Punkt am Ende nicht wiederholen – die Form schließt sich selbst.

Attribute

Attribut	Wert	Beschreibung
alt	text	Gibt einen alternativen Text für den aktiven Bereich an.
coords	x1,y1,x2,y2 \| x,y,radius \| x1,y1,...,xn,yn	Gibt die Koordinaten des aktiven Bereichs in Pixeln von der oberen linken Ecke des Bildes an. Die Werte hängen von der Form ab: `rect` (obere linke und untere rechte Ecke), `circle` (Mittelpunkt und Radius), `poly` (Polygon-Eckpunkte); bei `default` weglassen.
download	filename	Gibt an, dass beim Klicken auf einen bestimmten Bereich die Datei heruntergeladen werden soll.
href	URL	Gibt die Referenz für den Übergang an. `href` weglassen, um den Bereich inaktiv zu machen (kein Link).
hreflang	language_code	Definiert die Sprache des referenzierten Dokuments. Wird nur zusammen mit `href` verwendet.
nohref	(none)	Veraltet. Markierte früher einen Bereich als ohne Link. In HTML5 entfernt – lassen Sie stattdessen einfach das `href`-Attribut weg.
rel	alternate \| author \| bookmark \| help \| license \| next \| nofollow \| noreferrer \| prefetch \| prev \| search \| tag	Stellt eine Verbindung zwischen dem aktuellen und dem verlinkten Dokument her.
shape	rect \| circle \| poly \| default	Definiert die Form des Bereichs. `default` lässt den Bereich das gesamte Bild abdecken.
target	_blank \| _self \| _top \| _parent \| frame_name	Gibt an, wie das verlinkte Dokument geöffnet werden soll. `frame_name` wird in HTML5 nicht unterstützt.
type	media_type	Gibt den MIME-Typ des verlinkten Dokuments an.

Der <area>-Tag unterstützt außerdem die globalen Attribute und die Ereignis-Attribute.

Der Wert shape="default"

shape="default" definiert einen Bereich ohne Koordinaten, der das gesamte Bild abdeckt – alles, was nicht von einem spezifischeren rect-, circle- oder poly-Bereich beansprucht wird. Er eignet sich gut als Fallback-Link oder universelles Ziel für „überall sonst klicken".

<map name="catchall">
  <area shape="circle" coords="125,75,40" alt="Center hotspot" href="/center">
  <area shape="default" alt="Everywhere else" href="/elsewhere">
</map>

Da früher übereinstimmende, spezifischere Bereiche Vorrang haben, setzen Sie default zuletzt, damit er nur Klicks abfängt, die kein anderer Bereich behandelt.

Barrierefreiheit

Barrierefreiheit ist das wichtigste praktische Anliegen bei Image-Maps, da das Bild selbst keinen Text enthält. Jeder Hotspot ist für einen Screenreader unsichtbar, sofern er nicht beschriftet ist.

alt ist bei jedem <area> erforderlich. Die Spezifikation schreibt dies vor, sofern der Bereich ein href hat. Machen Sie es aussagekräftig: Es sollte beschreiben, wohin der Link führt (das Ziel oder die Aktion des Links), nicht das Bild. Zum Beispiel alt="CSS-Referenz anzeigen", nicht alt="Kreis".
Tastaturnavigation: Browser machen jeden <area> zu einem fokussierbaren Link, sodass Benutzer mit Tab zu jedem Hotspot navigieren und ihn mit Enter aktivieren können. Dies funktioniert nur, wenn jeder Bereich sowohl ein href als auch ein klares alt hat – ein Bereich ohne alt wird als unbeschrifteter Link angekündigt, was eine ernsthafte Barriere darstellt.
Das Bild benötigt weiterhin sein eigenes alt. Setzen Sie alt beim <img>-Element, um das gesamte Bild zu beschreiben – getrennt von den einzelnen Bereichs-Linktexten.
Bei komplexen Grafiken mit vielen Bereichen sollten Sie prüfen, ob eine Liste einfacher <a>-Links oder ein eingebettetes SVG mit fokussierbaren Links für Benutzer assistiver Technologien besser geeignet wäre als pixelbasierte Hotspots.

Einschränkung bei responsiven Layouts und Mobilgeräten

<area>-Koordinaten sind feste Pixelwerte, die an die intrinsische Größe des Bildes gebunden sind. Sie skalieren nicht. Sobald Sie das Bild fluide machen – zum Beispiel mit width: 100% oder max-width: 100% in CSS – ändert sich die Darstellungsgröße des Bildes, die Hotspots bleiben jedoch am ursprünglichen Pixelraster verankert. Die anklickbaren Bereiche driften dann von dem ab, was der Benutzer sieht, und auf kleinen Mobilgeräten können sie winzig und schwer zu treffen werden.

Reines HTML bietet hierfür keine integrierte Lösung. In der Praxis haben Sie folgende Möglichkeiten:

Image-Maps bei responsiven Layouts vermeiden und skalierbare Alternativen verwenden – überlagerte, CSS-positionierte <a>-Links oder ein eingebettetes SVG, dessen <a>-Hotspots mit dem Layout skalieren.
Oder die Koordinaten mit JavaScript neu berechnen, wann immer das Bild in der Größe geändert wird (eine zusätzliche Abhängigkeit, die gepflegt werden muss).

Wenn Ihr Design sich an verschiedene Bildschirmgrößen anpassen muss, bevorzugen Sie von Anfang an SVG oder positionierte Links gegenüber <area>.

Übungsaufgaben

Übung

What is the purpose of the HTML area tag and what are its attributes?

The HTML area tag is used to define areas in an image-map and its attributes include alt, coords, href, shape, and target.The HTML area tag is used to create sections or divisions in an HTML document and its attributes include id, class, and style.The HTML area tag is used for formatting text in an HTML document and its attributes include size, color, and font.The HTML area tag is used to create hyperlinks in an HTML document and its attributes include href, rel, and target.

Übung

For a circular hotspot, what do the three numbers in coords represent and where is the origin measured from?

Center x, center y, and radius, measured in pixels from the top-left corner of the image.Left, top, and width, measured in pixels from the top-left corner of the page.Radius, center x, and center y, measured as percentages of the viewport.Two corner points and a radius, measured from the center of the image.

Übung

Which shape value makes an area cover the entire image, and how do you mark an area as having no link in modern HTML?

Use shape with the value default, and omit the href attribute to make the area inactive.Use shape with the value full, and add the nohref attribute to make the area inactive.Use shape with the value rect, and set href to an empty string to make the area inactive.Use shape with the value poly, and add the disabled attribute to make the area inactive.

Warum und wann eine Image-Map verwenden

Syntax

Beispiel des HTML <area>-Tags:

So funktioniert das coords-Koordinatensystem

Arbeitsbeispiel

Beispiel für die Polygonform (poly)

Attribute

Der Wert shape="default"

Barrierefreiheit

Einschränkung bei responsiven Layouts und Mobilgeräten

Übungsaufgaben

Beispiel des HTML `<area>`-Tags: