Attribut alt HTML
L'attribut alt HTML est utilisé dans les documents HTML et XHTML. Il spécifie un texte alternatif qui doit être affiché si l'élément ne peut pas être affiché pour une raison quelconque. L'attribut alt peut également être utilisé par les lecteurs d'écran pour permettre aux utilisateurs malvoyants d'interagir avec une page web. Pour être accessible, une image doit avoir un attribut alt. Cependant, il peut être laissé vide (alt="") pour les images décoratives où aucun texte alternatif n'est nécessaire.
Vous pouvez utiliser l'attribut alt sur les éléments suivants : <area>, <img>, <input>.
DANGER
L'utilisation de l'attribut alt est obligatoire pour l'élément <img>. Pour les éléments <input>, vous ne pouvez utiliser l'attribut alt qu'avec <input type="image">.
Syntaxe
Syntaxe de l'attribut "alt"
<img alt="alternative text">
<area alt="alternative text">Exemple de l'attribut alt HTML utilisé sur l'élément <area> :
Attribut alt 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://fr.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://fr.w3docs.com/uploads/media/book_gallery/0001/01/d450f0358f947dffb3af91195c3002600d74101b.png" />
<area shape="circle" coords="218,115,25" alt="css" href="https://fr.w3docs.com/uploads/media/book_gallery/0001/01/25521e981b34da57c8f51baddc5b76351b855818.png" />
<area shape="circle" coords="195,32,28" alt="php" href="https://fr.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>Exemple de l'attribut alt HTML utilisé sur l'élément <img> :
Attribut alt HTML
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<img src="https://fr.w3docs.com/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185"/>
</body>
</html>Exemple de l'attribut alt HTML utilisé sur l'élément <input> :
Exemple de l'attribut HTML "alt" utilisé sur l'élément <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>Pratique
Quelle est la fonction de l'attribut 'alt' en HTML ?