kebab-case Converter
Convert text to kebab-case used in CSS, URLs, and HTML attributes.
What is kebab-case?
kebab-case (also called spinal-case, lisp-case, or slug-case) uses lowercase words separated by hyphens. It is the standard format for URLs, CSS class names, HTML attributes, and file names in web projects.
hello world example→hello-world-exampleWhen to Use kebab-case
Use kebab-case for URL slugs (/blog/my-first-post), CSS classes (.nav-link, .hero-section), HTML data attributes (data-user-id), file names (my-component.tsx), and NPM package names (@my-org/my-package).
Never use kebab-case in JavaScript or Python variable/function names — hyphens are subtraction operators and will cause syntax errors. Do not use it for database columns (use snake_case instead).
Industry Standard
The W3C recommends hyphen-separated lowercase for HTML attribute names and CSS property names (e.g., background-color, font-size, data-user-id). Google's SEO guidelines also recommend hyphen-separated URL slugs over underscores, as hyphens are treated as word separators by Google's crawler while underscores are not.
How to Use This kebab-case Converter
- Paste or type your text into the Input Text box on the left.
- The output is converted to kebab-case instantly on the right.
- Click Copy to copy the result to your clipboard.
- Use Clear to reset and convert new text.
kebab-case in Programming Languages
.nav-link { color: blue; }<div class="hero-section" data-user-id="1"><my-component :user-name='name' />npm install my-package-name/blog/how-to-use-kebab-caseFrequently Asked Questions
Is this kebab-case converter free?
Yes, completely free — no signup, no account, no limits.
Does my text get stored or sent anywhere?
No. All conversions happen entirely in your browser using JavaScript. Your text never leaves your device and is never sent to any server.
When should I use kebab-case?
Use kebab-case for URL slugs (/blog/my-first-post), CSS classes (.nav-link, .hero-section), HTML data attributes (data-user-id), file names (my-component.tsx), and NPM package names (@my-org/my-package).
Expert tip
For SEO, always use kebab-case for URL slugs. Google's John Mueller has confirmed that hyphens act as word separators in URLs, so "camelcase-converter" ranks for "camelcase" and "converter" separately. Underscores do not separate words in URLs.