Auf seiner Netzseite eine bestimmte Stelle verlinkbar machen

Auf der de.hypotheses Mailingliste kam vor einigen Wochen die Frage auf, wie wissenschaftliche Blogartikel noch besser zitierbar gemacht werden können: Konkret, ob es möglich sei, die Absätze durchzunummerieren – wie es etwa bei vielen Journals Praxis ist – damit andere Forschende dann auf einen bestimmten Absatz des Artikels verweisen zu können. Gerade bei sehr langen Blogartikeln erleichtert das die Nachnutzung und macht die Artikel damit noch “FAIRer“. Wir danken Jonas Richter, der diese Frage aufgeworfen hat, allen Mitgliedern der Community, die sich an der Diskussion beteiligt haben und besonders Stefan Müller, der in diesem Beitrag erklärt, wie mit html-Ankerlinks ein Artikel so strukturiert werden kann, dass jeweils einzelne Absätze mit ihren eigenen URLs versehen und zitiert werden können.

rostiger Anker liegt auf einem Steg vor dem Meer

 

Ein Link zielt üblicherweise auf eine ganze Netzseite. Es gibt aber die Möglichkeit, einen Link auf eine bestimmte Stelle der Netzseite führen zu lassen, etwa die Überschrift eines Abschnittes. So führt https://en.wikipedia.org/wiki/Hermann_Grassmann#Linguist nicht zum Beginn dieser Lexikonseite, sondern gleich zur Überschrift eines Abschnittes, der dem sprachkundlichen Wirken dieses großen Linguisten und Mathematikers gewidmet ist. (Freilich kann wie jeder Link auch dieser durch Änderungen reißen; aber das ist eine Sache für sich.)

Diesen Sprung – mitten in die Seite hinein an eine bestimmte Stelle – löst das Anhängsel “#Linguist” aus, das am Ende der Linkadresse (= URL) steht: Bekommt ein Browser eine URL mit “#”-Anhängsel, dann sucht er auf der anzuzeigenden Seite ein Element, das im HTML ein Attribut id="Linguist" hat – also ein Attribut namens “id” mit dem Wert “Linguist”, dem gleichen Wert nämlich, der in der URL hinter dem “#” steht. Wird der Browser fündig, springt er sogleich zur Stelle vor, an der dieses Element steht.

Höchst erfreulicherweise erlaubt nun die Hypothèses-Eingabeoberfläche sowohl in ihrer älteren als auch in ihrer neueren Form, dem Blockeditor, das HTML seiner Seite selbst zu bearbeiten und ein solches Attribut beinahe nach Belieben zu setzen, mithin Links auf bestimmte Stellen seiner Seite zu ermöglichen – ja! wir können es sogar noch etwas netter und runder machen als die Wikipedia …

Zunächst aber würden wir also in der Eingabeoberfläche auf die HTML-Ansicht wechseln. (Im Classic-Editor ist das ein Knopf mit dem “< >”-Zeichen; im Blockeditor klicke man erst oben rechts auf das “⋮”-Zeichen und in der sich dann entfaltenden Auswahlliste auf “Code-Editor”.)

Im HTML würden wir dann jene Stelle aufsuchen, die wir verlinkbar machen möchten. Nehmen wir einmal an, es sei eine Unterüberschrift, eine Überschrift dritter Ebene, also ein <h3>-Element; diesem fügen wir nun ein id-Attribut hinzu:

<h3 id="3.11">3.11. Grassmann und die Bra-Ket-Notation</h3>

Als Wert des id-Attributes eignen sich am besten solche Zeichen, die weder im HTML noch in der URL umschrieben werden müssten, also Buchstaben von A bis Z und a bis z (ohne Diakritika), Ziffern von 0 bis 9 sowie einige Interpunktionszeichen, darunter die folgenden drei am nützlichsten sein dürften: . _ -. Zweckentsprechenderweise darf ein id-Attributwert auf ein- und derselben Netzseite nur einmal vorkommen (und sollte nach Veröffentlichung möglichst nicht mehr geändert werden).

