HTML-URL-Kodierung

Charset bestimmt, wie die HTML-Datei Bytes in Buchstaben verwandelt. URL-Kodierung (Percent-Encoding) ist ein anderes Problem: wie Zeichen sicher innerhalb einer URL reisen — in Links, Weiterleitungen und Formular-Query-Daten — ohne die eigene Struktur der URL zu zerbrechen. Leerzeichen, Nicht-ASCII-Buchstaben und reservierte Symbole brauchen oft die Form % + Hex, damit Browser und Server sich über die Bedeutung einig sind.

Was URL-Kodierung ist

Eine URL hat reservierte Zeichen, die die Adresse strukturieren: ? startet eine Query, & trennt Paare, = verbindet Namen mit Werten, # startet ein Fragment. Wenn diese Zeichen als Daten in einem Wert vorkommen, müssen sie kodiert werden, damit sie nicht für Struktur gehalten werden. Unsichere Zeichen wie Leerzeichen werden ebenfalls für zuverlässigen Transport kodiert.

Direkte Antwort

URL-Kodierung ersetzt ein Zeichen durch % gefolgt von zwei hexadezimalen Ziffern. Das klassische Beispiel: ein Leerzeichen wird zu %20. Viele Browser und HTML-Formulare kodieren Query-Werte beim Absenden automatisch. Du brauchst die Idee trotzdem, wenn du href-Query-Strings von Hand schreibst, einen kaputten Link debugst oder eine Adressleiste voller Percent-Codes liest.

Häufige Percent-Kodierungen

Kodierte Query in einem Link

Eine Such-Query mit Leerzeichen von Hand zu schreiben ist die klarste Anfänger-Demo. Kodiere das Leerzeichen im Wert; lass die strukturellen ? und = in Ruhe.

Das Beispiel lesen

• search.html ist der Pfad; halte Pfad-Dateinamen einfach, wenn du sie kontrollierst
• ?q= startet einen Query-Parameter namens q
• html%20links ist der Wert „html links“ mit einem als %20 kodierten Leerzeichen
• Der sichtbare Linktext kann menschenlesbar bleiben; die Kodierung gehört in die URL

Saubere Dateinamen bevorzugen; Werte kodieren

Einen ganzen Seitennamen mit Leerzeichen zu kodieren ist für alle umständlich. Bevorzuge my-page.html gegenüber my page.html. Nutze Percent-Encoding vor allem für Query-Werte und Sonderzeichen in URLs, die du von Hand zusammenbauen musst.

Formulare und Browser helfen oft

Wenn ein Nutzer ein HTML-Formular mit method="get" absendet, kodieren Browser die Feldwerte typischerweise für dich in den Query-String. Das ersetzt nicht das Verständnis von %20, wenn du Logs liest, Links teilst oder href von Hand schreibst. Das Muster zu kennen macht Debugging schneller.

Nicht dasselbe wie HTML-Entities

Im HTML-Text ist & eine Entity für das Ampersand-Zeichen. In einer URL kann ein Ampersand, das Daten ist, als %26 erscheinen. Andere Werkzeuge, andere Kontexte. Ebenso geht es bei Datei-Charset UTF-8 um das Dekodieren der .html-Datei — es ersetzt Percent-Encoding in URLs nicht.

Nicht-ASCII in URLs (Anfängerhinweis)

Buchstaben außerhalb von Basic-ASCII können in echten Adressen als längere Percent-Sequenzen erscheinen. Du musst diese Tabellen in dieser Sitzung nicht auswendig lernen. Merke die Regel: Wenn ein Zeichen als Daten unsicher oder reserviert ist, trägt Percent-Encoding es in URLs. Für Lernseiten halte Demo-Queries in einfachem Latein plus %20, bis du dich wohlfühlst.

Übung in deinem Editor

1. Erzeuge einen Link, dessen href eine Query wie ?q=hello%20world enthält.
2. Öffne den Link und beobachte die Adressleiste.
3. Ändere %20 im Quelltext in ein rohes Leerzeichen, lade neu und vergleiche, wie der Browser die URL normalisiert oder zerbricht.
4. Benenne eine Übungsdatei mit Bindestrichen statt Leerzeichen um und aktualisiere die Links.
5. Schreibe einen Query-Wert, der %26 bräuchte, wenn ein Ampersand Teil der Daten wäre — und prüfe, dass du das strukturelle & zwischen Parametern nicht kodiert hast.

Typische Fehler

• Rohe Leerzeichen in URLs im Code einfügen, ohne das Ergebnis zu prüfen
• Das Schema https:// oder das ganze strukturelle Gerüst versehentlich percent-kodieren
• HTML-Entities (&) mit URL-Codes (%26) verwechseln
• In jeden Dateinamen Leerzeichen setzen und hoffen, Kodierung rette die Navigation für immer
• Strukturelle ? / & / = kodieren, die zwischen Teilen URL-Syntax bleiben sollen

Zusammenfassung

• URL-Kodierung nutzt % plus zwei Hex-Ziffern (Leerzeichen → %20)
• Reservierte und unsichere Zeichen brauchen Kodierung, wenn sie Daten sind
• Bevorzuge einfache Dateinamen; kodiere Query-Werte, wenn du sie von Hand schreibst
• Formulare und Browser kodieren beim Absenden oft automatisch
• Percent-Encoding ist nicht dieselbe Aufgabe wie HTML-Entities oder Datei-Charset