La Etiqueta BASE en HTML nos permite acortar el código de nuestros atributos SRC cuando todos empiezan con la misma dirección. Te lo explico mejor con un ejemplo:

🎓 Ejemplo

Imagina que tienes varias imágenes en tu página web, y que todas las llamas desde una misma dirección ya sea local o remota:

<img src="https://images.pexels.com/photos/6802983/pexels-photo-6802983.jpeg?cs=srgb&dl=pexels-vlada-karpovich-6802983.jpg&fm=jpg" alt="">
<img src="https://images.pexels.com/photos/7593822/pexels-photo-7593822.jpeg?cs=srgb&dl=pexels-ahmad-no-more-7593822.jpg&fm=jpg" alt="">
<img src="https://images.pexels.com/photos/9892384/pexels-photo-9892384.jpeg?cs=srgb&dl=pexels-marek-kupiec-9892384.jpg&fm=jpg" alt="">

Si te fijas en el código anterior, todas las direcciones provienen de la dirección: https://images.pexels.com/photos/

Podemos reducir el código agregando esta dirección a la etiqueta base de las siguiente forma:

<base href="https://images.pexels.com/photos/">

🙌 Resultado:

De esta manera, podemos suprimir esta parte de la dirección de las imágenes quedando así:

<img src="6802983/pexels-photo-6802983.jpeg?cs=srgb&dl=pexels-vlada-karpovich-6802983.jpg&fm=jpg" alt="">
<img src="7593822/pexels-photo-7593822.jpeg?cs=srgb&dl=pexels-ahmad-no-more-7593822.jpg&fm=jpg" alt="">
<img src="9892384/pexels-photo-9892384.jpeg?cs=srgb&dl=pexels-marek-kupiec-9892384.jpg&fm=jpg" alt="">

👉 Importante

Hay que tener en cuenta que la etiqueta BASE va dentro de la etiqueta HEAD y que solamente puedes tener una etiqueta BASE por documento HTML.

¿Te gustaría ver esta explicación en video? mira aquí:

👇👇👇

Acerca de esta serie…

Esta es una serie de artículos donde iré explicando cada una de las etiquetas que contiene HTML. Si quieres ver la siguiente etiqueta te recomiendo hacer clic aquí. Y si no tienes claro que es HTML aún te recomiendo ver este blog aquí.

Sígueme en mis redes sociales:

👉‍‍ YouTube
👉‍‍ Twitter
👉‍‍ GitHub
👉‍‍TikTok