Plantilla de enlaces para la bio de Instagram en HTML

Plantilla de enlaces para la bio de Instagram en HTML y CSS. Una página ligera, con destinos claros y sin servicios adicionales.

Una página de enlaces que no obliga a adivinar

Esta plantilla enlaces bio HTML reúne los destinos principales de un perfil en una página que puedes alojar en tu propio sitio. La estructura prioriza una presentación breve y tres acciones claras. Cada enlace incluye una descripción para explicar qué encontrará la persona. El objetivo no es acumular todos los perfiles que existen, sino ayudar a elegir el siguiente paso después de llegar desde una publicación o una biografía de redes sociales.

Elegir el primer enlace según la intención

El primer destino tiene un tratamiento visual más destacado. Úsalo para la acción que tenga sentido en ese momento: ver un portfolio, consultar un recurso o conocer una actividad. No cambies su función a diario sin revisar las publicaciones que apuntan a él. Si una campaña promete una descarga concreta, la persona debería encontrarla fácilmente al llegar. Una lista larga y desordenada traslada al visitante el trabajo de interpretar tus prioridades.

Código completo para probar en tu navegador

Copia este documento en un archivo index.html, guarda los cambios y ábrelo en el navegador. Los nombres y datos de demostración se deben sustituir antes de publicarlo.

<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mara — Un pequeño universo creativo</title>
<style>

*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Arial,Helvetica,sans-serif;line-height:1.65}button,input,select,textarea{font:inherit}button,a,input{touch-action:manipulation}a{color:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid currentColor;outline-offset:5px}img,svg{max-width:100%}button{color:inherit}.wrap{width:min(1180px,calc(100% - 48px));margin:auto}.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 0}.links{display:flex;gap:24px;flex-wrap:wrap}.links a{text-decoration:none;font-size:.88rem}.brand{font-weight:900;letter-spacing:-.06em;font-size:1.65rem;text-decoration:none}.eyebrow{font-size:.75rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase}.button{display:inline-flex;align-items:center;justify-content:center;gap:20px;padding:14px 23px;border:1px solid currentColor;text-decoration:none;font-weight:700;border-radius:999px;transition:transform .2s,background .2s}.button:hover{transform:translateY(-3px)}h1,h2,h3,p{margin-top:0}h1,h2{line-height:1.04;letter-spacing:-.055em}h1{font-size:clamp(3rem,7.5vw,6.5rem)}h2{font-size:clamp(2rem,4vw,3.7rem)}h3{line-height:1.2}p{max-width:64ch}.section{padding:88px 0}footer{padding:32px 0;font-size:.8rem}.demo{font-size:.72rem;opacity:.75}details{border-top:1px solid #8885;padding:18px 0}summary{cursor:pointer;font-weight:700}summary+p{margin:16px 0 0}dialog{border:0;border-radius:20px;width:min(760px,calc(100% - 32px));padding:24px}dialog::backdrop{background:#000b}.close{float:right;border:1px solid #8885;border-radius:50%;background:transparent;width:40px;height:40px}section[id]{scroll-margin-top:24px}[hidden]{display:none!important}.reveal{animation:arrive .6s both}@keyframes arrive{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@media(max-width:700px){.wrap{width:calc(100% - 32px)}.nav{align-items:flex-start}.links{gap:14px}.section{padding:56px 0}h1{font-size:clamp(2.6rem,13vw,4.5rem)}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}

body{background:#f2b9c4;color:#3d1725;background-image:radial-gradient(#b74c6518 1px,transparent 1px);background-size:16px 16px}.bio-shell{width:min(660px,calc(100% - 32px));margin:35px auto;padding:35px;background:#fffaf2;border:1px solid #3d172520;border-radius:30px;box-shadow:0 25px 60px #69273d15}.bio-top{display:flex;justify-content:space-between;align-items:center}.bio-top>span:last-child{font-size:1.5rem;color:#ad264c}.bio-top .eyebrow{font-size:.55rem}.bio-header{text-align:center;padding:35px 0 25px}.avatar{position:relative;background:#ad264c;border-radius:50%;width:105px;height:105px;margin:0 auto 25px;display:grid;place-items:center;transform:rotate(-7deg)}.avatar span{font:3.5rem Georgia;color:#fffaf2}.avatar i{position:absolute;right:-6px;bottom:-8px;font-size:2.7rem;color:#e4b532;font-style:normal}.bio-header .eyebrow{font-size:.57rem;color:#ad264c}.bio-header h1{font:clamp(2.2rem,7vw,3.2rem)/1.05 Georgia;letter-spacing:-.05em;margin:20px 0}.bio-header em{color:#ad264c;font-weight:400}.bio-header>p:last-child{font-size:.85rem;max-width:350px;margin:0 auto;color:#826770}.bio-links{display:grid;gap:12px}.bio-links>a{display:flex;justify-content:space-between;gap:15px;align-items:center;padding:20px 24px;background:#f4e8e6;border:1px solid transparent;border-radius:18px;text-decoration:none;transition:transform .2s,border-color .2s}.bio-links>a:hover{transform:translateX(4px);border-color:#ad264c}.bio-links b,.bio-links small{display:block}.bio-links b{font-size:.95rem}.bio-links small{font-size:.68rem;margin-top:5px;color:#826770}.bio-links i{font-style:normal;font-size:1.7rem}.bio-links>a.featured{background:#ad264c;color:#fffaf2}.featured small{font-size:.5rem!important;letter-spacing:.15em;color:#f7c2ce!important;margin:0 0 10px!important}.bio-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:28px}.mini-card{position:relative;border-radius:18px;padding:22px;overflow:hidden}.pink{background:#f2b9c4}.yellow{background:#efe1a6}.card-number{font-size:.5rem;letter-spacing:.12em;font-weight:bold}.mini-card h2{font:1.75rem/1.05 Georgia;margin:20px 0 12px;letter-spacing:-.04em}.mini-card p{font-size:.72rem;line-height:1.6;margin:0;color:#6c4c55}.graphic{display:flex;margin-top:25px;gap:0}.graphic i{width:40px;height:40px;border-radius:50%;background:#ad264c}.graphic i:nth-child(2){border-radius:0 0 50% 50%;background:#fffaf2}.graphic i:nth-child(3){border-radius:50% 0 0 0;background:#3d1725}.spark{display:block;font-size:4rem;line-height:1;margin-top:20px;color:#ad264c}.resource{margin-top:35px;padding:28px 0;border-top:1px solid #3d172530}.resource h2{font:2.1rem/1.05 Georgia}.resource p{font-size:.8rem;color:#826770}.bio-contact{background:#3d1725;color:#fffaf2;padding:28px;border-radius:18px;position:relative}.bio-contact h2{font:2.3rem/1 Georgia;margin-bottom:18px}.bio-contact em{color:#f2b9c4}.bio-contact p{font-size:.75rem;max-width:75%;margin:0;color:#e7cbd4}.bio-contact>span{position:absolute;right:24px;bottom:25px;font-size:3rem}.bio-shell footer{text-align:center;color:#826770;padding:25px 0 0}.bio-shell footer p{font-size:.65rem;margin:0}.bio-shell footer small{font-size:.58rem}@media(max-width:500px){.bio-shell{margin:16px auto;padding:24px;border-radius:24px}.bio-links>a{padding:18px}.mini-card{padding:17px}.mini-card h2{font-size:1.45rem}.mini-card p{font-size:.68rem}.graphic i{width:30px;height:30px}.bio-contact h2{font-size:2rem}}

</style>
</head>
<body>

<main class="bio-shell reveal"><div class="bio-top"><span class="eyebrow">Un pequeño universo creativo</span><span aria-hidden="true">✳</span></div><header class="bio-header"><div class="avatar" aria-hidden="true"><span>m.</span><i>✦</i></div><p class="eyebrow">Diseño · Ideas · Cosas bonitas</p><h1>Hola, soy Mara.<br><em>Qué bueno verte.</em></h1><p>Hago que las buenas ideas encuentren su propia forma de verse y contarse.</p></header>
<nav class="bio-links" aria-label="Enlaces del perfil"><a class="featured" href="#trabajo"><span><small>EMPIEZA POR AQUÍ</small><b>Mira lo que estoy creando.</b></span><i aria-hidden="true">↗</i></a><a href="#servicios"><span><b>Démosle forma a tu marca</b><small>Servicios y colaboraciones</small></span><i aria-hidden="true">↗</i></a><a href="#recursos"><span><b>Un poco de inspiración</b><small>Recursos que puedes compartir</small></span><i aria-hidden="true">↗</i></a><a href="#contacto"><span><b>¿Creamos algo?</b><small>Contacto y próximas ideas</small></span><i aria-hidden="true">↗</i></a></nav>
<div class="bio-grid"><section id="trabajo" class="mini-card pink"><span class="card-number">01 / TRABAJO</span><div class="graphic" aria-hidden="true"><i></i><i></i><i></i></div><h2>Ideas que<br>se ven.</h2><p>Añade tus proyectos y sus enlaces reales.</p></section><section id="servicios" class="mini-card yellow"><span class="card-number">02 / CONTIGO</span><span class="spark" aria-hidden="true">✳</span><h2>Marcas con<br>algo que decir.</h2><p>Identidad, editorial y comunicación. Adapta estos servicios a tu actividad.</p></section></div>
<section id="recursos" class="resource"><p class="eyebrow">Guarda lo que te sirva</p><h2>La creatividad<br>también se comparte.</h2><p>Introduce aquí un recurso propio o un enlace real que quieras destacar.</p></section><section id="contacto" class="bio-contact"><h2>Hablemos de<br><em>lo próximo.</em></h2><p>Configura tu correo profesional o canal de contacto.</p><span>→</span></section><footer><p>Hecho con intención. Y un poquito de curiosidad.</p><small>Perfil de demostración · Sin recogida de datos.</small></footer></main>

</body>
</html>

Configurar destinos reales

El código utiliza enlaces internos a secciones del ejemplo para que puedas probar la navegación sin enviar a sitios desconocidos. Antes de publicar, decide si mantendrás esos apartados o si cada tarjeta dirigirá a una página real. Sustituye el atributo href y comprueba el destino completo. Evita dejar un símbolo de almohadilla como enlace aparente a una tienda o un formulario. El texto debe coincidir con la acción: Contactar por correo y Ver servicios describen recorridos diferentes.

Una identidad visual ligera

El avatar del ejemplo usa iniciales y no requiere un archivo externo. Puedes cambiarlo por una fotografía o un símbolo propio con dimensiones definidas. La paleta se modifica desde el CSS, pero conviene conservar un contraste suficiente en el enlace principal y en sus descripciones. No añadas una imagen de fondo que compita con las acciones. En una página visitada principalmente desde el móvil, la claridad de cada destino suele aportar más que una composición recargada.

Texto que explica el beneficio de abrir un enlace

Portfolio es una etiqueta válida, aunque puede resultar más útil acompañarla de una pista sobre los proyectos disponibles. La segunda línea de cada tarjeta permite añadir ese contexto sin crear un párrafo largo. Mantén las descripciones breves y distintas. No repitas Haz clic aquí en todos los destinos. Si un enlace descarga un documento o abre un servicio externo, indícalo de forma comprensible para que el usuario decida con información suficiente.

Privacidad y medición sin complicaciones innecesarias

La versión inicial no incorpora analítica, formularios ni recursos de terceros. Si más adelante añades medición, revisa qué información recoge y cómo debes comunicarlo según tu contexto. No incluyas identificadores personales dentro de enlaces de campaña. Para valorar la utilidad de la página, también puedes observar consultas recibidas y destinos que dejan de ser relevantes. Medir todo no mejora automáticamente la experiencia; primero necesitas una pregunta concreta que quieras resolver.

Actualizar sin romper recorridos anteriores

Si cambias una promoción, comprueba las publicaciones antiguas que siguen enviando tráfico a la bio. Puedes mantener un recurso anterior en una posición secundaria o explicar dónde se encuentra ahora. Revisa también enlaces a productos agotados, eventos terminados y formularios cerrados. Una página tan breve debe poder mantenerse en pocos minutos. Guarda una lista de sus destinos para revisarlos cuando cambie tu oferta en lugar de esperar a que alguien avise de un enlace roto.

Probarla en el navegador de una aplicación

Además del navegador habitual, abre la página desde el entorno donde esperas recibir visitas. Los navegadores integrados de redes sociales pueden presentar un espacio visible diferente y manejar algunos enlaces de otra forma. Comprueba que las tarjetas se pulsan con comodidad, que el texto no se recorta y que el foco se distingue con teclado. Aumenta el tamaño del texto y revisa nombres largos. Antes de terminar, elimina los avisos de demostración y confirma todos los datos de contacto.

Destinos accesibles y previsibles

Cada tarjeta debería seguir siendo comprensible si se lee fuera de su contexto inmediato. Evita una colección de enlaces llamados Más información sin distinguir a qué información conducen. Si un destino requiere cuenta, descarga un archivo o abre una conversación, dilo cuando ayude a decidir. No hagas que toda la página sea una superficie de clic. Deja espacios entre tarjetas y conserva enlaces normales que permitan copiar la dirección o abrirla mediante las opciones del navegador. La familiaridad de esos comportamientos reduce errores en una pantalla pequeña.

Un dominio propio y sus rutas

Al alojar la página en tu sitio, elige una ruta breve que puedas mantener. Si más adelante reorganizas el contenido, conserva una redirección apropiada desde la dirección que ya compartiste. No cambies el enlace de la bio cada vez que actualizas una tarjeta si no es necesario. Revisa también el título del documento y su descripción para que la página se reconozca al compartirla. La plantilla incluye una estructura visual, pero esos datos del documento forman parte de cómo aparece fuera de su propia pantalla.

Qué eliminar cuando la página crece demasiado

Si cada tarjeta necesita varias explicaciones y subsecciones, quizá estás construyendo un sitio completo dentro de una página de enlaces. Mantén aquí la orientación inicial y lleva el detalle a destinos específicos. Revisa qué acciones siguen vigentes y retira las que ya no ayudan. Una jerarquía de tres o cuatro opciones claras puede funcionar mejor que quince botones con el mismo peso. No reduzcas la tipografía para hacer caber más decisiones: reorganiza la información y conserva un tamaño cómodo para leer desde móvil.

Una última prueba de prioridades

Abre la página y observa qué acción destaca antes de desplazarte. Después comprueba si coincide con el motivo por el que alguien llega desde tu perfil. Si todas las tarjetas compiten con colores y tamaños diferentes, reduce variaciones. El primer enlace puede tener prioridad sin convertir los demás en texto difícil de leer. Pide a otra persona que explique qué ofrece cada destino antes de pulsarlo. Si no puede, mejora la etiqueta o la descripción. La página estará mejor resuelta cuando permita elegir con rapidez y confianza, aunque su diseño utilice pocos elementos y una sola columna.

Guías relacionadas para seguir practicando

Puedes ampliar esta práctica con Crear enlaces con destinos claros y Añadir un favicon.