What Is kebab-case? Uses, Rules, and SEO Benefits | TitleCasePro

Quick answer: kebab-case writes multi-word identifiers as lowercase words separated by hyphens — like user-profile or main-nav. It is the standard for URL slugs, CSS class names, HTML attributes, and npm package names, and it is Google’s recommended format for URLs.

kebab-case (also called hyphen-case or spinal-case) is a naming convention where words are written in lowercase and joined with hyphens. The name comes from the visual image of words skewered on a kebab stick: words-on-a-skewer.

Examples:

• user-profile
• background-color
• main-navigation
• blog-post-title
• data-user-id

Why You Can’t Use kebab-case in Code Variables

Unlike camelCase or snake_case, kebab-case cannot be used for variable or function names in most programming languages. The hyphen is interpreted as the subtraction operator:

let user-name = "Alice";  // ❌ parsed as: user minus name
let userName = "Alice";   // ✅ camelCase works

Key rule: kebab-case is for user-visible and markup contexts — URLs, CSS, HTML — not for code identifiers. The hyphen breaks variable parsing in JavaScript, Python, and most other languages.

Where kebab-case Is the Standard

Context	Example	Why
URL slugs	/blog/what-is-kebab-case	Google’s recommended format
CSS class names	.btn-primary, .user-card	The de facto CSS convention
HTML data attributes	data-user-id, aria-label	Required by HTML spec
npm package names	react-dom, eslint-plugin-react	npm naming rules
CLI flags	--dry-run, --max-retries	Standard CLI convention
Web Component tags	<my-element>	Spec requires a hyphen
File names (web)	user-service.ts, 404-not-found.html	Common in web projects

The SEO Case for kebab-case URLs

This is the most important reason writers and marketers care about kebab-case. Google officially recommends hyphens in URLs, not underscores.

Google’s rule: Google’s Search Central documentation explicitly recommends using hyphens to separate words in URLs and advises against underscores. The reason is tokenization.

Here’s why it matters:

• https://example.com/buy-running-shoes → Google tokenizes this as three separate words: buy, running, shoes. Each can match a search query.
• https://example.com/buy_running_shoes → Google treats buy_running_shoes as one single token that only matches that exact string.

Using kebab-case (hyphens) in your URLs makes each word individually indexable, which directly helps your SEO.

kebab-case vs. Other Conventions

Convention	Example	Used in
kebab-case	user-name	URLs, CSS, HTML, npm
snake_case	user_name	Python, Ruby, SQL
camelCase	userName	JS/TS variables, functions
PascalCase	UserName	Classes, React components
CONSTANT_CASE	USER_NAME	Constants, env variables

How to Create a kebab-case URL Slug

1. Take your title: “How to Center a Div in CSS”
2. Lowercase everything: “how to center a div in css”
3. Replace spaces with hyphens: how-to-center-a-div-in-css
4. Optionally drop stop words (a, the, of): how-to-center-div-in-css
5. Remove special characters (apostrophes, commas, etc.)

⚠️ Avoid: double hyphens (how--to), trailing hyphens (how-to-), and uppercase letters (How-To). Keep slugs clean, lowercase, and single-hyphenated.

Converting Text to kebab-case

The case converter converts any phrase to kebab-case instantly. Paste “How to Center a Div” and it produces how-to-center-a-div — ready to drop into a URL or CSS class. It also shows camelCase, PascalCase, snake_case, and every other format simultaneously.

Developer Naming Conventions

• What Is camelCase?
• What Is PascalCase?
• What Is snake_case in Programming?
• Programming Naming Conventions: The Complete Guide