HTML | atributo alternativo

El atributo HTML alt se usa para proporcionar una etiqueta alternativa que se usa para mostrar o mostrar algo si el atributo principal, es decir, la etiqueta <img>, no muestra el valor que se le ha asignado.
Etiquetas compatibles: 

Valores de atributo : contiene texto de valor único que se utiliza para especificar el texto alternativo para el elemento admitido, si la imagen no se muestra.

Ejemplo: atributo alt de Img. 
 

html

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        HTML img alt Attribute 
    </title> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
  
    <h2>HTML img alt Attribute</h2> 
  
    <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20190506164011/logo3.png"
        alt="GeeksforGeeks logo"> 
  
</body> 
  
</html> 

Salida:  
Antes: 
 

Después: 
 

Ejemplo: Atributo alt de área. 
 

html

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        HTML area alt Attribute 
    </title> 
</head> 
  
<body style="text-align:center;"> 
    <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20190227165729/area11.png"
        alt="alt_attribute" width="300" height="119" class="aligncenter"
        usemap="#shapemap" /> 
  
    <map name="shapemap"> 
          
        <!-- area tag contained image. -->
        <area shape="poly" coords="59, 31, 28, 83, 91, 83" href= 
"https://media.geeksforgeeks.org/wp-content/uploads/20190227165802/area2.png"
        alt="Triangle"> 
          
        <area shape="circle" coords="155, 56, 26" href= 
"https://media.geeksforgeeks.org/wp-content/uploads/20190227165934/area3.png"
        alt="Circle"> 
          
        <area shape="rect" coords="224, 30, 276, 82" href= 
"https://media.geeksforgeeks.org/wp-content/uploads/20190227170021/area4.png"
        alt="Square"> 
    </map> 
</body> 
  
</html>

Producción: 
 

Ejemplo: atributo alt de entrada. 
 

html

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        HTML Input alt Attribute 
    </title> 
</head> 
  
<body style="text-align:center;"> 
  
    <h1 style="color:green;"> 
            GeeksForGeeks 
        </h1> 
  
    <h2>HTML Input alt Attribute</h2> 
    <input id="myImage"
        type="image"
        src= 
"https://media.geeksforgeeks.org/wp-content/uploads/gfg-40.png"
        alt="Submit"
        width="48"
        height="48"> 
</body> 
  
</html>

Producción: 
 

Navegadores compatibles: Los navegadores compatibles con HTML | atributo alt se enumeran a continuación: 
 

  • Google Chrome
  • explorador de Internet
  • Firefox
  • safari de manzana
  • Ópera

Publicación traducida automáticamente

Artículo escrito por Vijay Sirra 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 *