HTML Uniform Resource Locators

Ein Uniform Resource Locator (URL), der auch als Webadresse bezeichnet wird, ist ein Verweis auf eine Webressource, der deren Standort im Computernetzwerk und einen Mechanismus zum Abrufen angibt. Eine URL ist eine besondere Art von Uniform Resource Identifier (URI), obwohl diese beiden Begriffe manchmal synonym verwendet werden. In den meisten Webbrowsern wird die URL einer Webseite oberhalb der Seite in einer Adressleiste angezeigt.

Eine URL kann aus Wörtern oder einer Internet-Protocol-Adresse (IP-Adresse) bestehen. Generell geben Nutzer den Namen ein, da er leichter zu merken ist als Zahlen.

Diese Seite erklärt den Aufbau einer URL, wie absolute und relative URLs in HTML-Attributen funktionieren, wie die Query- und Fragment-Teile arbeiten, die URL-Kodierung und die am häufigsten verwendeten Schemas.

URL-Syntax

Die allgemeine Syntax einer vollständigen Webadresse lautet:

scheme://host:port/path?query#fragment

Aufbau einer URL

Gemäß RFC 3986 — der Spezifikation, die URLs definiert — besteht eine URL aus den folgenden Komponenten. Es gibt keine separate „Dateiname"-Komponente: Ein Dateiname ist einfach das letzte Segment des Pfads.

Eine vollständige URL, aufgeschlüsselt

Betrachten Sie diese Adresse:

https://www.w3docs.com:443/learn-html/page.html?tab=1#intro

Sie besteht aus folgenden Teilen:

Absolute vs. relative URLs

In HTML kann eine URL vollständig (absolut) oder in einer Kurzform (relativ) geschrieben werden. Bei einer relativen URL ergänzt der Browser die fehlenden Teile — Schema, Host und das Basisverzeichnis — aus der URL der aktuellen Seite.

Dies ist überall relevant, wo auf eine andere Ressource verwiesen wird: in <a href>-Links, <img src>-Bildern und <link href>-Stylesheets.

Angenommen, die aktuelle Seite ist https://example.com/learn-html/page.html:

<!-- Absolute URL: includes the scheme and host -->
<a href="https://example.com/page">External page</a>

<!-- Root-relative: starts at the site root -->
<img src="/images/logo.png" alt="Logo" />

<!-- Relative: relative to the current page's folder -->
<link rel="stylesheet" href="../css/style.css" />

Verwenden Sie relative URLs für Links innerhalb Ihrer eigenen Website (sie funktionieren auch dann noch, wenn die Website auf eine neue Domain umzieht) und absolute URLs für Verweise auf externe Ressourcen. Weitere Informationen zum Verlinken finden Sie unter HTML-Links.

Die Query-Komponente

Der Query-String kommt nach einem ? und übergibt Daten als key=value-Paare an die Ressource. Mehrere Parameter werden mit & verbunden:

https://www.w3docs.com/search?q=html&page=2

Hier sind q=html und page=2 zwei separate Parameter. Server (und JavaScript) lesen diese Werte aus, um zu entscheiden, was zurückgegeben werden soll — zum Beispiel ein Suchbegriff und eine Seitennummer.

Das Fragment (Anker)

Das Fragment kommt nach einem # und verweist auf einen bestimmten Teil einer Seite. Der Browser scrollt zu dem Element, dessen id mit dem Fragment übereinstimmt. Es wird vollständig im Browser verarbeitet und niemals an den Server gesendet.

<!-- Links to the element with id="section2" on the same page -->
<a href="#section2">Jump to Section 2</a>

<h2 id="section2">Section 2</h2>

URL-Kodierung

URLs können über das Internet nur mit dem ASCII-Zeichensatz übertragen werden. Wenn eine URL Zeichen außerhalb dieses Zeichensatzes enthält — oder Zeichen, die in einer URL eine besondere Bedeutung haben — müssen diese Zeichen kodiert werden.

Bei der URL-Kodierung (auch Prozent-Kodierung genannt) wird ein Zeichen durch ein % gefolgt von seinem zweistelligen Hexadezimalwert ersetzt. URLs dürfen keine Leerzeichen enthalten, daher wird ein Leerzeichen zu %20 (oder in Query-Strings zu einem +-Zeichen):

Before:  https://www.w3docs.com/search?q=hello world
After:   https://www.w3docs.com/search?q=hello%20world

Reservierte Zeichen wie ?, &, =, # und / haben in einer URL eine strukturelle Bedeutung, daher müssen sie, wenn sie in einem Wert erscheinen, ebenfalls prozent-kodiert werden (zum Beispiel wird & zu %26). Einige häufige Ersetzungen:

Gängige Schemas

Das Schema teilt dem Browser mit, welches Protokoll oder welchen Dienst er verwenden soll. Die häufigsten sind im Folgenden aufgeführt.

<a href="mailto:[email protected]">Email us</a>
<a href="tel:+15551234567">Call us</a>

Aus Sicherheitsgründen schränken moderne Browser die Schemas ftp: und file: ein: Die Unterstützung für ftp: wurde aus den meisten Browsern entfernt, und file:-Links zu lokalen Dateien funktionieren in der Regel nicht von einer Seite, die über http/https ausgeliefert wird.

Übungen