kebab-case Konverter: Text online in kebab-case umwandeln

Was kebab-case ist

kebab-case setzt Bindestriche an die Stelle der Leerzeichen und schreibt jeden Buchstaben klein:

My Blog Post Title wird zu my-blog-post-title
backgroundColor wird zu background-color
user_profile_card wird zu user-profile-card

So funktioniert der Konverter

Das Tool findet die Wörter in jeder Zeile, schreibt sie klein und verbindet sie mit Bindestrichen. Wörter können durch Leerzeichen, Unterstriche, Punkte oder Schrägstriche getrennt sein oder durch Großbuchstaben wie in camelCase und PascalCase. Satzzeichen werden entfernt. Jede Zeile wird einzeln umgewandelt. Du kannst also eine Liste von Titeln oder Klassennamen einfügen und bekommst eine passende Liste zurück.

Eingabe	Ausgabe
My First Blog Post!	my-first-blog-post
backgroundColor	background-color
user_profile_card	user-profile-card
ProductListItem	product-list-item
10 Tips for Better Sleep	10-tips-for-better-sleep
10 Tipps für besseren Schlaf	10-tipps-für-besseren-schlaf

Wo kebab-case verwendet wird

URLs: example.com/blog/my-first-post
CSS: Klassennamen wie .nav-item und Eigenschaften wie font-size
HTML: Attribute wie data-user-id und eigene Elementnamen wie <user-card>
Datei- und Ordnernamen: besonders in Webprojekten
npm-Pakete: Paketnamen müssen kleingeschrieben sein, und Bindestriche sind das übliche Trennzeichen
Kommandozeilen-Optionen: --dry-run, --no-cache

kebab-case für URL-Slugs

Ein Slug ist der lesbare Teil einer Webadresse, der eine Seite kennzeichnet. Gute Slugs sind kurz, kleingeschrieben und mit Bindestrichen getrennt. Füge hier deinen Seitentitel ein, um einen Ausgangspunkt zu bekommen, und kürze ihn dann:

Wandle den Titel um: „10 Tips for Better Sleep“ wird zu 10-tips-for-better-sleep.
Entferne Füllwörter, wenn der Slug lang ist: tips-better-sleep.
Behalte das wichtigste Keyword der Seite im Slug.

Bei deutschen Titeln kommt ein Schritt dazu: Der Konverter lässt Umlaute und ß stehen. Browser zeigen solche Adressen zwar an, beim Kopieren oder Teilen werden sie aber oft prozentkodiert, und aus „für“ wird dann „f%C3%BCr“. Die meisten deutschen Websites schreiben deshalb ae, oe, ue und ss in ihre URLs. Ersetze die Zeichen vor dem Umwandeln von Hand. Der URL-Slug-Generator entfernt sie zwar automatisch, macht aber aus „ü“ ein einfaches „u“ und nur aus „ß“ ein „ss“. Aus „für“ wird dort „fur“. Wenn du „fuer“ willst, ersetze die Umlaute also auch dort vorher selbst.

Kleinschreibung ist wichtig, weil viele Webserver /My-Page und /my-page als zwei verschiedene Adressen behandeln.

Im Vergleich mit anderen Schreibweisen

Schreibweise	Beispiel	Im Code nutzbar?
kebab-case	user-first-name	Nein, der Bindestrich bedeutet Minus
snake_case	user_first_name	Ja
camelCase	userFirstName	Ja

Brauchst du eine der anderen? Probier den snake_case Konverter oder den camelCase Konverter.

kebab-case Konverter: Fragen und Antworten

Was ist kebab-case?

kebab-case schreibt einen Namen aus mehreren Wörtern klein und setzt Bindestriche zwischen die Wörter, wie in main-nav oder my-first-post. Die Wörter sehen aus wie Stücke auf einem Spieß. Andere Namen dafür sind Dash Case, Hyphen Case, Lisp Case oder Spinal Case.

Warum sind Bindestriche in URLs besser als Unterstriche?

Google empfiehlt Bindestriche, um Wörter in URLs zu trennen, weil sie als Worttrennung gelesen werden. Das hilft Suchmaschinen und Menschen, die Adresse zu lesen. Unterstriche können so gelesen werden, als würden sie zwei Wörter zu einem verbinden.

Kann ich das Tool als URL-Slug-Generator nutzen?

Ja, mit einer Einschränkung. Füge einen Seitentitel ein, und der Konverter schreibt ihn klein, entfernt Satzzeichen und verbindet die Wörter mit Bindestrichen. Aus „My First Blog Post!“ wird my-first-blog-post. Umlaute und ß bleiben dabei unverändert: Aus „10 Tipps für besseren Schlaf“ wird 10-tipps-für-besseren-schlaf. Für deutsche URLs ersetzt du sie besser durch ae, oe, ue und ss oder nutzt den URL-Slug-Generator.

Kann ich kebab-case für Variablennamen verwenden?

In den meisten Sprachen nicht. JavaScript, Python, Java und viele andere lesen den Bindestrich als Minuszeichen, user-name würde also „user minus name“ bedeuten. Nutze im Code camelCase oder snake_case und kebab-case für URLs, CSS, HTML-Attribute und Dateinamen.

kebab-case Konverter

Umwandeln in

Für Code