Qu'est-ce que le texte alt et pourquoi c'est important en HTML?

Les images jouent un rôle important dans toute application. Ils sont utilisés pour améliorer l'attrait et l'attractivité du site Web. Et si votre connexion Internet ralentit et que l'image souhaitée ne télécharge pas? Ensuite, ce qui doit être affiché à l'écran au lieu de l'image? Dans un tel scénario, HTML nous permet d'utiliser l'attribut "alt”Dans l'élément HTML.

Cette étude vous guidera sur ce qu'est le texte alt et pourquoi il est important en HTML.

Qu'est-ce qu'un texte alt dans HTML?

Parfois, lorsque nous faisons défiler un site Web, un peu de texte apparaît lorsque l'image ne parvient pas à télécharger. Ce composant HTML est connu sous le nom de «alt”Texte, description ou texte alternatif. C'est un attribut associé à la balise de HTML.

Syntaxe

Pour utiliser le texte ALT en HTML, suivez la syntaxe donnée:

La description de la syntaxe susmentionnée est répertoriée ci-dessous:

• "SRC»: Cet attribut est utilisé pour spécifier le chemin de l'image source.
• "alt»: Est le texte alternatif.

Pourquoi le texte alt est-il important en HTML?

Le texte alt est important pour de nombreuses raisons. Certains d'entre eux sont énumérés ci-dessous:

• Pour une meilleure accessibilité de la page Web, il est préférable d'utiliser du texte ALT car il aide les utilisateurs qui sont malvoyants pour entendre la description de l'image en utilisant des applications tierces.
• À la place de l'image, la valeur de l'attribut de texte alt sera affichée. Ceci est bénéfique lorsque les utilisateurs éprouvent des connexions à faible bande passante.
• Le texte alt contribue également au rang de page Web aux yeux de Google. Il fournit non seulement une description mais y ajoute également un sens, ce qui peut être utile pour le trafic global du site Web.

Quelles sont les meilleures pratiques du texte alt dans HTML?

Certaines des meilleures pratiques pour utiliser le texte ALT pour votre site Web sont répertoriées ci-dessous:

• Ne commencez pas le texte alt avec "photo de" ou "image de" mots.
• Limiter le texte alt à 130 caractères ou moins.
• Gardez à l'esprit le référencement.
• Être précis.

Exemple 1: Good and Bad Alt Text in HTML

Prenons un exemple et vérifions quel type de texte alternatif doit être affiché à la place de l'image:

Ici, nous avons déclaré le mauvais et le bon texte alternatif pour le HTML:

• Mauvais texte alt: Mountain Steps Purple Flowers.
• Bon texte alt: Marches entourées de fleurs violettes vers la montagne couverte de neige.

On peut observer que le texte mauvais alt n'est pas une description; c'est plutôt une liste de mots. En comparaison, le bon texte Alt décrit les informations sur l'image.

Exemple 2: Comment ajouter du texte alt à l'élément HTML?

Voyons le concept d'ajout de texte alt à l'aide d'un exemple.

Html

Dans le fichier html, ajoutez d'abord un conteneur qui contient l'élément. Cet élément est associé aux attributs SRC et ALT:

Enregistrez le fichier HTML et la page Web affichera l'image comme suit:

Disons que cette image n'a pas réussi à télécharger, ou nous avons ajouté par erreur le mauvais chemin de l'image dans notre fichier HTML. Ensuite, le texte Alt spécifié sera affiché à la place de l'image:

C'est ainsi que vous pouvez ajouter du texte alt à notre image en utilisant le "alt”Attribut dans la balise.

Conclusion

HTML nous permet d'utiliser des images pour notre application Web. Mais parfois, l'utilisateur connaît une connexion à faible bande passante, et l'image ne peut pas télécharger sur l'application. Dans une telle situation, le «alt»L'attribut avec tag affiche du texte alternatif lorsque l'image n'a pas réussi à afficher. Cet article a expliqué l'attribut alt de l'élément HTML.