Hyphen Case Converter — Convert Text to kebab-case Online
What is hyphen-case?
Hyphen-case (also commonly known as kebab-case because the words look like skewered items on a kebab, or spinal-case) uses hyphens to separate words, with all letters in lowercase. It is the natural format for URLs, CSS, and HTML.
Hyphens have a privileged status in web technologies. HTML attributes like "data-*" and "aria-*" are hyphen-case. CSS property names are hyphen-case (background-color, font-size, border-radius). URL slugs are hyphen-case by default and convention. Google explicitly recommends hyphen-case over underscores for URL paths because search engines treat hyphens as word separators, improving keyword recognition in URLs.
This SEO benefit is why hyphen-case is the dominant format for web content slugs, file names served over HTTP, and any URL component.
Example
| Input | Output (hyphen-case) |
|---|---|
| Hello World Page | hello-world-page |
How to Convert to hyphen-case
- Enter your text — a page title, a heading, a phrase.
- Click hyphen-case.
- Copy the result — ready to use as a URL slug, CSS class name, or HTML attribute.
When to Use hyphen-case
Use hyphen-case for URL slugs (/my-blog-post), CSS class names (.my-component), HTML data attributes (data-user-id), and any identifier that appears in a URL or HTML markup. It is the correct format for Tailwind CSS classes, BEM class names, and HTML custom elements.
For SEO-sensitive URLs, always use hyphen-case over snake_case. Google's John Mueller has confirmed that hyphens are treated as word separators in URLs, while underscores are not — making hyphen-case slugs more SEO-friendly.
Common Use Cases for hyphen-case
- URL slugs and permalink structures
- CSS class names and ID attributes
- HTML data-* and aria-* attributes
- npm package names (by convention)
- Tailwind CSS and other utility class frameworks
- File names for HTML, CSS, and web assets
Frequently Asked Questions
What is kebab-case / hyphen-case?
Kebab-case (also called hyphen-case or spinal-case) joins words with hyphens in all lowercase: "my-variable-name". Standard for CSS, HTML attributes, URL slugs, and npm packages.
Why is hyphen-case better than snake_case for URLs?
Google treats hyphens as word separators in URLs, which means each word in a hyphen-case slug is indexed individually as a keyword. Underscores in URLs are not treated as word separators, so "my_page" is indexed as a single word rather than two separate words.
What is the difference between kebab-case and hyphen-case?
They are the same thing — different names for the same convention. "Kebab-case" is a popular informal name. "Hyphen-case" and "spinal-case" are also used.
Can CSS class names use snake_case instead of hyphen-case?
Technically yes, but it's unconventional. The CSS specification and virtually all CSS frameworks (Bootstrap, Tailwind, Bulma) use hyphen-case as the standard for class names. Following this convention makes your code easier for other developers to read.