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

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?

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.

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.

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.

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.

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

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

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>

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).

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.

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">

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.

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.

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.

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 !!!

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.