Sollte ich HTML-Anker mit ‚name‘ oder ‚id‘?

https://stackoverflow.com/questions/484719

20-08-2019
|

Frage

Wenn man mit dem „http://example.com/#foo“ -Methode zu einem gewissen Teil einer Webseite beziehen will, sollte man verwenden

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

oder

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

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

Lösung

Nach der HTML-5-Spezifikation, 5.9.8 Navigieren zu einem Fragmentbezeichner :

Für HTML-Dokumente (und der text / html MIME-Typ), muss die folgende Verarbeitungsmodell verfolgt werden, um zu bestimmen, was der angezeigten Teil des Dokuments ist.


Analysieren Sie die URL, und lassen Sie fragid die Komponente der URL sein.

Wenn fragid die leere Zeichenkette ist, dann wird der angezeigte Teil des Dokuments ist der Anfang des Dokuments.

Falls ein Element in dem DOM ist, dass eine ID genau gleich fragid hat, dann wird das erste Element in solchen Baum ist, um der angezeigte Teil des Dokuments; stoppt den Algorithmus hier.

Wenn es eine a Element im DOM, die einen Namen-Attribut, dessen Wert genau gleich fragid, dann das erste Element in solchen Baum, um den angezeigten Teil des Dokuments ist; stoppt den Algorithmus hier.

Ansonsten gibt es keinen angezeigten Teil des Dokuments.

So ist es für id="foo" aussehen wird, und dann folgen name="foo"

Edit: Wie @hsivonen wies darauf hin, in HTML5 das a Element hat keinen Namen Attribut. Allerdings gelten die oben genannten Regeln noch zu anderen genannten Elementen.

Andere Tipps

Sie sollten nicht <h1><a name="foo"/>Foo Title</h1> in jedem Geschmack von HTML verwenden, diente als text/html, weil die XML leeres Element Syntax nicht in text/html unterstützt wird. Allerdings <h1><a name="foo">Foo Title</a></h1> ist OK in HTML4. Es ist nicht gültig in HTML5 als derzeit ausgearbeitet.

<h1 id="foo">Foo Title</h1> ist sowohl in HTML4 und HTML5 OK. Das wird nicht funktionieren in Netscape 4, aber Sie werden wahrscheinlich ein Dutzend andere Funktionen nutzen, die nicht 4 in Netscape arbeiten.

Ich muss sagen, wenn Sie in der Seite zu diesem Bereich verknüpft werden werden ... wie seite.html # foo und Foo Titel ist kein Link sollten Sie verwenden:

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

Wenn Sie stattdessen einen <a> Bezug setzt um es Ihre Überschrift wird von einem <a> spezifischen CSS innerhalb Ihrer Website beeinflusst werden. Es ist nur zusätzliche Markup, und Sie sollten es nicht brauchen. Ich würde empfehlen, auf der Überschrift eine ID vergeben, ist es nicht nur besser ausgebildet, aber es ermöglicht es Ihnen, entweder Adresse, die in Javascript oder CSS-Objekt.

Wikipedia macht intensiven Gebrauch von dieser Funktion wie folgt aus:

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

Und Wikipedia ist für alle arbeiten, so würde ich sicher fühlt mit dieser Form kleben.

Auch vergessen Sie nicht, Sie dies nicht nur mit Spannweiten aber mit divs oder sogar Tabellenzellen verwenden können, und dann haben Sie Zugriff auf die: Ziel Pseudo-Klasse auf dem Element. Nur achten Sie nicht die Breite zu ändern, wie mit fett gedruckten Text, Ursache, die Inhalte sich bewegt, was störend ist.

Benannte Anker - meine Stimme ist zu vermeiden:

„Namen und IDs sind im gleichen Namensraum ...“ - zwei Attribute mit dem gleichen Namensraum nur verrückt. Lassen Sie uns einfach schon veraltet sagen.
„Dübel Elemente ohne atribute href“ - Wieder einmal die Art eines Elements (Hyperlink oder nicht), indem er eine atribute definiert ist ?! Doppel verrückt. Der gesunde Menschenverstand sagt, es ganz zu vermeiden.
Wenn Sie jemals einen Anker ohne pseudo-Klasse Stil, gilt das Styling für jeden. In CSS3 können Sie dieses Problem umgehen, mit Attributselektoren (oder gleichem Styling für jede Pseudoklasse), aber es ist immer noch eine Abhilfe. Dies kommt in der Regel nicht, weil Sie Farben pro Pseudo-Klasse wählen, und die unterstrichenen standardmäßig vorhanden ist, macht es nur Sinn, zu entfernen, die es das gleiche wie andere Text macht. Aber Sie jemals entscheiden, Ihre Links fett zu machen, es wird Probleme verursachen.
Netscape 4 könnte die ID-Funktion nicht unterstützen, aber immer noch ein unbekanntes Attribut wird keine Probleme verursachen. Das ist, was die Kompatibilität für mich genannt.

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

