Convert any phrase into kebab-case — all lowercase, words joined by hyphens. Standard for URL slugs, CSS class names, and HTML attribute names.
User Profile Background Color → user-profile-background-color
kebab-case (sometimes called dash-case, hyphen-case, or lisp-case) is a naming convention where words are written in lowercase and joined by hyphens. It's the dominant style for URL slugs, CSS class names, HTML data-* attributes, and most config-file keys.
Search engines treat hyphens as word separators inside URL slugs but treat underscores as connectors — so my-blog-post ranks for "my blog post" while my_blog_post is read as one token. That's why kebab-case is the URL-slug standard regardless of which case style the rest of your codebase uses.
Every URL slug on this site (/word-counter, /typing-test-5-minutes) is kebab-case. SEO best practice: hyphens, not underscores; lowercase only.
BEM, Tailwind, Bootstrap, and most CSS frameworks use kebab-case classes. .btn-primary, .card-header, .is-active.
data-user-id, data-toggle, data-bs-target. These convert to camelCase automatically when accessed via JavaScript's dataset property.
Long-form CLI options use kebab-case: --dry-run, --no-cache, --output-format. Short single-character flags use a single dash: -v.
Modern config formats (YAML, TOML) and most static-site generators (Jekyll, Hugo) prefer kebab-case keys for human-readable file names and front-matter fields.
The converter processes input by first normalizing Unicode (NFKC) to decompose special characters into base forms. It then splits the string on non-alphanumeric boundaries (whitespace, underscores, punctuation, etc.), discarding any non-[A-Za-z0-9] characters. Each word is lowercased using full Unicode case mapping, and words are rejoined with hyphens (-). Leading, trailing, and consecutive hyphens are stripped. The algorithm does not preserve acronyms or possessive apostrophes; every contiguous sequence of alphanumeric characters becomes a single word.
While you can achieve kebab-case conversion via command line or word processor, this tool offers a dedicated, instant solution.
| This tool | sed command | Word Find/Replace | |
|---|---|---|---|
| Ease of use | No setup, one-click conversion | Requires command-line knowledge and regex | Multiple steps: replace all spaces with hyphens, then Change Case to lowercase |
| Special characters | Automatically strips all non-alphanumeric chars except hyphens | Must craft regex to handle Unicode and edge cases | May leave punctuation unless manually handled |
| Numbers | Preserves numbers as part of words | Easily included in regex | Numbers are kept by default |
| Multiple spaces | Collapses to single hyphen | Requires extra steps to remove consecutive hyphens | Replaces each space with a hyphen, leading to double hyphens |
The term 'kebab-case' was coined in the early 2000s by programmers humorously comparing naming conventions to food (camelCase, snake_case, kebab-case). It gained widespread adoption with the rise of CSS and URL-friendly slugs, and is a direct descendant of Lisp's tradition of using hyphens in identifiers (lisp-case). Its first recorded use in modern web development appears in the Rails community around 2005.
The hyphens between letters resemble skewers running through pieces of meat on a kebab. The name dates from the early 2010s among JavaScript developers; "dash-case" and "hyphen-case" are older synonyms.
kebab-case for URLs, CSS, and HTML attributes (anywhere a hyphen is allowed but an underscore looks weird). snake_case for variable names in Python/Ruby, database columns, and most code identifiers (where hyphens would be parsed as subtraction).
Yes if used as a variable or property name — JavaScript reads foo-bar as foo minus bar. kebab-case is for strings (CSS class names, URL slugs, HTML attributes) — never for identifiers in code.
Google explicitly recommends hyphens. Hyphens are word separators (so my-page is read as "my page"); underscores are connectors (so my_page is read as "my_page" — one token). For SEO, always use kebab-case URLs.