Balise image html, c'est quoi ?

En informatique, une balise est une courte chaîne de caractères qui sert à définir un élément d’un document. Les balises les plus courantes sont celles qui servent à définir le texte (par exemple, <p> pour un paragraphe) ou les images (par exemple, <img>).

<img> est une balise HTML qui permet de insérer une image dans un document HTML. Les images peuvent être stockées sur n’importe quel serveur Web, y compris les serveurs des moteurs de recherche et les sites d’hébergement d’images.

Pour afficher une image sur un site Web, vous devez indiquer l’ URL de l’image à laquelle elle doit être téléchargée. Vous pouvez également spécifier la largeur et la hauteur de l’image en utilisant les attributs width et height . La balise <img> est souvent utilisée avec la balise <a> pour créer des liens vers des images.

Exemple de balises img html :

De quand date la balise image html ?

La balise image existe depuis la version 2.0 du HTML. Elle permet d’afficher des images au sein d’une page web.

HTML 2 était la deuxième version majeure de la norme HTML et a été initialement publiée en novembre 1995. S’appuyant sur le succès de HTML 1, HTML 2 a ajouté la prise en charge des tableaux, des images et de diverses autres nouvelles fonctionnalités. Cependant, l’amélioration la plus significative était sa capacité à être utilisé comme format de document structuré.

Cela a permis de diviser les documents en sections distinctes, chacune avec son propre titre, et a permis d’inclure des liens entre les sections. En conséquence, HTML 2 a représenté une avancée majeure pour le Web et a jeté les bases des versions ultérieures de la norme HTML.

balise image html avec attribut alt, quand l’utiliser ?

Une balise alternative est une balise qui fournit des informations supplémentaires sur un élément, mais n’est pas essentielle au fonctionnement du document. Par exemple, la balise <img> peut inclure une balise alternative qui fournit une brève description de l’image.

Ces descriptions sont particulièrement utiles pour les utilisateurs qui ne peuvent pas voir l’image, par exemple ceux qui utilisent un navigateur texte ou un lecteur d’écran. Elles sont également utiles pour les images dont le contenu est difficile à comprendre, comme les graphiques ou les diagrammes.

En général, il est recommandé d’inclure une balise alternative pour toutes les images afin que le document soit accessible à tous les utilisateurs.

Les avantages de la balise alternative pour le SEO

En matière de référencement, il est important de se concentrer sur les mots-clés et les phrases clés que les internautes utilisent pour trouver votre site. Cependant, il est également important de fournir des balises alt aux images de votre site.

Les balises alt sont des tags qui permettent aux moteurs de recherche de comprendre ce qu’il y a sur une image. En fournissant des balises alt pertinents, vous pouvez améliorer votre classement dans les résultats de recherche. De plus, les utilisateurs ayant des difficultés visuelles peuvent également bénéficier de la lecture des balises alt, ce qui rend votre site plus accessible pour tous.

Enfin, les balises alt peuvent également aider à promouvoir votre contenu sur les réseaux sociaux. Les réseaux sociaux utilisent souvent l’information contenue dans les balises alt pour décrire une image, ce qui peut vous aider à gagner des abonnés et à augmenter votre audience.

Au final, il est important de se concentrer sur les mots-clés et les phrases clés, mais il est également important de fournir des balises alt pertinentes aux images de votre site.

Les attributs de la balise image html

La balise image est une balise empty, ce qui signifie qu’elle ne contient pas de texte et qu’elle se ferme uniquement avec la barre oblique avant (/) . La balise image accepte deux attributs principaux: src et alt. src indique au navigateur où trouver l’image, tandis que alt fournit une description de l’image aux utilisateurs qui ne peuvent pas voir l’image. La balise image prend également d’autres attributs tels que width, height, hspace, vspace, etc. (Attention, les attributs hspace et vspace sont dépréciés depuis HTML5) Ces attributs permettent au développeur de contrôler la manière dont l’image sera affichée sur la page Web.

L’attribut width de la balise image html

L’attribut optionnel width spécifie la largeur d’une image, en pixels. Si l’attribut width n’est pas spécifié, l’image sera affichée à sa largeur d’origine (généralement 96 pixels). Si l’attribut width est défini sur une valeur supérieure à 96 pixels, l’image sera étirée. Si l’attribut width est défini sur une valeur inférieure à 96 pixels, l’image sera réduite.

L’attribut height, lui, permet de modifier la hauteur d’une image, il s’utilise de la même façon que l’attribut width.

Exemple de balise image avec une largeur configurée à 60 pixels :

Ajouter un lien sur une balise image html

Il est possible de rendre une image cliquable assez facilement en HTML, pour cela, il suffit dentourer la balise image avec une balise a.

Si je souhaite faire pointer mon image sur https://google.com, voici le code à utiliser:

<a href= »https://google.com><img src= »/images/image.png »/></a> »

Bien que la balise HTML img ne soit pas aussi couramment utilisée que certaines des autres balises, elle peut être un outil puissant lorsqu’elle est utilisée correctement. En utilisant l’attribut alt pour fournir un texte alternatif à ceux qui ne peuvent pas voir l’image, vous gagner déjà des points pour votre référencement naturel.

Atelier majelan, vous accompagne dans la réalisation des sites vitrine et marchand. L’objectif est de vous présenter un site intuitif et un parcours client fluide.