Atributo alt de HTML
El atributo alt de HTML se utiliza en documentos HTML y XHTML. Especifica un texto alternativo que debe mostrarse si el elemento no puede visualizarse por alguna razón. El atributo alt también puede ser utilizado por lectores de pantalla para permitir que los usuarios con discapacidad visual interactúen con una página web. Para que sea accesible, una imagen debe tener un atributo alt. Sin embargo, puede dejarse vacío (alt="") para imágenes decorativas donde no se necesita un texto alternativo.
Puedes usar el atributo alt en los siguientes elementos: <area>, <img>, <input>.
peligro
Es obligatorio usar el atributo
altpara el elemento<img>. Para los elementos<input>, solo puedes usar el atributoaltcon <input type="image">.
Sintaxis
Sintaxis del atributo "alt"
<img alt="alternative text">
<area alt="alternative text">Ejemplo del atributo alt de HTML utilizado en el elemento <area>:
Atributo alt de HTML
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Click on the logo or on one of the logo item to watch it closer:</p>
<img src="https://es.w3docs.com/uploads/media/news_gallery/0001/01/thumb_316_news_gallery_list.jpeg" width="250" height="150" alt="block" usemap="#blockmap" />
<map name="blockmap">
<area shape="circle" coords="50,32,25" alt="html" href="https://es.w3docs.com/uploads/media/book_gallery/0001/01/d450f0358f947dffb3af91195c3002600d74101b.png" />
<area shape="circle" coords="218,115,25" alt="css" href="https://es.w3docs.com/uploads/media/book_gallery/0001/01/25521e981b34da57c8f51baddc5b76351b855818.png" />
<area shape="circle" coords="195,32,28" alt="php" href="https://es.w3docs.com/uploads/media/book_gallery/0001/01/4bbee6698c4884f25c46010d61b658dd62d2c04f.png" />
<area class="homepage" shape="rect" coords="90,90,35,55" alt="php" href="https://www.w3docs.com/" />
</map>
</body>
</html>Ejemplo del atributo alt de HTML utilizado en el elemento <img>:
Atributo alt de HTML
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<img src="https://es.w3docs.com/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185"/>
</body>
</html>Ejemplo del atributo alt de HTML utilizado en el elemento <input>:
Ejemplo del atributo "alt" de HTML utilizado en el elemento <input>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
input {
vertical-align: middle;
}
</style>
</head>
<body>
<form action="/form/submit">
Email:
<input type="email" name="Email" />
<input type="image" src="https://i7.pngguru.com/preview/278/823/594/computer-icons-button-clip-art-green-submit-button-png.jpg" alt="Submit button" width="60" height="60" />
</form>
</body>
</html>Práctica
¿Cuál es el propósito del atributo 'alt' en HTML?