Hier erfahren Sie
Inhalt dieser Seite: Einführung - Darstellung (Layout) von Ankern - Verschiedene Anker-Varianten - "Spezialfälle" ("Leere" Anker, Impliziter "top"-Anker, Kombination von Anker und Link) - Test-Links - Empfehlung - Ressourcen
Wenn man einem <A>-Element mit den Attributen name
(und/oder id) einen eindeutigen Namen gibt, wird es zum sogenannten
Anker:
<a name="xx" id="xx">Anker-Inhalt</a>
Dann kann man einen Hyperlink machen, der genau auf dieses Element zeigt:
<a href="#xx">Linktext</a>
Somit kann man einzelne Abschnitte innerhalb der gleichen Datei als URL angeben und einen Hyperlink darauf machen.
Seit HTML 4.01 kann man auch anderen Elementen (zum Beispiel Überschriften)
ein id-Attribut geben, und moderne Browser springen bei einem entsprechenden
Link auch zu solchen "Ankern":
Anker: <h3 id="kap3">Kapitelüberschrift 3</h3>
Hyperlink: <a href="#kap3">Zum Kapitel 3</a>
<a name="xx"> ist gemäss folgenden
Standards valide: HTML 2.0, HTML 3.2, HTML 4.01.
In XHTML 1.0 ist es "geduldet" (deprecated), in XHTML 1.1 hingegen
ist es nicht mehr valide.
Wahrscheinlich wird es auch von den meisten Browsern unterstützt.
<a id="xx"> ist gemäss folgenden Standards
valide: HTML 4.01, XHTML 1.0, XHTML 1.1
Wenn ein Anker nur mit dem id-Attribut ausgestattet ist, springen
gewisse ältere Browser das Sprungziel nicht an.
In den beiden heute (Ende 2003) gängigen Markup-Sprachen, HTML 4.01 und XHTML 1.0, ist es aus Gründen der Abwärtskompatibilität sinnvoll, beide Attribute zu verwenden:
<a name="xx" id="xx">Anker-Inhalt</a>
Diese Schreibweise empfiehlt das World Wide Web Konsortium (W3C) auch in den HTML Compatibility Guidelines zu XHTML 1.0
Normalerweise soll ein Anker nicht speziell hervorgehoben sein. Sofern nicht
im Stylesheet ein besonderes Layout für sämtliche <A>-Elemente
definiert ist, sollte ein standardkonformer Browser den Inhalt eines Ankers grundsätzlich
so darstellen, als ob das <A>-Element gar nicht vorhanden wäre,
sondern nur der Inhalt zwischen <a name=".."> und
</a>
Beispiel: Im Stylesheet stehen folgende Angaben:
a:link { color:#0000FF; background-color:#efefff; text-decoration:underline; }
a:visited { color:#980098; background-color:#efefff; text-decoration:underline; }
a:hover { color:#D00000; background-color:#ffffa0; text-decoration:none; }
a:active { color:#6633CC; background-color:#efefff; text-decoration:none; }
In HTML wird eine Überschrift zum Anker gemacht:
<h2><a name="kap4" id="kap4">Kapitel 4</a></h2>
Für das <A>-Element an sich (ohne Pseudoformat) hat
es also keine CSS-Angaben.
Trotzdem übernimmt der Browser Netscape Navigator 4.x
gewisse Style-Angaben (insbesondere Unterstreichung, Hintergrundfarbe)
auch für <A>-Elemente, die gar
keine Hyperlinks, sondern nur Anker sind. Weil Hyperlinks gemäss den
obigen expliziten CSS-Angaben unterstrichen dargestellt werden sollen,
unterstreicht Netscape 4.x hier auch alle Anker.
Mozilla 1.0 und Netscape 7 unterstreichen
hier zwar die Anker nicht, aber beim Überfahren mit der Maus und beim Klicken
erhalten auch reine Anker die Farben und Eigenschaften, die eigentlich für die
entsprechenden Zustände von Hyperlinks gedacht sind (a:hover, a:active).
Dieses Verhalten von Mozilla 1.0 und Netscape 7 ist offenbar gemäss der
CSS2-Spezifikation
korrekt. (Als erster Browser wendet Mozilla :hover und :active
übrigens auch auf beliebige Elemente an (und nicht nur auf <A>).
Trotzdem ist es für Webautoren und Benutzer ziemlich verwirrlich, wenn Anker beim Überfahren
mit der Maus und beim Anklicken plötzlich wie Links dargestellt werden, obwohl sie keine
Links sind und auch nichts passiert, wenn man sie anklickt.
Um z.B. eine Kapitelüberschrift als brauchbaren Anker auszuzeichen, d.h. dass der Anker
auch mit den "speziellen" Browsern Netscape 4.x und Mozilla 1.0 wie gewünscht dargestellt wird,
ist es sinnvoll, für solche <A>-Elemente eine eigene Klasse zu machen:
a.nuranker { text-decoration:none; color:#000000; background-color:#ffffff;}
(Diese Deklaration muss später im CSS vorkommen als die obigen Deklarationen für die Hyperlinks.
Die Farbwerte müssen auf die normalen Text- und Hintergrundfarbe gesetzt werden.)
Theoretisch könnte man statt a.nuranker auch den Selektor a[name] nehmen,
allerdings wären dann keine Kombinationen von Links und Ankern in einem Element möglich, und
zudem erkennen erst wenige Browser diese CSS-Schreibweise.
Eine weitere Möglichkeit, um den Hover-Effekt nur bei Links, aber nicht bei Ankern zu haben (mit anderen Worten: um in Mozilla bei reinen Ankern zu unterdrücken), wäre folgende Schreibweise:
a:link { color:#0000FF; background-color:#efefff; text-decoration:underline; }
a:visited { color:#980098; background-color:#efefff; text-decoration:underline; }
a:link:hover, a:visited:hover { color:#D00000; background-color:#ffffa0; text-decoration:none; }
a:active { color:#6633CC; background-color:#efefff; text-decoration:none; }
Die Probleme von Netscape 4.x werden damit allerdings nicht gelöst.
| Quellcode | Resultat | W3C-Standards | Layout NN4 |
|---|---|---|---|
<h3><a name="..">Ziel</a></h3> |
Ziel 1 |
HTML 3.2, HTML 4.01 | Unterstrichen |
<h3><a name=".." id="..">Ziel</a></h3> |
Ziel 2 |
HTML 4.01, XHTML 1.0 | Unterstrichen |
<h3><a name=".." id=".."
class="nuranker">Ziel</a></h3> |
Ziel 2a |
HTML 4.01, XHTML 1.0 | normal |
<h3><a id=".." class="nuranker">Ziel</a></h3> |
Ziel 3 |
HTML 4.01, XHTML 1.0 | normal |
<h3 id="..">Ziel</h3> |
Ziel 4 |
HTML 4.01, XHTML 1.0/1.1 | normal |
Weiter unten können Sie Links ausprobieren, die auf diese Ziele hier zeigen.
Die Varianten 3 und 4 sind nicht geeignet für ältere Browser: Netscape 2.0, 3.0 und 4.x springen nicht zum Ziel, sondern zum Seitenanfang.
"Leere Anker", z.B. <a name="seitenanfang"></a>,
sind grundsätzlich erlaubt. Offenbar hatten einige Steinzeit-Browser Bugs
und sprangen solche Anker nicht an. (Netscape 2.0 hat damit jedenfalls keine Probleme.)
In der HTML 4.01-Specification des W3C steht:
"Note. User agents should be able to find anchors created by empty A elements, but some fail to do so. "
Durch Klick auf einen Hyperlink in der Form <a href="#top">...</a>
kommt man in einigen Browsern auch zum Seitenanfang, ohne dass man explizit
einen Anker mit dem Namen "top" gesetzt hätte. Der Anker "top"
ist also für diese Browser implizit am Dokumentenanfang, sofern er nicht
extra gesetzt wurde.
In SelfHTML steht dazu:
"Einige Browser, z.B. der Internet Explorer, kennen auch "intern
reservierte" Ankernamen wie top. Wenn Sie also einen Verweis <a href="#top">...</a>
notieren und kein Anker dieses Namens in der Datei existiert, springt der Browser
beim Ausführen des Verweises an den Anfang der Seite."
Folgende Windows-Browser springen zum Seitenanfang, auch wenn kein "top"-Anker
definiert ist: Opera 5.12, Opera 6.0, MS Internet Explorer 5.5, Mozilla 1.0.
Der Browser Netscape 6.0 dagegen springt so nicht zum Seitenanfang.
Testlink: top
<A>-ElementIn einem einzigen <A>-Element können gleichzeitig die
Attribute HREF, NAME und ID vorkommen:
<a href="#seitenanfang" name="kombi" id="kombi">Kombi-Link</a>
Beispiel: Kombi-Link
Hier ist es natürlich sinnvoll, dass der Anker wie ein Link aussieht,
weil er ja einer ist. Deshalb hat er kein spezielles class-Attribut
| Ziel (Anker) | Beschreibung | Browsertests |
|---|---|---|
| #top | nicht definiert (implizit) | OK |
| #seitenanfang | definiert | OK |
| #ziel1 | NAME | OK |
| #ziel2 | NAME + ID | OK |
| #ziel2a | NAME + ID (+CLASS) | OK |
| #ziel3 | <A ID=".."> | NN 2.0, 3.0, 4.x: Fehler |
| #ziel4 | <H3 ID="..."> | NN 2.0, 3.0, 4.x: Fehler |
| #leer | leer, nur NAME | OK |
| #kombi | HREF + NAME + ID | OK |
Getestet unter Windows mit MS Internet Explorer 5.5, Netscape 2.0, 3.0, 4.75 und 6.1, Opera 5.12 und 6.0.
Damit ein Anker auch in Netscape 4.x ohne Unterstreichung angezeigt wird, damit er in Mozilla 1.0 und Netscape 7 bei Mausberührung nicht plötzlich "aufleuchtet" und damit er gleichzeitig abwärtskompatibel ist zu den älteren Browsern (insbesondere Netscape 2 bis 4), empfehle ich für HTML 4.01 und XHTML 1.0 folgende Notation:
<a name=".." id=".." class="nuranker">Ankertext</a>
wobei im StyleSheet (nach den Deklarationen für Hyperlinks) festgelegt ist:
a.nuranker { text-decoration:none; color:#000000; background-color:#ffffff; }
(Farbwerte dem übrigen Text anpassen.)
Als Alternative kann man leere Anker nehmen; dann ist es nicht notwendig, bei jedem Anker noch extra die Klasse anzugeben:
<a name=".." id=".."></a>Ankertext
Thomas Lüthi, luthi@my-mail.ch, 21.12.2003