L'attribut border du balise <img> HTML
Exemple
Le HTML suivant peut générer des bordures d'images de différentes épaisseurs :
<html> <body> <a href="/index.html"> <img src="/i/eg_logo_codew3c.gif" border="1" /> </a> <br /> <a href="/index.html"> <img src="/i/eg_logo_codew3c.gif" border="2" /> </a> <br /> <a href="/index.html"> <img src="/i/eg_logo_codew3c.gif" border="4" /> </a> <br /> <a href="/index.html"> <img src="/i/eg_logo_codew3c.gif" border="8" /> </a> </body> </html>
Définition et utilisation
L'attribut border du tag <img> spécifie la largeur de la bordure autour de l'image, ce qui signifie qu'il est possible d'ajouter ou de supprimer la bordure de l'image.
Remarque :Par défaut, les images n'ont pas de bordure (sauf si l'image est à l'intérieur d'un élément a).
Les navigateurs affichent généralement les images représentant des liens hypertextes (par exemple, les images incluses dans le tag <a>) à l'intérieur d'une bordure de 2 pixels pour indiquer que le lecteur peut accéder au document associé en sélectionnant cette image.
Vous pouvez supprimer ou élargir la bordure de l'image en utilisant l'attribut border avec une valeur de largeur en pixels (border="0") ou en augmentant la largeur de la bordure de l'image.
Attention :L'attribut n'est plus recommandé dans HTML 4 et XHTML, il devrait être remplacé par un style, mais il est toujours bien pris en charge par les navigateurs populaires.
Support du navigateur
Bien que l'attribut border ne soit pas recommandé, tous les navigateurs populaires le prennent en charge.
Astuces et commentaires
Remarque :L'attribut "border" des images n'est pas recommandé dans HTML 4.01. Dans XHTML 1.0 Strict DTD et HTML 5, cette propriété n'est plus prise en charge.
Astuce :Utilisez Attribut de bordure CSS Pour modifier le style de bordure d'un élément. Vous pouvez utiliser une feuille de style externe pour définir une bordure uniforme pour toutes les images du site. Par rapport à la définition de la bordure pour une image individuelle, cette méthode est sans doute plus efficace.
Commentaires sur la compatibilité
L'attribut border de l'élément img n'est pas recommandé ; dans HTML 4.01 Strict et XHTML 1.0 Strict DTD, l'attribut border de l'élément img n'est pas pris en charge.
Utilisez CSS à la place.
Syntaxe CSS : <img style="border:5px solid black">
Dans notre tutoriel CSS, vous pouvez trouver plus d'informations sur L'attribut border détails.
Syntaxe
<img border="value" />
Valeur de l'attribut
| Valeur | Description |
|---|---|
| pixels | La largeur de la bordure, en pixels. |
Exemple TIY
- L'attribut border du tag <img>
- Cet exemple montre comment utiliser l'attribut border de la balise <img> pour changer la bordure de l'image.
Lecture complémentaire : Supprimer les bordures des images
En utilisant l'attribut border="0" dans la balise <img>, vous pouvez supprimer la bordure autour de l'hypertexte image. Pour certains images, en particulier celles qui sont des cartes d'images, l'absence de bordure peut améliorer l'apparence de la page. Pour ceux qui sont clairement des boutons de lien vers d'autres images, sans bordure, l'image peut sembler mieux.
Bien que la suppression des bordures ne réduise pas l'accessibilité du document, il est toujours prudent de faire attention. Car sans bordure, cela signifie que l'indication visuelle courante des liens hypertextes a été supprimée, ce qui peut rendre plus difficile pour les lecteurs de trouver ces liens. Les navigateurs changent généralement la forme du curseur lorsque le curseur est déplacé sur une image hypertexte, mais on ne peut pas s'attendre à ce que cela se produise toujours, et encore moins que les utilisateurs doivent chercher des liens cachés sans bordure.
Nous recommandons vivement d'utiliser d'autres méthodes en même temps que des images sans bordure, afin que vos lecteurs sachent où cliquer sur ces images. Même avec du texte simple, il est difficile de rendre un document plus accessible pour les lecteurs.
