Convertidor kebab case: texto a kebab-case online

Qué es kebab-case

kebab-case pone guiones donde irían los espacios y deja todas las letras en minúscula:

My Blog Post Title pasa a my-blog-post-title
backgroundColor pasa a background-color
user_profile_card pasa a user-profile-card

Cómo funciona el convertidor

La herramienta encuentra las palabras de cada línea, las pasa a minúscula y las une con guiones. Las palabras pueden estar separadas por espacios, guiones bajos, puntos o barras, o por mayúsculas, como en camelCase y PascalCase. La puntuación se elimina. Cada línea se convierte por separado, así que puedes pegar una lista de títulos o de nombres de clases y recibir otra lista equivalente.

Texto	Resultado
My First Blog Post!	my-first-blog-post
backgroundColor	background-color
user_profile_card	user-profile-card
ProductListItem	product-list-item
10 Tips for Better Sleep	10-tips-for-better-sleep

Con títulos en español, el convertidor mantiene las tildes y la ñ: “Título De Mi Entrada” pasa a título-de-mi-entrada. Para nombres de clases de CSS eso suele funcionar, pero en las URL las letras con tilde se codifican como %C3%AD y similares, y la dirección queda larga y difícil de compartir.

Dónde se usa kebab-case

URL: example.com/blog/my-first-post
CSS: nombres de clases como .nav-item y propiedades como font-size
HTML: atributos como data-user-id y nombres de elementos personalizados como <user-card>
Nombres de archivos y carpetas: sobre todo en proyectos web
Paquetes de npm: los nombres deben ir en minúsculas, y el guion es el separador habitual
Opciones de la línea de comandos: --dry-run, --no-cache

kebab-case para slugs de URL

Un slug es la parte legible de una dirección web que identifica una página. Los buenos slugs son cortos, van en minúsculas y usan guiones. Pega aquí el título de tu página para tener un punto de partida y luego recórtalo:

Convierte el título: “10 Tips for Better Sleep” pasa a 10-tips-for-better-sleep.
Quita las palabras de relleno si el slug es largo: tips-better-sleep.
Mantén en el slug la palabra clave principal de la página.

Las minúsculas importan porque muchos servidores web tratan /My-Page y /my-page como dos direcciones distintas. Si tus títulos están en español, el generador de slugs es la mejor opción: convierte “á” en “a” y “ñ” en “n” para que el slug quede solo con letras ASCII.

Comparación con otros estilos

Estilo	Ejemplo	¿Sirve en código?
kebab-case	user-first-name	No, el guion significa menos
snake_case	user_first_name	Sí
camelCase	userFirstName	Sí

¿Necesitas otro estilo? Prueba el convertidor snake case o el convertidor camel case.

Convertidor kebab case: preguntas y respuestas

¿Qué es kebab case?

Kebab case (kebab-case) escribe un nombre de varias palabras en minúsculas y con guiones entre ellas, como en main-nav o my-first-post. Las palabras parecen trozos de comida ensartados en un pincho. En inglés también se llama dash case, hyphen case, lisp case o spinal case.

¿Por qué son mejores los guiones que los guiones bajos en las URL?

Google recomienda usar guiones para separar las palabras de una URL porque los trata como separadores de palabras, lo que ayuda a buscadores y personas a leer la dirección. Los guiones bajos pueden interpretarse como si unieran dos palabras en una.

¿Puedo usarlo como generador de slugs para URL?

Sí. Pega el título de una página y el convertidor lo pasa a minúsculas, quita la puntuación y une las palabras con guiones. 'My First Blog Post!' pasa a my-first-blog-post. Las letras con tilde se conservan tal cual, así que en español conviene usar el generador de slugs, que quita las tildes y cambia la ñ por n.

¿Puedo usar kebab-case para nombres de variables?

En la mayoría de los lenguajes, no. JavaScript, Python, Java y muchos otros leen el guion como un signo menos, así que user-name significaría 'user menos name'. Usa camelCase o snake_case en el código y deja kebab-case para URL, CSS, atributos HTML y nombres de archivo.

Convertidor kebab case

Convertir a

Para código