Balise Alt en HTML

La balise HTML img contient l'attribut alt. Cet attribut spécifie les informations sur l'image telles que le nom de l'image, le lien de l'image, l'auteur de l'image, la spécification de l'image, etc. L'objectif principal de cet attribut est que lorsque la connexion Internet est lente, l'image peut ne pas se charger mais est chargée sans aucun problème. Ainsi, au lieu que l'utilisateur y revienne, si l'utilisateur déplaçait son curseur hors de la page, il afficherait du texte concernant l'image ; par conséquent, il peut comprendre qu'il y a du contenu sur cette page et attendre un certain temps jusqu'à ce que la page soit chargée.

Scénario en temps réel : lorsque nous affichons une image sur le Web, ce n'est pas juste pour l'utilisateur final sans savoir de quoi parle l'image. Nous devons donc spécifier du contenu à l'image en utilisant l'attribut alt.

Comment fonctionne l'attribut Alt en HTML ?

L'attribut Alt fournit des informations alternatives pour l'image afin de reconnaître à quoi elle est destinée. Cet attribut autorise uniquement le texte. Cet attribut disponible dans les balises :

Cet attribut alt à 3 balises sert uniquement à afficher le texte en haut de l'image.

Syntaxe n°1 – étiquette

<img src="image%20resource" alt="text">

Syntaxe n°2 – étiquette

<img src="image%20resource" alt="text" usemap="#name">
//usemap name and map name attribute name must be same
<map name="name">
<area coords="specify 4 coordinates" href="file.htm" alt="text">
</map>
<input> tag

Syntaxe n°3 – étiquette

<input type="image" src="image%20resource" alt="text">

Exemples d'implémentation de la balise Alt en HTML

ci-dessous les exemples mentionnés :

Exemple n°1

Code :

<meta charset="ISO-8859-1">
<title>Alt Attribute</title>
<style type="text/css">
h1 {
color: blue;
text-align: center;
}
p {
color: fuchsia;
font-size: 20px;
border: 2px solid red;
}
/*Aligning images side by side*/
* {
box-sizing: border-box;
}
.column {
width: 33.33%;
padding: 5px;
float: left;
}
.row::after {
clear: both;
display: table;
content: "";
}
</style>


<h1>Alt Attribute Introduction</h1>
<p>HTML img tag contains alt attribute. This attributes specifies
the information about the image like image name, image link, image
author, image specification etc. The main purpose of this attribute is
when the internet connection is slow the image may not load but is
loaded without any problem. So instead of user go back from the if
user moved his cursor from the page it will display some text
regarding image therefore he can understand that there is some content
in this page and wait for some time until page is loaded.</p>
<h1>Images with img tag and alt attribute</h1>
<div class="row">
<div class="column">
<img src="3.jpg" alt="First Bird"   style="max-width:90%">
</div>
<div class="column">
<img src="4.jpg" alt="Second Bird"   style="max-width:90%">
</div>
<div class="column">
<img src="5.jpg" alt="Third Bird"   style="max-width:90%">
</div>
</div>

Sortie :

Si la ressource image est disponible :

Si la ressource image n'est pas disponible :

Exemple n°2

Code :

<meta charset="ISO-8859-1">
<title>Alt Attribute</title>
<style type="text/css">
h1 {
color: green;
text-align: center;
}
p {
color: navy;
font-size: 20px;
border: 2px solid orange;
}
</style>


<h1>Alt Attribute Introduction</h1>
<p>HTML img tag contains alt attribute. This attributes specifies
the information about the image like image name, image link, image
author, image specification etc. The main purpose of this attribute is
when the internet connection is slow the image may not load but is
loaded without any problem. So instead of user go back from the if
user moved his cursor from the page it will display some text
regarding image therefore he can understand that there is some content
in this page and wait for some time until page is loaded.</p>
<h1>Images with area tag and alt attribute</h1>
<img src="d2.jpg"    style="max-width:90%"  style="max-width:90%" alt="Balise Alt en HTML" usemap="#dog">
<map name="dog">
<area shape="rect" coords="0,0,81,125" href="https://www.educba.com/category/software-development/software-development-tutorials/python-tutorial/" alt="Python">
<area shape="circle" coords="91,59,4" href="https://www.educba.com/category/software-development/software-development-tutorials/java-tutorial/" alt="Java">
<area shape="circle" coords="125,59,9" href="https://www.educba.com/category/software-development/software-development-tutorials/bootstrap-tutorial/" alt="Bootstrap">
</map>

Sortie :

Si la ressource image est disponible :

Si la ressource image n'est pas disponible :

Exemple #3

Code :

<meta charset="ISO-8859-1">
<title>Alt Attribute</title>
<style type="text/css">
h1 {
color: green;
text-align: center;
}
p {
color: navy;
font-size: 20px;
border: 2px solid orange;
}
label, input {
color: green;
font-size: 20px;
}
</style>


<h1>Alt Attribute Introduction</h1>
<p>HTML img tag contains alt attribute. This attributes specifies
the information about the image like image name, image link, image
author, image specification etc. The main purpose of this attribute is
when the internet connection is slow the image may not load but is
loaded without any problem. So instead of user go back from the if
user moved his cursor from the page it will display some text
regarding image therefore he can understand that there is some content
in this page and wait for some time until page is loaded.</p>
<h1>Images with input tag and alt attribute</h1>

First name:

Sortie :

Si la ressource image est disponible :

Si la ressource image n'est pas disponible :

Conclusion

Alt est un attribut disponible dans les balises area, img et input. Cet attribut alt est utilisé pour fournir des informations sur les images telles que ce qu'est une image ou ses coordonnées, l'auteur de l'image, etc.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!