El Atributo SRC

Es fundamental para incrustar recursos externos en una página web. Este atributo define la ruta o URL de archivos.

El atributo src (abreviatura de source) en HTML es fundamental para incrustar recursos externos en una página web. Este atributo define la ruta o URL de archivos como imágenes, scripts, videos, iframes y más. A continuación, te explicamos cómo utilizarlo correctamente en diferentes contextos.

1. Introducción al atributo src

  • Propósito:
    Especificar la ubicación de un recurso externo que el navegador debe cargar.

  • Elementos comunes que usan src:
    <img>, <script>, <iframe>, <audio>, <video>, <source>, <track>, <embed>.

  • Valor:
    Una URL absoluta o relativa al recurso. Ejemplo: "imagen.jpg", "https://ejemplo.com/script.js".

2. Sintaxis básica

html
Copy
<!-- Imagen -->
<img src="ruta/imagen.jpg" alt="Descripción">

<!-- Script externo -->
<script src="archivo.js"></script>

<!-- Video -->
<video src="video.mp4" controls></video>

<!-- Iframe -->
<iframe src="https://ejemplo.com"></iframe>
 
Run HTML

3. Ejemplos detallados por elemento

3.1. Imágenes (<img>)

El atributo src define la ruta de la imagen. Siempre debe usarse con alt para accesibilidad:

html
Copy
<img 
  src="fotos/logo.png" 
  alt="Logo de la empresa"
  width="200" 
  height="100"
>
 
Run HTML

3.2. Scripts externos (<script>)

Carga archivos JavaScript desde una ruta externa:

html
Copy
<script src="scripts/main.js"></script>
<!-- Script desde CDN -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 
Run HTML

3.3. Iframes (<iframe>)

Incrusta páginas web externas:

html
Copy
<iframe 
  src="https://www.youtube.com/embed/abc123" 
  width="600" 
  height="400"
  title="Video explicativo"
></iframe>
 
Run HTML

3.4. Multimedia (<audio>, <video>)

Reproduce archivos de audio o video. También se usa con <source> para múltiples formatos:

html
Copy
<video controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  Tu navegador no soporta el elemento de video.
</video>
 
Run HTML

4. Rutas: Absolutas vs. Relativas

  • Ruta relativa:
    Referencia un archivo dentro del mismo proyecto:

    html
    Copy
    <img src="assets/imagen.jpg"> <!-- Archivo en carpeta local -->
     

 

  • Run HTML

  • Ruta absoluta:
    Usa una URL completa, generalmente para recursos externos:

    html
    Copy
    <img src="https://ejemplo.com/imagen.jpg">
     

 

  • Run HTML

5. Buenas prácticas

  1. Optimiza recursos:

    • Comprime imágenes para reducir el tiempo de carga.

    • Usa formatos modernos como WebP para imágenes o WebM para video.

  2. Accesibilidad:

    • En <img>, siempre incluye el atributo alt.

    • En <iframe>, usa title para describir el contenido.

  3. Seguridad:

    • Usa HTTPS en URLs para evitar problemas de contenido mixto.

    • Evita hotlinking (enlazar recursos de otros sitios sin permiso).

  4. Lazy loading:
    Mejora el rendimiento cargando recursos bajo demanda:

    html
    Copy
    <img src="imagen.jpg" loading="lazy" alt="...">
     
  1. Run HTML

6. Errores comunes

  • Rutas incorrectas:
    Verifica que la ruta del src sea correcta.
    Ejemplo: Si la estructura es proyecto/assets/img/logo.png, usa:

    html
    Copy
    <img src="assets/img/logo.png" alt="Logo">
     
  • Run HTML

  • Olvidar atributos esenciales:
    En <img>, omitir alt afecta la accesibilidad y el SEO.

  • Recursos bloqueados por CORS:
    Algunos servidores externos restringen el acceso a recursos. Usa permisos adecuados.

7. Casos avanzados

7.1. Imágenes responsive con <picture>

Combina <source> y srcset para adaptar imágenes a diferentes pantallas:

html
Copy
<picture>
  <source media="(min-width: 768px)" srcset="imagen-grande.jpg">
  <source media="(min-width: 480px)" srcset="imagen-mediana.jpg">
  <img src="imagen-pequeña.jpg" alt="...">
</picture>
 
Run HTML

7.2. Preload de recursos críticos

Usa <link rel="preload"> para priorizar la carga de recursos clave:

html
Copy
<link rel="preload" href="fuente.woff2" as="font" crossorigin>
 
Run HTML

8. Conclusión

El atributo src es esencial para integrar recursos externos en HTML. Recuerda:

  • Utiliza rutas correctas y verifica la disponibilidad de los recursos.

  • Optimiza medios para mejorar el rendimiento.

  • Prioriza la accesibilidad y seguridad en todos los casos.

Ejemplo integrado:

html
Copy
<!DOCTYPE html>
<html>
<head>
  <title>Ejemplo de src</title>
  <script src="scripts/app.js"></script>
</head>
<body>
  <img 
    src="img/portada.jpg" 
    alt="Portada del sitio" 
    loading="lazy"
    width="1200" 
    height="600"
  >
  <iframe 
    src="https://www.google.com/maps/embed?pb=..." 
    width="600" 
    height="450" 
    title="Mapa de ubicación"
  ></iframe>
</body>
</html>
 
Run HTML

Con este tutorial, podrás usar el atributo src eficientemente en tus proyectos web. ????