Was ist es, wenn ein Link ein Nummernzeichen "#" enthält?

93

Ich habe einige Websites überprüft und sie haben ein Nummernzeichen (#) in der URL. Was tut es?

 <a href="#" >Link name</a>
html Luke101
quelle

Antworten:

105

Es ist ein "Fragment" oder "benannter Anker". Sie können damit einen Link zu einem Teil eines Dokuments erstellen. Wenn Sie auf eine Seite verlinken, öffnet der Browser diese normalerweise oben auf der Seite. Wenn Sie jedoch auf halber Höhe auf einen Abschnitt verlinken, können Sie das Fragment verwenden, um auf diese Überschrift (oder was auch immer) zu verlinken.

Wenn <a name="whatever"/>die Seite kein Tag enthält, wird der Browser nur auf den oberen Rand der Seite verlinken. Wenn das Fragment leer ist, wird es auch nur auf den oberen Rand der Seite verlinkt.

Nur für ein Fragment <a href="#">Link name</a>ist dies nur ein Link zum oberen Rand der aktuellen Seite.

Sie sehen oft diese Art von Link, der in Verbindung mit Javascript verwendet wird. Für standardkonformes HTML ist ein hrefAttribut erforderlich. Wenn Sie jedoch die Anforderung mit Javascript bearbeiten möchten, dient "#" als angemessener Platzhalter.

Dean Harding
quelle
1
+1 Obwohl der offizielle Begriff ein URL-Fragment ist, keine "Hash-Referenz": w3.org/TR/WD-html40-970708/htmlweb.html#h-4.1.1
Jason Hall
Ja, ich habe es in meiner Antwort in "Fragment" geändert, weil die meisten Leute es verwenden. Ich wusste nie, dass es einen "offiziellen" Namen hat :)
Dean Harding
2
Warum Browser es als "Zum Seitenanfang gehen" behandeln: Technisch gesehen haben Sie die Seite geändert. Nachdem Sie auf den Link geklickt haben, werden Sie feststellen, dass das # tatsächlich zur URL in der Adressleiste hinzugefügt wurde. Wenn Sie auf die Schaltfläche "Zurück" klicken, wird es erneut entfernt. Ich würde nicht sagen, dass es sich um einen Link zu einem Teil eines Dokuments handelt, sondern eher um einen Link zu einer Stelle im Dokument. Ansonsten im Grunde das gleiche, was ich geschrieben habe ...
animuson
Ein URI, der mit # endet, ist nach der generischen Syntax zulässig und kann als eine Art leeres Fragment betrachtet werden. In MIME-Dokumenttypen wie Text / HTML oder einem beliebigen XML-Typ sind leere Bezeichner, die diesem syntaktisch zulässigen Konstrukt entsprechen, nicht zulässig. Webbrowser zeigen normalerweise den oberen Rand des Dokuments für ein leeres Fragment an. - en.wikipedia.org/wiki/Fragment_identifier
IcyBrk
Auch von "Wenn keine solche Darstellung existiert, wird die Semantik des Fragments als unbekannt angesehen und ist praktisch nicht eingeschränkt." Von rfc3986 ( tools.ietf.org/html/rfc3986#page-24 )
IcyBrk
23

... nur um ein paar zusätzliche nützliche Tipps hinzuzufügen.

Sie können document.location.hashin JavaScript darauf zugreifen und es ändern .

Es kann auf einen benannten Anker (z. B. <a name="top"></a>) oder auf ein Element mit einer entsprechenden ID (z <div id="top"></div>. B. ) verweisen .

Wenn Sie einen für sich sehen (z. B. <a href="#" onclick="pop()">popup</a>), bedeutet dies im Allgemeinen, dass ein Link verwendet wird, um ausschließlich JavaScript auszuführen. Das ist schlechte Praxis.

Jedes aElement sollte ein Element haben href, das auf eine gültige Ressource verweist. Wenn eines nicht vorhanden ist, sollten Sie ein anderes Element verwenden, z button.

Alex
quelle
1
Das ist ein guter Punkt, es ist keine besonders gute Übung ... aber nur weil es nicht gut ist, heißt das nicht, dass Sie es nicht überall so verwenden werden :)
Dean Harding
1
@alex, wenn es eine schlechte Praxis ist, dann sag uns, was die gute Praxis wäre, stattdessen zu verwenden.
Ryan Lundy
@ Kyralessa Es war genau dort im nächsten Absatz. Wie auch immer, ich habe eine Bearbeitung vorgenommen, damit es hoffentlich klarer wird.
Alex
2
@alex, vermutlich ist ein Grund, warum Leute Links anstelle von Schaltflächen verwenden, dass sie das Aussehen von Links wollen. Wie wäre es mit einem Link zu einer Seite, auf der beschrieben wird, wie eine Schaltfläche wie ein Link aussieht? ZB HTML-Button-Test
Ryan Lundy
1
@alex, nicht mehr als zu sagen, dass die Verwendung von # für einen Link eine schlechte Praxis ist. Das OP hat nur gefragt, was es tut.
Ryan Lundy
11

# zeigt eine Verknüpfung zu einem Anker an.

Ich denke, ich würde noch etwas anderes erwähnen:

Die Verwendung von '#' als href für einen Link, der JavaScript aktiviert, ist schlecht, da die Seite nach oben gescrollt wird - was wahrscheinlich nicht das ist, was Sie wollen. Verwenden Sie stattdessen javascript:void(0).

Nathan Osman
quelle
+1 für die Erwähnung, dass das Klicken auf diese Links die Seite zwingt, nach oben zu scrollen.
Chris Calo
4
Sie brauchen keinen Anker mehr. Ab HTML5 (und möglicherweise HTML 4) kann jedes Element mit einem <id> -Tag von einer Fragmentkennung als Ziel ausgewählt werden. Siehe HTML5-Dokumente: whatwg.org/specs/web-apps/current-work/multipage/…
Basil Bourque
2
Verwenden Sie auch nicht javascript:void(0)- verwenden Sie a, buttonwenn es sich nicht um einen Link handelt.
alex
10

Das Nummernzeichen ( #) zeigt an, dass ein Anker auf der Seite gefunden werden soll. Wenn Sie dies beispielsweise irgendwo auf der Seite einfügen:

<a name="foo"></a>

oder in jüngerer Zeit:

<div id="foo">*part of page*</div>

Wenn Sie dann auf einen Link auf der Seite mit der href klicken #foo, wird zum Anker mit dem Namen oder divder ID navigiert foo.

Wenn Sie jedoch nur die href haben #, führt dies zum oberen Rand der Seite.

ElectroBit
quelle
2

Dies führt zurück zur Seite selbst. Es wird häufig mit Links verwendet, auf denen tatsächlich JavaScript ausgeführt wird.


quelle