Beim Lesen von Blog -Posts oder langen Webseiten ist es eine meiner Lieblingsbeschäftigungen, zu dem speziellen Abschnitt zu springen, den Sie zuerst lesen möchten. Dies ist dank des Ankerlinks möglich.
Möchten Sie sehen, was ich meine? Scrollen Sie zum Inhaltsverzeichnis unten. Jedes Thema im Inhaltsverzeichnis ist klickbar und kann direkt in diesen Abschnitt gesprungen werden.
Es ist ziemlich cool, nicht wahr? Das Beste daran ist, dass es sehr einfach ist, Ihre eigenen Ankerlinks zu erstellen, auch wenn Sie keine Fülle von HTML -Wissen haben. Wenn Sie sich über HTML-Speak verwirrt fühlen, folgen Sie dem aktuellen Beispiel unten.
Hinweis: Wenn Sie ein Hubspot -Kunde sind, Befolgen Sie diese Anweisungen.
Inhaltsverzeichnis
Was ist ein HTML -Hyperlink?
Ein HTML -Hyperlink ist ein klickbarer Link, der an ein beliebiges HTML -Element auf einer Webseite beigefügt werden kann, z. B. ein Bild oder Text. Diese Links können verwendet werden, um Benutzer auf andere Seiten innerhalb der Website, externe Websites oder bestimmte Teile einer Webseite zu leiten.
Hyperlinks werden mit HTML -Code erstellt, der Sprache, die zum Erstellen von Websites verwendet wird. Mit der strategischen Verwendung von Hyperlinks können Sie Ihre Benutzererfahrung auf Ihrer Website verbessern, indem Sie Benutzer durch Inhalte führen und relevante Informationen erkennen.
Was ist ein HTML -Anker -Link?
Ein HTML -Ankerlink, auch als Sprunglink bezeichnet, ist ein Link, der zu einem bestimmten Teil einer Webseite wechselt. Ankerlinks sind besonders nützlich, um Benutzer auf langen Seiten zu führen.
Ein gutes Beispiel dafür ist das oben erwähnte Inhaltsverzeichnis. Die Inhaltsverzeichnis verwendet Ankerlinks, die zu verschiedenen Abschnitten dieses Blog -Beitrags verlinken, um den Lesern die genauen Informationen zu finden, nach denen sie suchen.
Durch effektives „Springen“ in bestimmte Teile einer Webseite können Sie den Inhalt Ihrer Website attraktiver machen. Und obwohl dies für die Benutzererfahrung wichtig ist, macht es den Inhalt bequemer und scrollierbarer für Besucher der Website, aber alles muss richtig gemacht werden.
Externe und Sprungverbindungen
Ein Sprunglink ist ein Link, der zu einem bestimmten Abschnitt einer Website „springt“. Externe Links sind jedoch Hyperlinks, die Benutzer auf Seiten auf einer anderen Website leiten.
Anatomie von Ankerlinks
Das Erstellen eines Ankerlinks ist einfach. Es ist jedoch hilfreich zu verstehen, welche HTML -Elemente involviert sind und wie sie sich alle verbinden. Dies sind die notwendigen Elemente, um einen Ankerverbindung zu erstellen.
1. Ankerelemente
Das wichtigste HTML -Element eines Ankerlinks ist das Ankerelement -Tag. Dies ist der Buchstabe „A“ mit Winkelklammern auf jeder Seite. Es sieht so aus: .
Durch das Hinzufügen eines Ankerelements können Sie auf derselben Seite zu einer Webseite, einer E -Mail -Adresse, einer Telefonnummer, einer Datei oder dem Abschnitt des Inhalts übereinstimmen.
2. Href
HREF stellt eine Hypertextreferenz dar, ist jedoch ein Attribut, das das Ziel eines Links in einer Webseite angibt. Normalerweise wird ein HREF -Attribut hinzugefügt, um zu definieren, wohin die Ankerverbindung gerichtet ist.
3. ID -Tag
Ein ID -Tag ist eine Kennung, die ein eindeutiges Element in HTML definiert. Bei Ankerlinks wird die ID verwendet, um den Abschnitt auf der Seite zu identifizieren, zu dem Sie den Link haben.
Wenn Sie Ihrem Anker -Link -Code eine ID hinzufügen möchten, sieht dies so aus:
Möchten Sie mehr über HTML -Grundlagen und CSS -Hacking erfahren? Laden Sie dieses kostenlose eBook mit 25 materiellen Tipps und Codierungsvorlagen herunter.
So erstellen Sie einen Ankerlink
Nachdem wir die Hauptelemente geteilt haben, die in den Ankerlink fallen, zeigen wir Ihnen, wie Sie auf Ihrer Webseite Schritt für Schritt Ankerlinks erstellen.
1. Nennen Sie das Objekt oder Text, mit dem Sie verlinken möchten.
In einem normalen Link -Szenario hat alles, was Sie zum Verknüpfen benötigen, eine eigene URL. In diesem Szenario verlinken Sie jedoch nicht auf eine neue Seite mit einer eigenen URL, sodass Sie einen Namen für das Ziel für den Link erstellen müssen.
Es wird empfohlen, Wörter oder Phrasen zu verwenden, die das Ziel des Links beschreiben. Verwenden Sie bei Verwendung von Phrasen einen Unterstrich zwischen jedem Wort anstelle eines Raums. Andernfalls funktioniert der Code nicht.
Beispiel
Angenommen, Sie schreiben einen mit Beispielen gefüllten Blog-Beitrag. Wenn Sie zu einem bestimmten Beispiel in Ihrem Beitrag verlinken möchten, möchten Sie Folgendes als Name des Objekts verwenden:
Beispiel _1
Nun zum nächsten Schritt.
2. Fügen Sie das Ankerverbindungs -Tag ein.
Fügen Sie es mit dem ausgewählten Namen in das HTML -Ankerverbindungs -Tag ein.
Mit anderen Worten, ersetzen Sie den roten Abschnitt des folgenden Tags durch den im vorherigen Schritt ausgewählten Namen.
In diesem Fall habe ich mein Objekt „Beispiel 1“ genannt.
So funktioniert dieser Code:
3. Fügen Sie das Öffnen und Schließen des Anker -Link -Tags hinzu.
Platzieren Sie diese vollständige Öffnung Markieren Sie das Objekt, das Sie mit dem obigen Text oder Objekt verlinken möchten, und fügen Sie anschließend ein Schluss -Tag hinzu.
Wenn Sie dies tun, wird der Linkspeicherort festgelegt. So sollte Ihr Code jetzt aussehen:
Das Objekt, mit dem Sie verlinken möchten.
4. Erstellen Sie einen Hyperlink, der sich zu diesem Text oder Objekt bewegt.
Gehen Sie als nächstes in den Teil des Beitrags, den Sie einen Hyperlink haben möchten. Sie müssen ein typisches HREF -Attribut hinzufügen, das das Ziel des Hyperlinks anzeigt. Ein Teil, der eine URL enthält, kann jedoch normalerweise das Pfundsymbol (#) und den Namen des Objekts enthalten, mit dem zu verknüpfen ist. So sieht es aus:
<href= „#Insert_your_object_name_here“> Klicken Sie hier, um den folgenden Inhalt anzuzeigen:a>
Sobald Sie es getan haben, wird der gesamte Code so aussehen:
Wenn Sie es problemlos ausprobieren möchten, versuchen Sie es kostenlos für Drag & Drop -Website Builder.
Best Practices für Sprunglinks
Das Erstellen eines Ankerlinks fügt dem Prozess vor der Veröffentlichung Ihres Blog -Beitrags einige weitere Schritte hinzu. Dies kann jedoch einen großen Einfluss auf Ihre Benutzererfahrung haben. Beim Erstellen des nächsten Ankerlinks sind einige Dinge zu beachten:
Priorisieren Sie die Benutzererfahrung.
Ankerlinks sollen die Benutzererfahrung verbessern. Das Erstellen von Links, die zu bestimmten Teilen der Seite gelangen, erleichtert den Benutzern die Navigation durch den Inhalt und die Suche nach den gesuchten Informationen. Ohne die Hilfe eines Ankerlinks werden die Benutzer lange Zeit durch die Seite scrollen, was zu Sprung führen könnte.
Halten Sie beim Erstellen von Ankerlinks die Benutzererfahrung an der Spitze. Stellen Sie sicher, dass die auf der Seite verknüpften Abschnitte aus Sicht des Lesers sinnvoll sind.
Letztendlich schätzen die Kunden die leicht zu lesenden Inhalte von Skinble und werden die Website eher überdenken oder kaufen.
Beachten Sie Ihre Organisation.
Ankerlinks sind eine großartige Möglichkeit, lange Seiten mit Inhalten zu organisieren. Denken Sie an das obige Beispiel des Inhaltsverzeichnisses. Inhaltsverzeichnis stärkt die Organisation langer Blog -Beiträge und erleichtert den Lesern, das zu finden, wonach sie suchen.
Wir verwenden auch Sprunglinks zu Glossarseiten. Wenn Sie einen Abschnitt auf einer Website haben, das Hunderte von Begriffen und Definitionen enthält, ist das Hinzufügen von Sprunglinks eine großartige Möglichkeit, Ihre Navigation zu verbessern. Die Leser können nicht nur zu den Begriffen übergehen, die sie lernen möchten, sondern Sprunglinks helfen auch dabei, verschiedene Begriffe miteinander zu verbinden.
Wissen Sie, wann Sie externe Links verwenden.
Es ist wichtig, sich an den Unterschied zwischen Sprungverbindungen und externen Hyperlinks zu erinnern.
Ein Sprunglink ist ein Link, der zu einem bestimmten Abschnitt einer Website „springt“. Externe Links sind jedoch Hyperlinks, die Benutzer auf Seiten auf einer anderen Website leiten.
Es ist Best Practice, einen externen Link zu erstellen, wenn Informationen aus einer anderen Quelle angegeben werden. Dies verleiht nicht nur Anerkennung, wenn es fällig ist, sondern hilft Benutzern auch, mehr Informationen zu dem Thema zu finden, das sie lesen.
Lernte, wie man leicht Ankerlinks erstellt
Wenn Sie überhaupt mit dem Inhalt Ihrer Website arbeiten möchten, ist es ein Muss zu wissen, wie Sie einen Ankerlink erstellen.
Selbst wenn Sie wie ich sind und keine Codierungserfahrung haben, ist dies einer der einfachsten Tricks. Solange Sie verstehen, wie unterschiedliche HTML -Elemente zusammenarbeiten, können Sie Ihren Inhalten einen Jump -Link hinzufügen.
Nach meiner Erfahrung kann ich Ihnen sagen, dass die Verknüpfung mit einem bestimmten Teil einer Seite eine einfache Möglichkeit ist, Inhalte benutzerorientierter zu gestalten. Jumplinks helfen den Lesern, die Informationen zu finden, die sie schneller benötigen. Dies hilft Ihnen letztendlich dabei, sich auf den gesamten Inhalt zu beschäftigen.
Anmerkung des Herausgebers: Dieser Beitrag wurde ursprünglich im Juli 2014 veröffentlicht und für Frische, Genauigkeit und Inklusivität aktualisiert.
