¿Cómo especificar un texto alternativo para una imagen en HTML?

El texto alternativo para una imagen es útil cuando la imagen no se muestra/carga. Si la imagen no está cargada, su texto alternativo se muestra en la página web. El texto alternativo es la información alternativa para una imagen.

Ejemplo 1: en este ejemplo, la ruta de la imagen contiene la imagen, por lo que mostrará la imagen.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        How to specify an alternate 
        text for an image? 
    </title> 
</head> 
  
<body> 
    <h1 style="color:green;">GeeksforGeeks</h1> 
  
    <h2>
        How to specify an alternate 
        text for an image?
    </h2> 
  
    <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20190506164011/logo3.png"
        alt="GeeksforGeeks logo"> 
</body> 
  
</html>

Producción:

Ejemplo 2: en este ejemplo, la ruta de la imagen no es correcta, por lo que mostrará información de texto alternativa.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        How to specify an alternate 
        text for an image? 
    </title> 
</head> 
  
<body> 
    <h1 style="color:green;">GeeksforGeeks</h1> 
  
    <h2>
        How to specify an alternate 
        text for an image?
    </h2> 
  
    <img src= "geeks.png"
        alt="GeeksforGeeks logo"> 
</body> 
  
</html>

Producción:

Publicación traducida automáticamente

Artículo escrito por vkash8574 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *