Soll ich HTML-Anker mit 'Name' oder 'ID' erstellen?

783

Wenn man mit der http://example.com/#fooMethode " " auf einen Teil einer Webseite verweisen möchte , sollte man diese verwenden

<h1><a name="foo"/>Foo Title</h1>

oder

<h1 id="foo">Foo Title</h1>

Sie arbeiten beide, aber sind sie gleich oder haben sie semantische Unterschiede?

Henrik Paul
quelle
2
Der Link sollte eigentlich sein http://example.com#foo(also ohne das / vor #)
Dana
71
Tatsächlich http://example.com#foound http://example.com/#foosind äquivalent wie in einem der RFCs auf URIs definiert.
Oliver

Antworten:

616

Gemäß der HTML 5-Spezifikation, 5.9.8 Navigieren zu einer Fragmentkennung :

Für HTML-Dokumente (und den MIME-Typ text / html) muss das folgende Verarbeitungsmodell befolgt werden, um den angegebenen Teil des Dokuments zu bestimmen.

  1. Analysieren Sie die URL und lassen Sie fragid die <fragment> -Komponente der URL sein.
  2. Wenn fragid die leere Zeichenfolge ist, befindet sich der angegebene Teil des Dokuments oben im Dokument.
  3. Wenn sich im DOM ein Element befindet, dessen ID genau gleich fragid ist, ist das erste derartige Element in Baumreihenfolge der angegebene Teil des Dokuments. Stoppen Sie den Algorithmus hier.
  4. Wenn es im DOM ein Element gibt , das ein Namensattribut hat, dessen Wert genau gleich fragid ist, ist das erste derartige Element in Baumreihenfolge der angegebene Teil des Dokuments. Stoppen Sie den Algorithmus hier.
  5. Andernfalls ist kein Teil des Dokuments angegeben.

Also wird es suchen id="foo"und dann folgenname="foo"

Bearbeiten: Wie von @hsivonen hervorgehoben, hat das aElement in HTML5 kein Namensattribut . Die obigen Regeln gelten jedoch weiterhin für andere benannte Elemente.

Greg
quelle
76
Es gibt keine implizite Beziehung zwischen diesem Algorithmus und der Gültigkeit. Der <a name> ist in HTML5 wie aktuell entworfen ungültig.
Hsivonen
13
Eigentlich gilt es nicht für andere "benannte Elemente". Was die Namensattribute betrifft, gilt dies nur für <a name>. Dieses Attribut darf jedoch nicht von Autoren verwendet werden. Es muss nur von Benutzeragenten für ältere HTML-Seiten berücksichtigt werden.
Anne
19
@ RafaelSoares <h1 id="foo">Foo Title</h1>funktioniert sogar in IE6 und ist Teil der HTML 4.01-Spezifikation
Aprillion
4
Es wird nicht nach name = "foo" gesucht, sondern nach <a name="foo">. Siehe Link
Daniel Herzog
3
In einem HTML5-Dokument mit einem name="foo"und einem id="foo"(unabhängig von ihrer Reihenfolge innerhalb der Seite) springen Chrome und Firefox zum id, aber IE (getestet in 11) und Edge springen zumname
Alvaro Montoro
182

Sie sollten keine <h1><a name="foo"/>Foo Title</h1>HTML-Version verwenden, die als dient text/html, da die XML-Syntax für leere Elemente in nicht unterstützt wird text/html. Allerdings <h1><a name="foo">Foo Title</a></h1>ist OK in HTML4. Es ist in HTML5 nicht gültig, wie es derzeit entworfen wurde.

<h1 id="foo">Foo Title</h1>ist sowohl in HTML4 als auch in HTML5 in Ordnung. Dies funktioniert in Netscape 4 nicht, aber Sie werden wahrscheinlich ein Dutzend anderer Funktionen verwenden, die in Netscape 4 nicht funktionieren.

hsivonen
quelle
6
+1 für die Unterstützung von Browsern. Unterstützt NS4 als einziges die URL # id => element.id nicht?
Hashbrown
14
@ Hashbrown Konnte keine Antwort finden, also habe ich einige Tests durchgeführt. Ich fand heraus, dass selbst sehr alte Browser ids namein Bezug auf URL-Fragmente und Kompatibilität des CSS- :targetSelektors wie Anker behandeln . Getestet: Chrome 6, Firefox 1.5, IE6, Opera 8.02, Safari 3.1.2, Netscape 7.2, Lynx 2.24 und mobile Browser: Android 2.2, Chrome 26, Dolphin 9.3, Firefox 19, IE10, Safari 4 und Opera Mini 5.1.
Stephen M. Harris
1
@smhmic, ich habe einen gefunden. Der Off-By-One-Webbrowser erkennt Anker, die über <a name="foo"/> definiert wurden, erkennt jedoch keine Anker, die über <sometag id = "foo"> definiert wurden. OB1 wurde zuletzt vor> 8 Jahren aktualisiert. Sein Autor rühmt sich, dass es "der kleinste und schnellste Webbrowser der Welt mit vollständiger HTML 3.2-Unterstützung sein kann". Es behauptet Unterstützung für Win95 bis XP, aber es funktioniert gut mit 64-Bit-Win7. Warum also so einen Dinosaurier? Zum Testen natürlich, um sicherzustellen, dass meine Websites mit wirklich antiken Browsern nicht zu stark kaputt gehen. Außerdem trage ich OB1 auch auf einem Flash-Laufwerk. Es ist winzig, in sich geschlossen und immun gegen Infektionen.
Dave Burton
26
Lesen Sie dies im Jahr 2016 wie .. Netscape 4?
ADTC
1
Die Verwendung von `<a name="something" id="something> </a> [ELEMENT TO SCROLL TO] ist wahrscheinlich am besten, da es kompatibel ist und nicht das Element
formatiert,
52

Ich muss sagen, wenn Sie auf diesen Bereich auf der Seite verlinken wollen ... wie page.html # foo und Foo Title ist kein Link, den Sie verwenden sollten:

<h1 id="foo">Foo Title</h1>

Wenn Sie stattdessen eine <a>Referenz einfügen, wird Ihre Überschrift von einem <a>bestimmten CSS auf Ihrer Website beeinflusst. Es ist nur ein zusätzliches Markup, und Sie sollten es nicht brauchen. Ich würde wärmstens empfehlen, eine ID in die Überschrift zu setzen. Sie ist nicht nur besser geformt, sondern ermöglicht es Ihnen auch, dieses Objekt entweder in Javascript oder CSS zu adressieren.

Tim Knight
quelle
Nicht nur das, sondern ich habe einen seltsamen Fehler bei der Anzeige bekämpft: Im IE wurden keine Inhalte angezeigt. Da ich keine Ahnung von einem Angriffspunkt hatte, warf ich ihn auf einen Validator, der die <a name="foo"> Einträge markierte, damit ich sie änderte - und jetzt die Anzeige: Keiner funktioniert einwandfrei.
Loren Pechtel
Dies ist mehr als genug, es wird kein Ankertag für den Effekt benötigt.
Wallace Sidhrée
27

Wikipedia nutzt diese Funktion wie folgt:

<a href="#History">[...]</a>
<span class="mw-headline" id="History">History</span>

Und Wikipedia arbeitet für alle, daher würde ich mich sicher fühlen, wenn ich mich an dieses Formular halte.

Vergessen Sie auch nicht, dass Sie dies nicht nur mit Spannen, sondern auch mit Divs oder sogar Tabellenzellen verwenden können, und dann haben Sie Zugriff auf die Pseudoklasse: target für das Element. Achten Sie nur darauf, die Breite nicht zu ändern, wie bei fettem Text, da dies den Inhalt bewegt, was störend ist.

Benannte Anker - meine Stimme ist zu vermeiden:

  • "Namen und IDs befinden sich im selben Namespace ..." - Zwei Attribute mit demselben Namespace sind einfach verrückt. Sagen wir einfach schon veraltet.
  • "Elemente ohne href atribute verankern" - Wiederum wird die Art eines Elements (Hyperlink oder nicht) durch ein atribute definiert?! Doppelt verrückt. Der gesunde Menschenverstand sagt, es ganz zu vermeiden.
  • Wenn Sie jemals einen Anker ohne Pseudoklasse stylen, gilt das Styling für jeden. In CSS3 können Sie dies mit Attributselektoren (oder demselben Stil für jede Pseudoklasse) umgehen, aber es ist immer noch eine Problemumgehung. Dies tritt normalerweise nicht auf, da Sie Farben pro Pseudoklasse auswählen und die Unterstreichung standardmäßig vorhanden ist. Es ist nur sinnvoll, sie zu entfernen, wodurch sie mit anderem Text identisch ist. Aber Sie entscheiden sich jemals dafür, Ihre Links fett zu machen, es wird Ärger verursachen.
  • Netscape 4 unterstützt die ID-Funktion möglicherweise nicht, aber ein unbekanntes Attribut verursacht keine Probleme. Das hat für mich Kompatibilität genannt.
Zoltán Morvai
quelle
1
a {color:red}Schlagen Sie vor, Punkt 3 von 4 zu bearbeiten: Wenn Sie jemals einen Stil erstellen, werden sowohl Ihre <a href> -Links als auch Ihre <a name> -Fragmente eingefärbt. Sie können dies mit a:link {color:red]}a:not([href]) {color:red;}
Bob Stein
Sie haben Recht, aber für mich sagt Kugel 3 genau das. Könnte aber mein Englisch sein ...
Zoltán Morvai
Schließlich habe ich Ihren Standpunkt: "Wenn Sie jemals einen Anker ohne Pseudoklasse stylen, gilt das Styling für jeden." Mehrdeutig: Sie könnten "jede Pseudoklasse" denken. Recht. Aber ich dachte an "jeden Fall", einen Anker zu verwenden, was "benannt" und "href-ed" bedeutet. Klargestellt. :) Keine Notwendigkeit, nach Ihrem Kommentar zu bearbeiten, aber ich kann, wenn Sie darauf bestehen. Aber es ist auch immer noch nicht anfällig für Farben, da Sie normalerweise beabsichtigen, sie anders zu halten, aber immer noch den gleichen Fall mit Schriftgröße ...
Zoltán Morvai
Ich habe es genossen, deine Kommentare bei ZoltánMorvai zu lesen. "double crazy" und "netscape 4" doubleplusgood.
Randy L
1
Zwei Attribute mit demselben Namespace sind verrückt - nicht wirklich. Bei benutzergenerierten Inhalten ist es sehr nützlich, etwas als Fragment-Link angeben zu können, <a name="heading1"></a> ... document.html#heading1ohne die ID festzulegen , da die ID möglicherweise mit einer anderen ID auf der Seite kollidiert. Es ist eine Schande, dass sie das nameAttribut nicht in HTML5 eingefügt haben.
Jez
14
<h1 id="foo">Foo Title</h1>

ist das, was verwendet werden sollte. Verwenden Sie keinen Anker, es sei denn, Sie möchten einen Link.

Andrew Marsh
quelle
Identisch mit Tim Knights Antwort, die ein halbes Jahr vor dieser veröffentlicht wurde. -1
Luc
13

Heads-up für JavaScript-Benutzer: Alle IDs werden unter Fenster zu globalen Variablen .

<h1 id="foo">Foo Title</h1>

Gerade die JS global erstellt:

window.foo

Der Wert von window.foowird der HTMLElementfür sein h1.

Wenn Sie nicht garantieren können, dass alle in idAttributen verwendeten Werte sicher sind, sollten Sie sich an Folgendes halten name:

<h1 name="foo">Foo Title</h1>
Mikemaccana
quelle
12
Die gute Nachricht ist, dass Sie die in definierten Funktionen nicht überschreiben können window. Zum Beispiel <div id="open"></div>wird die Funktion nicht überschrieben window.open.
Flimm
8

Es gibt keinen semantischen Unterschied; Der Trend in den Standards geht eher zur Verwendung von idals von name. Es gibt jedoch Unterschiede, die namein einigen Fällen zu einer Bevorzugung führen können. Die HTML 4.01-Spezifikation bietet die folgenden Hinweise :

Verwenden Sie idoder name? Autoren sollten die folgenden Punkte berücksichtigen, wenn sie entscheiden, ob sie einen Ankernamen verwenden idoder nicht name:

  • Das id-Attribut kann mehr als nur ein Ankername sein (z. B. Stylesheet-Auswahl, Verarbeitungskennung usw.).
  • Einige ältere Benutzeragenten unterstützen keine Anker, die mit dem Attribut id erstellt wurden.
  • Das Attribut name ermöglicht umfangreichere Ankernamen (mit Entitäten).
erickson
quelle
14
Um klar zu sein, wenn sie "ältere Benutzeragenten" sagen, meinen sie WIRKLICH alte Benutzeragenten. Darüber würde ich mir keine Sorgen machen.
Eli
1
HTML5 erlaubt auch "reiche" IDs. Hat jemand Versionsnummern von Browsern mit einem Marktanteil von mehr als 0,1%, die nicht mit ID-verankerten Fragmenten umgehen können? - Oder ist der Dinosaurier Netscape 4.7 tatsächlich der am weitesten verbreitete?
Robert Siemer
7
FWIW, ich konnte idin Safari für iOS 5 keine Anker zum Laufen bringen , daher waren nicht nur Browser bereits "wirklich alt" in '09. Ich musste names hinzufügen , damit meine Website auf dem iPad ordnungsgemäß funktioniert. Möglicherweise wurde dies inzwischen behoben. Ich besitze keine zu überprüfenden iOS 6-Geräte.
Daniel Saner
@ DanielSaner wirklich? so en.wikipedia.org/wiki/IPad#Applications funktioniert nicht auf Ihrem iPad?
Aprillion
1
@DanielSaner Ich habe Simulatoren verwendet, um Mobile Safari 5.02 & 5.1 und Android Browser 2.2 & 2.3 zu testen, und die idAnker scheinen universell zu funktionieren. Wenn dieses einfache Beispiel auf Ihrem Handy nicht funktioniert, würde ich die Einstellungen für die Barrierefreiheit des Geräts überprüfen. (@deathApril Wikipedia mobile Website hat Javascript, die effektiv bewirkt, dass das URL-Fragment ignoriert wird.)
Stephen M. Harris
8

Die ID-Methode funktioniert in älteren Browsern nicht, die Ankernamenmethode ist in neueren HTML-Versionen veraltet ... Ich würde mich für die ID entscheiden.

Spikolynn
quelle
2
Haben Sie eine Quelle für diese Behauptungen? Versteh mich nicht falsch; Ich bin nur allgemein interessiert.
Henrik Paul
11
Das wirft kein Licht auf "funktioniert nicht mit älteren Browsern". - Welche Browser sind das außer Netscape 4?
Robert Siemer
3
Ich habe versucht, die ID auf einem Div zu verwenden, und es funktioniert sogar in IE 7. Konnte zwar nicht in IE 6 testen .. aber wer verwendet IE 6 heutzutage ...
Gilly
@deathApril in bestimmten Fällen (abhängig von HASLAYOUT) ist es fehlerhaft.
Knu
@RobertSiemer Funktioniert fast universell - siehe meinen Kommentar unter dieser Antwort .
Stephen M. Harris
3

Ich habe eine Webseite, die aus mehreren vertikal gestapelten Div-Containern besteht, die im Format identisch sind und sich nur in der Seriennummer unterscheiden. Ich wollte den Namensanker oben in jedem Div ausblenden, daher stellte sich heraus, dass die wirtschaftlichste Lösung darin bestand, den Anker als ID in das öffnende Div-Tag aufzunehmen, d. H.

<div id="[serial number]" class="topic_wrapper">
maximus
quelle
2

Nur eine Beobachtung zum Markup Das Markup-Formular in früheren HTML-Versionen bot einen Ankerpunkt. Die Markup-Formulare in HTML5, die das id-Attribut verwenden, sind zwar größtenteils gleichwertig, erfordern jedoch ein zu identifizierendes Element, von dem normalerweise erwartet wird, dass fast alle Inhalte enthalten.

Eine leere Spanne oder ein Leerzeichen könnte zum Beispiel verwendet werden, aber diese Verwendung sieht und riecht degeneriert aus.

Ein Gedanke ist, das wbr-Element für diesen Zweck zu verwenden. Das wbr hat ein leeres Inhaltsmodell und erklärt einfach, dass ein Zeilenumbruch möglich ist. Dies ist immer noch eine etwas unbegründete Verwendung eines Markup-Tags, aber viel weniger als eine unbegründete Dokumentteilung oder leere Textbereiche.

Jerseyboy
quelle
Das ist ein guter Punkt. Weitere Informationen unter wbr: w3.org/TR/html-markup/wbr.html Verwenden Sie <wbr id="foo" />statt<a name="foo"></a>
Luke
1

Das zweite Beispiel weist dem betreffenden Element eine eindeutige ID zu. Dieses Element kann dann mit DHTML bearbeitet oder aufgerufen werden.

Der erste legt andererseits eine benannte Position innerhalb des Dokuments fest, ähnlich einem Lesezeichen. An einem "Anker" befestigt, macht es vollkommen Sinn.

Cerebrus
quelle
1

In HTML 5 id=""definiert das Attribut einen eindeutigen Bezeichner für ein Element, der auch ein Anker für eine Fragmentverknüpfung ist. In früheren HTML-Standards definiert das name=""Attribut des <a>Elements einen Anker für eine Fragmentverknüpfung. Ich empfehle etwas wie:
<a name="foo" id="foo"></a><h1>Foo Title</h1>
Da die Unterstützung für das id=""Attribut etwas fleckig ist (obwohl die neuesten Versionen aller gängigen Browser dies unterstützen, sind die Versionen nicht älter als ein paar Jahre [und es ist am besten, etwas nicht zu beschädigen wenn es keinen guten Grund dafür gibt]). Es ist kompatibel und formatiert nicht, was auch immer im verknüpften Element enthalten ist, da das Schließen </a> immer noch außerhalb des Elements liegt, aber in allen aktuellen Standards weiterhin gültig ist.

Stellen Sie sicher, dass die name=""und id=""Attribute des <a>Elements identisch sind.

JustinCB
quelle
2
Nicht alles, was HTML verwendet, ist ein Browser. Ich verwende eine Java-Bibliothek, die Informationen in einem Fenster mithilfe von HTML anzeigt. Dies ist die einzige Methode, die funktioniert hat. Es ist das nameAttribut auf einem Ankertag, das erforderlich war. Platzieren von Attributen auf einem hNoder spannicht funktioniert.
Mars
0

Wie wäre es mit der Verwendung des Namensattributs für alte Browser und des ID-Attributs für die neuen Browser? Beide Optionen werden verwendet und die Fallback-Methode wird standardmäßig implementiert !!!

Umesh Bagalur
quelle
-3

Das gesamte Konzept des "benannten Ankers" verwendet per Definition das Namensattribut. Sie sollten sich nur an die Verwendung des Namens halten, aber das ID-Attribut kann in einigen Javascript-Situationen nützlich sein.

Wie in den Kommentaren können Sie immer beide verwenden, um Ihre Wetten abzusichern.

Alex Fort
quelle
Sind die IDs und Namen bei Verwendung von beiden global eindeutig? Kann ich wie in dieselbe Zeichenfolge wie die ID und den Namen verwenden?
Henrik Paul
Sie können, aber einige Leute denken, dass es schlechte Praxis ist.
Alex Fort
9
Wenn beide vorhanden sind, sollten gemäß der HTML-Spezifikation Name und ID identisch sein. Es heißt auch, dass sich Namen und IDs im selben Namespace befinden. Der HTML-Validierungsdienst prüft diese nicht, und ich bezweifle, dass Browser sich darum kümmern, aber sie scheinen trotzdem gute Richtlinien zu sein.
Erickson
3
Realität neu definiert! <ein Name ... war von Anfang an krank, und das CSS-Link-Styling macht es noch kranker.
Robert Siemer