kebab-case Explained: URLs, CSS & Why Hyphens Win

Look at the address bar of almost any well-built website and you will see it: /how-to-write-a-blog-post, words joined by hyphens. That is kebab-case, the lowercase-with-hyphens naming style that dominates URLs, CSS classes and file names across the web. It is simple, readable and, in some contexts, genuinely important for SEO. This guide explains kebab-case in full: what it is, where it is used, why hyphens matter, and how to apply it.

It is written for web developers, content creators and students learning naming conventions, and anyone who has wondered why web addresses use hyphens between words.

What Is kebab-case?

kebab-case is a naming convention in which a multi-word identifier is written in all lowercase letters with words separated by hyphens, with no spaces or capital letters — for example main-navigation, user-profile, how-to-guide. It is closely related to snake_case, differing only in the separator: where snake_case uses underscores, kebab-case uses hyphens. The lowercase words strung along the hyphens are said to resemble pieces of food on a skewer, which is where the playful name comes from. It is also sometimes called dash-case, hyphen-case or spinal-case.

The hyphen separator gives kebab-case a particular profile: it is highly readable, looks clean in contexts where lowercase is expected, and — crucially — works in places where underscores are awkward or invisible. Hyphens are the natural word separator in URLs and are required in certain web contexts where underscores or capital letters would cause problems. This is why kebab-case, despite being almost identical to snake_case in form, occupies a distinct and important niche on the web rather than being interchangeable with it.

In short: kebab-case writes multi-word identifiers in lowercase with hyphens between words, like user-profile. It is the standard for URL slugs, CSS class names, HTML custom attributes and many file names — and hyphens in URLs are preferred over underscores for SEO and readability.

Where kebab-case Is Used

kebab-case is the conventional choice across several core areas of web development, and knowing them helps you write web code and content that follows established norms. The most visible is URL slugs — the human-readable part of a web address that identifies a page. Well-structured URLs use kebab-case, turning a title like "How to Write a Blog Post" into /how-to-write-a-blog-post. This is partly convention and partly practical: hyphens are safe, readable URL characters that do not need encoding, and they clearly separate words for both humans and search engines.

kebab-case is also the standard for CSS class names and IDs, where you write selectors like .main-header and .product-card; this matches CSS's lowercase, hyphenated property style and is the overwhelming community convention. It is required for HTML custom data attributes, which must use hyphens (such as data-user-id). It is widely used for file and folder names in web projects, where lowercase-with-hyphens avoids case-sensitivity issues across operating systems and reads cleanly in URLs when files are served directly. And custom HTML elements (web components) are required to contain a hyphen in their names. Across all of these, the web's preference for lowercase, hyphenated, URL-safe naming makes kebab-case the natural fit.

Why Hyphens Matter for SEO

There is a specific, practical reason kebab-case matters for URLs beyond mere convention: search engines treat hyphens as word separators, but not underscores. When a search engine reads a URL, it interprets hyphens as spaces between distinct words, so /red-running-shoes is understood as the three separate words "red," "running" and "shoes." Underscores, by contrast, have historically been treated as joining characters, so /red_running_shoes could be read as the single unintelligible token "red_running_shoes." For URLs, where the words in the slug help search engines (and humans) understand what a page is about, this makes hyphens the clearly preferred separator.

This is why SEO guidance consistently recommends hyphenated, lowercase, descriptive URL slugs — that is, kebab-case. A clean slug like /best-budget-laptops communicates the page's topic at a glance to both readers and search engines, helps the URL look trustworthy in search results, and avoids the encoding and readability problems that spaces or other characters would introduce. It is one of the small, durable on-page SEO practices that has remained good advice for many years. So when you create page URLs, using kebab-case is not just following a convention; it is making a concrete choice that helps your content be understood and found.

Try Our Free Case Converter

Turning a title or a list of names into clean kebab-case — lowercasing and replacing spaces with hyphens — is exactly the kind of repetitive task a tool should handle. Our Case Converter converts text to kebab-case and other styles instantly.

• ✅ Convert titles to clean kebab-case URL slugs
• ✅ Also supports snake_case, camelCase, Title Case and more
• ✅ Runs in your browser — your text stays private

👉 Convert to kebab-case now →

Why kebab-case Is Rare Inside Code

An illuminating question is why kebab-case, despite being so dominant on the web, is almost never used for variable and function names inside most programming languages. The answer is delightfully practical: in most languages, the hyphen is the minus operator. An identifier like user-name would be interpreted by the language as "user minus name" — a subtraction of two variables — rather than a single name. Underscores have no such meaning, which is why snake_case works fine for identifiers while kebab-case does not. This is the core reason the web settled on kebab-case for URLs and CSS (where hyphens are safe and conventional) while code settled on camelCase or snake_case for identifiers (where hyphens would be ambiguous).

This division is a neat example of how conventions are shaped by the technical constraints of their context. URLs needed a separator that was safe and readable in web addresses, and the hyphen fit perfectly while also pleasing search engines. CSS adopted hyphens to match its own lowercase, hyphenated property names. But programming languages needed identifiers that would not collide with arithmetic operators, so they reached for case changes or underscores instead. There are a few exceptions — Lisp-family languages do use hyphens in identifiers because their syntax allows it — but for the mainstream languages most developers use, the rule holds: kebab-case for the web's text-based identifiers, and other styles for code. Understanding this constraint explains the otherwise puzzling fact that the web's favourite naming style is essentially banned from the inside of most programs.

