Un placeholder es un marcador de posición: un valor o texto provisional que ocupa el lugar de algo que llegará después. En HTML es el atributo que muestra un ejemplo gris dentro de un campo vacío; en programación, también es el marcador, como {} en un f-string de Python, que se sustituye por un dato real.
Lo has visto miles de veces: ese texto gris dentro de un campo de formulario que dice "ejemplo@correo.com" y desaparece en cuanto empiezas a escribir. Se llama placeholder, y aunque parece un detalle menor, usarlo mal es una de las causas más comunes de formularios confusos y poco accesibles.
Un placeholder es un atributo de HTML que muestra un texto de ejemplo dentro de un campo, como pista de lo que se espera que escribas. Sirve de guía, no de etiqueta — y esa distinción, como veremos, marca la diferencia entre un formulario que ayuda y uno que frustra. Vamos a verlo todo: qué es, cómo se escribe correctamente, cuándo usarlo y cuándo no.
Como te podrás imaginar, en este mundo existen un sinfín de términos que en principio suenan complejos y un claro ejemplo de esto es Placeholder.
¿Qué es? ¿Para qué sirve? ¿Por qué se utiliza en la programación? Y aún más importante… ¿Qué le brindará al resultado final de tu sitio web?
Si te interesa conocer todos estos detalles, nosotros hemos hecho la tarea por ti y te traemos toda la información que te interesa conocer.
Qué es el atributo placeholder
El término se traduce como "marcador de posición". Es un atributo de HTML que se usa en los campos de formulario —sobre todo en los de texto— para mostrar una sugerencia de lo que se espera introducir, antes incluso de que el usuario empiece a escribir.
El texto del placeholder aparece por defecto dentro del campo cuando está vacío, normalmente en un gris tenue, y se desvanece en cuanto el usuario escribe (ha cumplido su función de guía). No aparece al pasar el cursor por encima ni funciona como un tooltip: es simplemente el contenido de ejemplo del campo vacío.
Si alguna vez rellenaste un formulario y viste un "Escribe tu correo aquí" dentro de la casilla, eso era un placeholder en acción.
Qué significa placeholder en español y en otros contextos
En español, placeholder se traduce como «marcador de posición»: algo provisional que reserva un sitio hasta que llegue el dato definitivo. A veces se escribe «place holder», con espacio. Lo que cambia es el contexto: formulario, código o agenda.
Placeholder en programación
En código, un placeholder es un marcador dentro de una cadena, una consulta o una plantilla que el programa sustituye por un valor real al ejecutarse. Python lo hace con las llaves de los f-strings y de str.format(), que la documentación oficial de Python 3.15 explica en su tutorial de entrada y salida.
Placeholder en una reunión o en un calendario
En el trabajo, un placeholder en una reunión es un hueco que se reserva en el calendario antes de tener cerrados los detalles. ClickUp (artículo del 25 de abril de 2026) lo describe como una agenda provisional adjunta a un hueco de calendario reservado.
¿Para qué sirve?
Su función es guiar al usuario mostrándole qué tipo de dato y en qué formato se espera en cada campo. La etiqueta (label) dice qué pedir ("Correo electrónico"); el placeholder da un ejemplo de cómo escribirlo ("nombre@ejemplo.com").
Es especialmente útil para:
Mostrar el formato esperado: un teléfono como
+34 600 000 000, una fecha comoDD/MM/AAAA.Dar un ejemplo concreto que reduce errores de entrada.
Aclarar campos ambiguos sin recargar la interfaz con texto.
En resumen: el placeholder se anticipa a la duda del usuario. Bien usado, reduce los datos mal introducidos; mal usado, los provoca.
Cómo se escribe (el código correcto)
En HTML el código es sencillo. Se añade el atributo placeholder dentro de la etiqueta <input>, con su texto entre comillas rectas:
Fíjate en dos cosas que suelen fallar:
Comillas rectas (
"), no curvas (“ ”). Las comillas tipográficas rompen el HTML. Es un error clásico al copiar y pegar desde un procesador de texto.Siempre acompañado de una
<label>. El placeholder no va solo (ver la sección de accesibilidad).
Y si quieres controlar su aspecto, usa el pseudo-elemento CSS ::placeholder:
Aspectos importantes al utilizar el placeholder en tu diseño web
A la hora de trabajar con un Placeholder, reconocer cuál es el código a utilizar y cómo configurarlo no es lo único importante.
También resulta fundamental entender cuáles son los aspectos a tener en consideración durante su creación para asegurarte de que les resulte útil a todos los usuarios por igual.
Recuerda que su objetivo principal es mejorar la experiencia de los usuarios y lograr que las interfaces de registros sean mucho más intuitivas.
Por lo tanto, si estás por trabajar en la creación de un Placeholder, es necesario tener en cuenta los siguientes puntos:
La instrucción tiene que ser breve
Primero que nada, la instrucción que indique tu Placeholder tiene que ser breve y clara. Resulta idea ir directo al grano, porque tu intención es ayudar al usuario, no confundirlo más de la cuenta.
Así que, piensa en instrucciones sencillas para cada dato a rellenar en tu formulario web que le permitan a tus visitantes reconocer con facilidad qué esperas que escriban en cada campo.
Además, olvídate de utilizar indicaciones muy largas. Los espacios en los campos de textos suelen ser pequeños y tendrás que adaptarte a ellos.
No lo utilices para sustituir las etiquetas
Hay quienes piensan que los placeholders pueden sustituir las etiquetas en un formulario y esto no puede ser así.
Una etiqueta es esa que se encontrará sobre cada recaudo de forma breve cuál es el dato a introducir.
En cambio, el Placeholder es una indicación extra o ejemplo de cómo necesita estar escrita la información.
Por ende, no puedes utilizar una para sustituir otra. Los formularios pueden funcionar sin los placeholders, pero no podrían funcionar sin las etiquetas.
Específica el formato a utilizar
Si el formulario con el que trabajas solicitará información muy específica, entonces sé claro con lo que esperas obtener.
Supongamos que necesitas que la persona adjunte una imagen en el formulario. No dejes al aire el formato en el que tiene que cargarse, porque entonces el usuario puede subirla en cualquiera: JPG, PNG, WEBP o cualquier otra.
Si quieres facilitar la recepción y el procesamiento de los datos obtenidos en los formularios, específica en qué formato necesitas cada dato.
Al volver al ejemplo dado, puedes utilizar tu Placeholder para decirle a tus usuarios que solo se aceptan imágenes en JPG o hasta un tamaño en específico.
Lo mismo puedes hacer si solicitas los números telefónicos de tus visitantes, puedes dejar un ejemplo del orden en el que se escriben los números.
Utiliza un diseño visible
Sí, es cierto, el Placeholder no se quedará en el campo para siempre y desaparecerá en cuanto el usuario comience a escribir, pero eso no quiere decir que tienes que ignorar los detalles de su diseño.
Todo lo contrario, precisamente porque se desvanecerá, necesita tener un diseño visible para que todos puedan leer lo que dice antes de que se vaya.
Para asegurarte de esto, configura bien el contraste del color de tu fuente y verifica que resulte legible para todos tus usuarios web por igual.
Asegura la compatibilidad con todos los entornos digitales
Otro punto muy importante (y quizás uno de los más importantes de todos), es tomar en cuenta la accesibilidad que tendrán tus visitantes.
Ten en cuenta que no todos van a acceder desde el mismo dispositivo (ordenador o móvil), ni desde el mismo navegador siquiera.
Por lo tanto, tu placeholder tiene que estar disponible para cualquier entorno digital y ser visible en cualquier dispositivo.
Todo esto lo puedes controlar al realizar pruebas finales para la experiencia del usuario y verificar que no exista ningún limitante.
Placeholder vs label vs texto de ayuda
Aquí está la confusión que arruina más formularios. No son lo mismo y no se sustituyen entre sí:
Elemento | Qué es | ¿Desaparece? | ¿Obligatorio? |
|---|---|---|---|
Label (etiqueta) | El nombre del campo ("Correo electrónico") | No, siempre visible | Sí — es imprescindible |
Placeholder | Un ejemplo dentro del campo ("nombre@ejemplo.com") | Sí, al escribir | No, es opcional |
Texto de ayuda | Instrucción extra bajo el campo ("Usaremos esto para enviarte la factura") | No | Opcional |
La regla de oro: un formulario puede funcionar sin placeholders, pero nunca sin labels.
Accesibilidad: los errores que hunden tu formulario
Aquí es donde la mayoría de tutoriales se quedan cortos, y donde de verdad se juega la calidad de un formulario. En 2026 el estándar vigente es WCAG 2.2, y hay tres reglas que no puedes saltarte:
1. El placeholder NUNCA sustituye a la etiqueta. Es el error más grave. Si eliminas la label y dejas solo el placeholder, en cuanto el usuario empieza a escribir pierde la referencia de qué se pedía. Para quien usa lectores de pantalla, un campo sin label es directamente inaccesible.
2. Cuida el contraste. WCAG exige un contraste mínimo de 4,5:1 entre el texto y el fondo. El problema: el gris tenue que los navegadores aplican por defecto al placeholder suele incumplir ese mínimo, lo que lo hace ilegible para personas con baja visión. Ajústalo tú con CSS.
3. No metas información esencial en el placeholder. Como desaparece al escribir, cualquier instrucción crítica que solo esté ahí se pierde. Las instrucciones importantes van en la label o en un texto de ayuda persistente.
La alternativa moderna que resuelve varios de estos problemas son las floating labels (etiquetas flotantes): la etiqueta empieza dentro del campo como si fuera un placeholder y "flota" hacia arriba al escribir, de modo que nunca desaparece del todo. Combinan la limpieza visual del placeholder con la persistencia de la label.
Qué dicen hoy MDN y el W3C sobre el placeholder
A 16 de octubre de 2026, la documentación de MDN y las guías del W3C coinciden: el placeholder solo debe mostrar un ejemplo del dato que se espera, nunca hacer de etiqueta. No lo anuncian los lectores de pantalla por defecto, desaparece al escribir y su texto está sujeto al contraste de WCAG 2.2.
Etiqueta: MDN (página modificada el 14 de octubre de 2026) pide usar el placeholder solo para mostrar un ejemplo y no como sustituto de
<label>. Según MDN, los lectores de pantalla no lo anuncian por defecto, pero sí la label. Fuente: MDN, atributo placeholder.Contraste: el criterio 1.4.3 de WCAG 2.2 (4,5:1 para texto normal y 3:1 para texto grande) se aplica al texto de la página, placeholder incluido, según la guía Understanding del W3C. WCAG 2.2 es Recomendación del W3C desde el 12 de diciembre de 2024. El tutorial de formularios del W3C (actualizado el 13 de mayo de 2024) propone
#767676como gris para el placeholder sobre fondo blanco.Ni demasiado claro ni demasiado oscuro: MDN explica que el placeholder tiene menos contraste a propósito, para que no parezca un dato ya escrito. Según MDN (página de
::placeholder, modificada el 17 de abril de 2026), en el modo de alto contraste de Windows se ve igual que el texto escrito.Floating labels: Nielsen Norman Group (artículo de 2014, revisado en 2018) reconoce que mejoran la experiencia frente a usar la etiqueta como placeholder, pero mantienen inconvenientes; su mejor solución son etiquetas claras y visibles fuera del campo vacío.
Tabla de decisión: qué poner en cada campo
Un campo puede llevar tres textos y ninguno sustituye a los otros. La tabla los compara en accesibilidad:
Criterio | Label | Placeholder | Texto de ayuda |
|---|---|---|---|
¿Sigue visible mientras escribes? | Sí | No, desaparece | Sí |
¿Lo anuncia un lector de pantalla? | Sí, es el nombre del campo | No por defecto (MDN) | Sí, si lo vinculas con |
¿Sirve como nombre del campo? | Sí | No | No |
Contraste mínimo (WCAG 1.4.3) | 4,5:1 | 4,5:1, sin pasarse | 4,5:1 |
¿Qué va dentro? | El nombre del dato | Un ejemplo de formato | Una instrucción que no puede perderse |
Antes de añadir un placeholder, comprueba que el campo ya tiene una label visible y que el ejemplo ayuda a escribir el dato. Si hay una instrucción que se necesita mientras se escribe, va en el texto de ayuda. Para repasar los elementos de un formulario, tienes la guía de etiquetas HTML5.
Pros y contras del placeholder
Ventajas | Inconvenientes |
|---|---|
Interfaz más limpia y ordenada | El espacio puede quedarse corto para instrucciones largas |
Guía al usuario con un ejemplo | Se pierde el contexto al desaparecer |
Reduce datos mal introducidos | Problemas de accesibilidad si se usa mal (contraste, sin label) |
Mejora la experiencia si se usa como apoyo | No debe contener información esencial |
Alternativas al placeholder
Si prefieres que la instrucción esté siempre visible, tienes opciones mejores según el caso:
Etiquetas descriptivas: una label clara (y, si hace falta, un poco más larga) que no dependa del placeholder para entenderse.
Floating labels: la solución más equilibrada, como vimos arriba.
Formularios con autorellenado o desplegables: para datos con opciones cerradas (país, categoría), un
<select>o botones evitan errores de escritura.Instrucciones contextuales: un texto de ayuda persistente bajo el campo, o un enlace a un tutorial cuando el dato es complejo (por ejemplo, en qué formato adjuntar una imagen).
"Placeholder" fuera de HTML: otros usos en programación
El término no es exclusivo de los formularios. Si buscabas "placeholder en programación" en un sentido más amplio, estos son los otros usos habituales:
Placeholders de formato (format strings): los marcadores que se sustituyen por valores en tiempo de ejecución, como
%sy%den C o Python clásico, o{}en los f-strings de Python (f"Hola, {nombre}").Consultas parametrizadas: los
?o$1en SQL que evitan inyección al sustituir valores de forma segura.Plantillas e internacionalización (i18n): marcadores como
{{nombre}}en motores de plantillas, o%1$sen cadenas de traducción.Plantillas de prompts para IA: herramientas como Langfuse usan la sintaxis
{{variable}}en los prompts y rellenan cada valor al compilarlos.Skeleton screens (placeholders de UI): esos bloques grises animados que ocupan el lugar del contenido mientras una web carga.
Contenido de relleno: imágenes de ejemplo o el clásico lorem ipsum que "reserva el sitio" del contenido real en un diseño.
Todos comparten la misma idea: reservar el lugar de algo que llegará después. El placeholder de HTML es solo la versión más visible para el usuario final.
Los placeholders de las consultas SQL tienen además una función de seguridad: OWASP recomienda las consultas parametrizadas, que usan marcadores como ?, como mejor prevención de la inyección SQL en su guía de OWASP. Lo explicamos en nuestra guía sobre ataques de SQL injection. Y si empiezas, mira qué lenguajes de programación existen, o cómo se reparten frontend y backend.
En conclusión
El Placeholder es una pieza básica del desarrollo web y su valor depende del uso: como ejemplo de apoyo junto a una label visible ayuda; como sustituto de la label, perjudica.
Su función de anteponerse a lo que los usuarios pueden ingresar en un formulario es de gran ayuda para que la experiencia sea más amena para todos.
Así que, si eres programador o si le has encargado a alguien la creación de un nuevo sitio web, toma en consideración la posibilidad de trabajar con los placeholders.
Si te llama la atención todos estos temas y quieres aprender más sobre ellos, date una vuelta por nuestro blog, allí encontrarás muchos otros artículos con temática tecnológica.
FAQs sobre el placeholder
¿Qué es un placeholder?
Un placeholder es un marcador de posición: un texto o valor provisional que ocupa el sitio de algo que llegará después. En un formulario HTML es el ejemplo gris que se ve dentro del campo vacío; en código es el marcador, como {} o ?, que el programa sustituye por un dato real al ejecutarse.
¿Qué significa placeholder en español?
Se traduce como «marcador de posición»: un elemento provisional que reserva un lugar hasta que llegue el dato definitivo. Según el contexto es un texto de ejemplo en un formulario, un marcador en el código o un hueco reservado en un calendario.
¿Qué es un placeholder en una reunión?
Es un hueco que se reserva en el calendario antes de cerrar la hora definitiva, los asistentes o el orden del día. La reunión se bloquea como «placeholder» para reservar esa franja y se confirma o se cancela más adelante.
¿Qué es placeholder en HTML?
Es un atributo de campos como <input> o <textarea> que muestra un ejemplo de lo que se espera escribir, por ejemplo placeholder="nombre@ejemplo.com". Desaparece al escribir, no sustituye a la label y, según MDN, los lectores de pantalla no lo anuncian por defecto.
¿El placeholder puede sustituir a la etiqueta (label)?
No, y es el error más común. La label es obligatoria porque permanece visible y es lo que leen los lectores de pantalla; el placeholder desaparece al escribir. Un formulario accesible siempre lleva label, y el placeholder solo como apoyo opcional.
¿Por qué mi placeholder se ve muy claro y cuesta leerlo?
Porque el gris por defecto de los navegadores suele incumplir el contraste mínimo de WCAG (4,5:1). Ajústalo con CSS mediante el pseudo-elemento ::placeholder y usa un gris más oscuro para que sea legible en cualquier dispositivo.
¿Cuál es la diferencia entre placeholder y texto de ayuda?
El placeholder vive dentro del campo y desaparece al escribir; el texto de ayuda se coloca (normalmente) debajo del campo y permanece visible. Para instrucciones importantes usa texto de ayuda o la propia label, nunca solo el placeholder.
¿Qué significa placeholder en programación además de en HTML?
En sentido amplio, un placeholder es un marcador que reserva el lugar de un valor que llegará después: los %s/{} de las cadenas de formato, los ?/$1 de las consultas SQL, los {{variable}} de las plantillas o los "skeleton screens" de carga. Todos comparten la idea de "aquí irá algo".
¿Es obligatorio usar placeholders en un formulario?
No. Son totalmente opcionales y un formulario funciona perfectamente sin ellos. Lo obligatorio son las labels. Usa placeholders solo cuando aporten un ejemplo útil (como el formato de un teléfono o un correo), no por rellenar.
