kebab-case writes every word in lowercase and links them with hyphens: my-page-title, main-nav, btn-primary. The name comes from the words being skewered on a stick. It is also called dash-case or lisp-case.
This is the convention for web addresses, CSS class names, HTML data attributes, custom element names and the file names in many front-end projects. It is why the URL of this very page has hyphens, not underscores.
Paste a phrase, get the name
Enter one name per line. Spaces, underscores, punctuation and capital-letter humps are all treated as separators, so Main Navigation, mainNavigation and main_navigation become main-navigation. Letters are lowercased and any run of separators collapses into a single hyphen.
This is a conversion for names, not a full URL builder. If you are making a web address from a headline, use the slug generator. It does the same job and also strips accents, removes characters that are not allowed in URLs, and can drop little words like “the” and “of” to keep it short.
Why hyphens and not underscores
For web pages, search engines have long treated a hyphen as a word break and an underscore as part of the word. A URL like /best-text-tools is read as three words, while /best_text_tools may be read as one long one. Google has said it recommends hyphens for exactly that reason, and it is the safest choice when you cannot verify how a particular crawler behaves. Our article on SEO-friendly URLs covers the rest of the rules for good address names.
In CSS, class names such as .card-title are written this way by almost universal habit, and the hyphen is allowed there. In JavaScript the hyphen is not allowed in a variable name, because it would be read as subtraction, which is why code uses camelCase for the same idea.
Limits
Acronyms are read by capital boundaries, so HTMLParser has no break inside and becomes htmlparser; write it as “html parser” for html-parser. Apostrophes count as separators, so “what’s new” becomes what-s-new. Remove the apostrophe beforehand, using remove special characters, to get whats-new.
If you need underscores, there is a snake_case converter, and the case converter shows every style together.
Where hyphenated names are required
Sometimes kebab-case is not a preference but a rule. Custom HTML elements, the building blocks of web components, must contain a hyphen in their name, so user-card is valid and usercard is not. Command-line options are written this way as well (--dry-run, --output-dir), and many teams use it for Git branch names such as fix-login-redirect. In CSS, naming schemes like BEM build on it: card__title and card--featured add separators for the block, element and modifier while each part stays hyphenated.