Gehen wir nun noch einen Schritt über das Wikipedia-Beispiel hinaus und machen es einfacher für alle, die einen Link auf diesen Abschnitt setzen möchten – denn wie kommen sie bequem an die zugehörige URL mit “#3.11”-Anhängsel? Wir setzen einen Link, auf den klickend man die URL in der Adressleiste des Browsers erhält und leicht dort herauskopieren kann. Als Linktext eignet sich hier wohl die Gliederungszahl in der Überschrift gut. (Ich würde nicht die ganze Überschrift verlinken, denn dann könnte ich in der Überschrift keinen anderen Link setzen, was doch vielleicht einmal erwünscht sein mag.)

Außerdem setze ich das id-Attribut jetzt in das Linkelement (statt in das h3-Element), was einen gleich zu nennenden Vorteil hat:

<h3><a id="3.11" href="#3.11">3.11.</a> Grassmann und die Bra-Ket-Notation</h3>

Statt einer Zwischenüberschrift kann so auch ein Absatz verlinkt werden, der zumal in Sachliteratur ja auch ganz gut eine Gliederungsnummer haben kann. Absätze erscheinen in der HTML-Ansicht des Hypothèses-Editors übersichtlichkeitshalber ohne ihre <p>-Marken, die daher nicht gut das id-Attribut aufnehmen können; es empfiehlt sich also, das id-Attribut einfach immer in das Linkelement zu setzen:

<a id="15.3" href="#15.3">#15.3</a> The most interesting rule concerning the development of laryngeals blah blah blah

Wie das auf einer Hypothèses-Seite erscheint, kann man hier sehen: Der Browser springt auf der Seite sogleich zum Absatz, in dem der “#15.3”-Link steht. Spult man nun weiter zum nächsten Absatz mit einer “#”-Nummer und klickt dort auf das verlinkte “#15.4”, steht oben in der Adressleiste die URL mit entsprechendem “#15.4”-Anhängsel (nicht mehr mit “#15.3”-Anhängsel) und kann von dort leicht herauskopiert werden, um einen Link auf genau diesen Absatz #15.4 zu setzen.

Das “#” im sichtbaren Text könnte auch fehlen, solange es im href-Attribut steht – und im id-Attribut nicht steht. Ich habe es dort auch in den sichtbaren Text gesetzt, um den Zusammenhang zwischen dieser Zahl, ihrer Verlinkung und der URL mit “#”-Anhängsel etwas klarer zu machen. Vielleicht kann man sich damit anfreunden, dass es die digitale Schwester des “§”-Zeichens ist. – Eine andere Möglichkeit wäre es, nur dieses “#” oder ein anderes Zeichen wie “¶” zu verlinken, was ich hier gemacht habe, wobei das Ausgrauen und vor allem das Ausrücken des “#” mehr Formatierung erfordert, als beim Schreiben in Hypothèses bequem oder überhaupt möglich, aber gewiss auch, als nötig ist. – Bei Gliederungszahlen in Überschriften lasse ich das “#” fort, vgl. hier.

Man kann sich das Anker-Element, das Link und Sprungziel zugleich ist, in einer allgemeinen Form speichern, etwa als <a id="█" href="#█">#█</a>, immer diese Form an je passender Stelle einfügen und braucht dann nur noch das Blockadezeichen “█” durch eine je andere ID zu ersetzen.

Das genannte Hypothèses-Beispiel zeigt einen Nebennutzen des Bemühens, Abschnitte seiner Seite verlinkbar zu machen: Einer langen Seite kann man dann leicht ein Inhaltsverzeichnis voranstellen, das auf die verzeichneten Abschnitte verlinkt; etwa so:

<h2>Table of content</h2>

<a href="#history">1. History of the laryngeal theory</a>

<a href="#phonology">2. Phonology</a>

…

p.S.: Wer sich scheut, in der html-Ansicht zu arbeiten, kann übrigens auch in der “normalen” What You See Is What You Get-Ansicht Ankerlinks setzen. Wie das geht, ist hier erklärt: https://bloghaus.hypotheses.org/3474#ankerlinks.