Real-World Examples

kebab-case appears constantly across the web. A blog post titled "The Ultimate Guide to Productivity" naturally becomes the URL slug /the-ultimate-guide-to-productivity — lowercase, hyphenated, descriptive. In CSS, you style components with classes like .site-footer and .call-to-action. In HTML, you attach data with attributes like data-product-id="42", which must be hyphenated. In a web project's file system, you might name files hero-banner.jpg and contact-form.js so they are clean and URL-safe. And a custom web component is defined with a name like <user-card>, where the hyphen is actually required by the standard. Each of these is idiomatic precisely because the web's conventions favour lowercase, hyphenated names, and following them keeps your work consistent with the wider ecosystem.

Crafting Good URL Slugs with kebab-case

Since URL slugs are kebab-case's most consequential use, it is worth covering how to craft them well, because a good slug does more than follow a format — it actively helps your page. The first principle is to keep slugs short and descriptive: include the words that capture what the page is about and omit filler. A title like "The 10 Best Tips for Writing a Great Blog Post in 2024" might become a slug like /best-blog-writing-tips rather than a literal, unwieldy transcription. Shorter slugs are easier to read, share and remember, and they keep the meaningful keywords prominent rather than buried among small connecting words.

The second principle is to drop the stop words — small words like "the," "a," "to," "for" and "in" — where doing so keeps the slug readable, since they add length without adding meaning for search engines or readers. The third is to use only lowercase letters, numbers and hyphens, avoiding spaces, capitals, and special characters that would be percent-encoded into ugly, unreadable sequences. And the fourth is consistency: once a page has a slug and has been indexed and linked, changing it breaks those links and loses accumulated value, so it is worth getting the slug right at publication and then leaving it stable. Following these principles, all expressed naturally through kebab-case, turns the humble URL slug into a small but real contributor to how findable and shareable your content is. A case converter that produces clean kebab-case from a title gives you a solid starting point to refine.

Common Mistakes

1. Using underscores in URLs. Search engines treat hyphens, not underscores, as word separators, so hyphens are preferred for slugs.
2. Putting capital letters or spaces in URLs and file names, which cause encoding issues and case-sensitivity problems.
3. Using camelCase for CSS classes, which goes against the near-universal lowercase-hyphenated convention.
4. Inconsistent slug formatting across a site, mixing hyphens, underscores and cases.
5. Forgetting that custom elements and data attributes require hyphens, which is a functional rule, not just style.

Best Practices

• Use kebab-case for URL slugs — lowercase, hyphenated and descriptive — for readability and SEO.
• Use kebab-case for CSS classes and IDs to match web conventions.
• Use hyphens, never underscores or spaces, in URLs.
• Keep file and folder names lowercase and hyphenated in web projects.
• Be consistent across your whole site, and use a case converter to generate clean slugs.

Frequently Asked Questions

What is kebab-case?

kebab-case is a naming convention that writes multi-word identifiers in all lowercase with hyphens between words, such as user-profile or how-to-guide. It is like snake_case but uses hyphens instead of underscores.

Where is kebab-case used?

It is the standard for URL slugs, CSS class names and IDs, HTML custom data attributes, custom element names and many file names in web projects, because the web favours lowercase, hyphenated, URL-safe naming.

Why are hyphens better than underscores in URLs?

Search engines treat hyphens as word separators but have historically treated underscores as joining characters. So a hyphenated slug like /red-running-shoes is read as three distinct words, which helps both search engines and readers understand the page.

Is kebab-case good for SEO?

Yes. Lowercase, hyphenated, descriptive URL slugs — kebab-case — help search engines understand a page's topic, look trustworthy in results, and avoid encoding problems, making them a long-standing on-page SEO best practice.

What is the difference between kebab-case and snake_case?

They are identical except for the separator: kebab-case uses hyphens (user-profile) and snake_case uses underscores (user_profile). kebab-case dominates URLs and CSS; snake_case dominates Python and databases.

Can I use capital letters in kebab-case?

No. kebab-case is strictly lowercase with hyphens between words. Capital letters in URLs and CSS class names go against convention and can cause case-sensitivity problems.

Conclusion

kebab-case — lowercase words joined by hyphens — is the naming style of the web, the standard for URL slugs, CSS classes, data attributes and file names. It shares its form with snake_case but earns its own niche because hyphens work where underscores and capitals do not, and because search engines read hyphens as the word separators that make a URL's meaning clear. Use kebab-case for your slugs and CSS, always prefer hyphens over underscores in URLs, keep everything lowercase, and stay consistent across your site. It is a small convention with a real payoff in readability and SEO, and a case converter turns any title into a clean slug in an instant. Master it, and you will produce web addresses and class names that are not only conventional but genuinely better — clearer to humans, friendlier to search engines, and free of the encoding and case problems that trip up less careful naming.

👉 Generate clean kebab-case slugs with our free tool →

Related Resources

• Case Converter — convert to kebab-case and other styles
• snake_case Explained — the underscore style
• camelCase vs PascalCase — the capital-letter styles
• Programming Case Conventions — the full picture
• Title Case vs Sentence Case — the editorial cases