ist, was verwendet werden soll. Verwenden Sie keine Anker verwenden, wenn Sie einen Link wollen.

Köpfe für JavaScript Benutzer auf: alle IDs globalen Variablen unter Fenster werden

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

erstellt nur die JS global:

window.foo

Der Wert von window.foo wird die HTMLElement für den h1 sein.

Wenn Sie nicht alle Werte in id Attribute verwendet garantieren können sicher sind, können Sie das Festhalten an name bevorzugen:

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

ID Methode wird nicht auf älteren Browsern, Ankername Methode wird in neueren HTML-Versionen veraltet ... ich mit der ID gehen würde.

Es gibt keinen semantischen Unterschied; der Trend in den Normen ist auf die Verwendung von id statt name. Allerdings gibt es Unterschiede, die man lieber name in einigen Fällen führen kann. Die HTML 4.01 Spezifikation bietet folgende Hinweise :

Verwenden id oder name? Autoren sollten die folgenden Aspekte berücksichtigen bei der Entscheidung, ob id oder name für einen Anker-Namen zu verwenden:

Das id-Attribut kann als mehr handelt als nur einen Ankernamen (zum Beispiel Stylesheet-Selektor, Verarbeitung Kennung, usw.).
Einige ältere Benutzerprogramme unterstützen keine Anker mit dem id-Attribut erstellt.
Der Name Attribut ermöglicht reiche Ankernamen (mit Einheiten).

Ich habe eine Web-Seite, bestehend aus einer Anzahl von vertikal gestapelten div-Container, identisch in Form und unterscheiden sich nur in der Seriennummer. Ich wollte den Namen Anker an der Spitze jedes div verbergen, so die wirtschaftlichste Lösung stellte sich heraus, einschließlich der Anker zu sein als ID innerhalb der Öffnung div-Tag, das heißt,

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

Nur eine Beobachtung über die Markup Die Markup Form in früheren Versionen von HTML einen Ankerpunkt vorgesehen. Die Markup-Formulare in HTML5 das id-Attribut verwendet wird, während die meist äquivalent erfordern ein Element zu identifizieren, von denen fast alle sind in der Regel enthalten Inhalt erwartet.

Eine leere Spanne oder div könnte verwendet werden, zum Beispiel, aber diese Nutzung aussieht und riecht entartet.

Ein Gedanke ist das wbr Element für diesen Zweck zu verwenden. Die wbr hat ein leeres Inhaltsmodell und erklärt lediglich, dass ein Zeilenumbruch möglich ist; das ist immer noch ein wenig unentgeltliche Nutzung eines Markup-Tag, aber viel weniger als unentgeltliche Dokument Abteilungen oder leere Text Spannweiten.

Die zweite Probe weist eine eindeutige ID auf das Element in Frage. Dieses Element kann dann unter Verwendung von DHTML manipuliert oder abgerufen werden.

Die erste, auf der anderen Seite setzt eine benannte Stelle im Dokument, ähnlich ein Lesezeichen. An einen „Anker“, macht es durchaus Sinn.

In HTML 5, das id="" Attribut definiert einen eindeutigen Identifikator für ein Element, das für ein Fragment Verbindung auch ein Anker ist. In früheren HTML-Standards definiert das name="" Attribut des <a> Element 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 ein bisschen fleckig ist (auch wenn die neuesten Versionen aller gängigen Browser es unterstützen, die Freigaben, die nicht nicht mehr als ein paar Jahre [Und es ist am besten, etwas nicht zu brechen, wenn es isn‘ t einen guten Grund]). Es ist kompatibel, und es tut Stil nicht, was in dem link'd Elemente ist, für das Schließen noch außerhalb des Elements ist, aber es ist nach wie vor gültig in allen aktuellen Standards.

Seien Sie sicher, dass die name="" und id="" Attribute des <a> Element gleich sind.

Wie sei es mit Namensattribut für alten Browser und id-Attribut der neuen Browser. Beide Optionen werden verwendet, und Ausweichmethode wird standardmäßig implementiert werden !!!

Der ganze „benannten Anker“ -Konzept verwendet den Namen Attribut, per Definition. Sie sollten nur halten, den Namen zu verwenden, aber das ID-Attribut könnte für einige Javascript Situationen nützlich sein.

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

Lizenziert unter: CC-BY-SA mit Zuschreibung

Nicht verbunden mit StackOverflow