Beitragsbild: Kevin Woblick auf Unsplash, https://unsplash.com/de/fotos/gPL1mRlZQ-E.



Diesen Blogbeitrag zitieren
Stefan Müller (2023, 5. März). Auf seiner Netzseite eine bestimmte Stelle verlinkbar machen. Bloghaus. Abgerufen am 4. März 2024, von https://doi.org/10.58079/m294

Das könnte dich auch interessieren …

4 Antworten

  1. Ulrike Stockhausen sagt:

    Vielen herzlichen Dank für diesen hilfreichen Artikel!

    Denkbar wäre ja auch, die Ankerlinks mit einer Nummerierung der Absätze zu verknüpfen (ähnlich wie in diesem Beispiel mit den Überschriften). Monika Barget hat zum Beispiel in ihrem Blog Insulae eine Absatz-Nummerierung mit Div Tags gebaut (https://insulae.hypotheses.org/671). Man könnte aber auch einfach mit der Spaltenansicht arbeiten und die Spalten auf bspw. 2% und 9% einstellen, dann in die 2%-Spalte die Absatzzahl einfügen. Dann könnte man auf die jeweiligen Absatznummern die Ankerlink setzen, entweder so wie hier beschrieben in der html-Ansicht oder über das Feld “Ankerlink” in der Beitragsansicht. Das fände ich auch eine schöne Lösung.

    Auf jeden Fall ganz herzlichen Dank für den Impuls und die Erklärung, wie Ankerlinks in der html-Ansicht funktionieren!

    • Stefan Müller sagt:

      Ja, bei Monika Barget fällt die Zählung durch Herausrückung aus dem sonstigen Satzspiegel einerseits auf, so dass man eine Zahl schnell findet, und tritt andererseits durch die leichte Grautönung zurück, wenn man sie, den Text lesend, ausblenden möchte. Das geschieht durch zwei style-Attribute in dem div- und in dem folgenden p-Element:

      <div style=”color:gray; float:left”>3</div>
      <p style=”margin-left:40px”>… … …</p>

      div und p sind ja sogenannte Blockelemente, die zunächst immer einen Absatzwechsel zwischen sich haben, und das “float:left” sorgt hier dafür, dass das div sich an den linken Rand des p schmiegt. Dessen “margin-left:40px” sorgt nun für einen 40-Pixel-breiten Saum zwischen dem linken Rand des Elternelementes (vom p und div) und dem linken Rand des p-Elementes; in diesem Saum hat das div Platz. Man könnte vielleicht erwägen, statt der Pixel- eine em-Angabe zu machen, etwa “margin-left:2em”, damit die Saumesbreite proportional zur Schriftgröße ist, also mit dem Schriftbild größer wird, wenn ein Leser mit Strg-+ seinen müden Augen aufhelfen möchte. Freilich wird 40px in aller Regel ausreichen; und feste Pixelgrößen können auch von Vorteil sein.

      “Man könnte aber auch einfach mit der Spaltenansicht arbeiten und die Spalten auf bspw. 2% und 9% einstellen” – vielen Dank für den Hinweis 🙂 Ich kannte die Spaltenansicht noch nicht und bin immer dankbar, dass Hypothèses bei aller Verfeinerung der Eingabeoberfläche immer noch die hausbacknen HTML-Mittelchen zulässt, was sehr angenehm ist, wenn man zufällig letztere schon kennt oder anderwärts weiternutzen will, aber von WordPress nur das Nötigste weiß.

  2. Sehr schön, herzlichen Dank!

  1. 28. November 2023

    […] Verlinkung von außen in einen Blogbeitrag, bei dem ein bisschen HTML zum Einsatz kommt((11)). Angeregt wurde der Beitrag durch eine Anfrage in der Mailingliste, wie man Absätze oder Blöcke […]

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.

Suche in OpenEdition Search

Sie werden weitergeleitet zur OpenEdition Search