Soll ich HTML-Anker mit "name" oder "id" erstellen?

Question

Wenn man sich auf einen Teil einer Webseite mit dem " http://example.com/#foo " Methode, sollte man die

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

o

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

Beide funktionieren, aber sind sie gleichwertig, oder gibt es semantische Unterschiede?

Answer 1

Gemäß der HTML 5-Spezifikation, 5.9.8 Navigieren zu einem Fragment-Identifikator :

Für HTML-Dokumente (und den MIME-Typ text/html) muss das folgende Verarbeitungsmodell befolgt werden, um festzustellen, was der angegebene Teil des Dokuments ist.

1. Parsen Sie die URL, und lassen Sie fragid die <fragment>-Komponente der URL sein.
2. Ist fragid eine leere Zeichenkette, so ist der angegebene Teil des Dokuments der oberste Teil des Dokuments.
3. Wenn es im DOM ein Element gibt, dessen ID genau mit fragid übereinstimmt, dann ist das erste solche Element in der Baumreihenfolge der angegebene Teil des Dokuments; der Algorithmus wird hier angehalten.
4. Wenn es eine a Element im DOM, das ein name-Attribut hat, dessen Wert genau gleich fragid ist, dann ist das erste solche Element in der Baumreihenfolge der angegebene Teil des Dokuments; der Algorithmus wird hier gestoppt.
5. Andernfalls gibt es keinen angegebenen Teil des Dokuments.

Es wird also gesucht nach id="foo" und dann weiter zu name="foo"

Edit: Wie von @hsivonen bemerkt, ist in HTML5 die a Element hat kein Attribut name. Die oben genannten Regeln gelten jedoch auch für andere benannte Elemente.

Answer 2

Sie sollten nicht verwenden <h1><a name="foo"/>Foo Title</h1> in jeder beliebigen HTML-Variante, die als text/html weil die XML-Syntax für leere Elemente nicht unterstützt wird in text/html . Allerdings, <h1><a name="foo">Foo Title</a></h1> ist in HTML4 in Ordnung. In der derzeitigen Fassung von HTML5 ist sie nicht gültig.

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

Answer 3

Ich muss sagen, wenn Sie zu diesem Bereich auf der Seite verlinken werden... 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> Ihre Überschrift wird durch einen Verweis darauf beeinflusst <a> spezifische CSS innerhalb Ihrer Website. Es ist nur zusätzliches Markup, und Sie sollten es nicht brauchen. Ich würde dringend empfehlen, eine id auf die Überschrift, nicht nur ist es besser geformt, aber es wird Ihnen erlauben, entweder Adresse, dass Objekt in Javascript oder CSS.

Answer 4

Wikipedia macht von dieser Funktion regen Gebrauch:

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

Und Wikipedia funktioniert für alle, also würde ich mich sicher fühlen, bei dieser Form zu bleiben.

Vergessen Sie auch nicht, dass Sie dies nicht nur mit Spans, sondern auch mit Divs oder sogar Tabellenzellen verwenden können, und dann haben Sie Zugriff auf die :target-Pseudoklasse des Elements. Passen Sie nur auf, dass Sie nicht die Breite ändern, wie bei fettgedrucktem Text, denn das verschiebt den Inhalt, was störend ist.

Benannte Anker - ich stimme dafür, sie zu vermeiden:

• "Namen und ids liegen im gleichen Namensraum..." - Zwei Attribute mit demselben Namensraum sind einfach verrückt. Sagen wir einfach, dass es bereits veraltet ist.
• "Verankert Elemente ohne href-Attribut" - Wieder einmal wird die Art eines Elements (Hyperlink oder nicht) durch ein Attribut definiert?! Doppelt verrückt. Der gesunde Menschenverstand sagt, dass man es ganz vermeiden sollte.
• Wenn Sie einen Anker ohne Pseudoklasse formatieren, gilt die Formatierung für jeden Anker. In CSS3 können Sie dies mit Attributselektoren (oder gleiches Styling für jede Pseudoklasse) umgehen, aber es ist immer noch ein Workaround. Das Problem tritt normalerweise nicht auf, weil man die Farben für jede Pseudoklasse auswählt, und da die Unterstreichung standardmäßig vorhanden ist, macht es nur Sinn, sie zu entfernen, was sie dem anderen Text gleich macht. Aber wenn Sie sich jemals entscheiden, Ihre Links fett zu machen, wird das zu Problemen führen.
• Netscape 4 unterstützt zwar die id-Funktion nicht, aber ein unbekanntes Attribut wird trotzdem keine Probleme verursachen. Das ist es, was für mich Kompatibilität bedeutet.

Answer 5

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

sollte verwendet werden. Verwenden Sie keinen Anker, es sei denn, Sie wollen einen Link.