L’insertion d’images en HTML5 permet d’embellir une page web : le contenu est plus attractif lorsqu’il est illustré d’éléments visuels. Les informations d’imagerie permettent également aux visiteurs du site Web de mieux les comprendre et de s’en souvenir. Enfin, l’incorporation d’images peut aider à améliorer les citations naturelles de votre site. L’utilisation d’un CMS gratuit comme HubSpot ou WordPress peut faciliter la tâche car il existe un simple bouton d’ajout d’image à cet effet. Sinon, insérer des image en HTML nécessite d’utiliser la balise et de maîtriser ses différents attributs.
Table des matières
Comment insérer une images en HTML5 ?
Pour insérer une images en HTML5, vous devez utiliser la balise et spécifier la source du fichier image à l’aide de l’attribut « src ». Le code HTML5 est le suivant : source URL. D’autres propriétés, telles que « alt », permettent une configuration avancée de l’affichage des images sur les pages Web.
Les balises sont entrées dans le fichier HTML5 où l’image doit être affichée. Notez que la balise HTML5 est un élément vide : elle n’a pas besoin de balise fermante.
Image Syntaxe
La balise HTML est utilisée pour intégrer une image dans une page Web.
Les images ne sont pas techniquement insérées dans une page Web:
- les images sont liées à des pages Web.
- La balise crée un espace de maintien pour l’image référencée.
- La balise est vide, elle ne contient que des attributs et n’a pas de balise fermante.
La balise a deux attributs obligatoires :
- src – Spécifie le chemin vers l’image
- alt – Spécifie un texte alternatif pour l’image
L’attribut src
L’attribut src est le seul attribut requis pour que le balisage HTML fonctionne : il est nécessaire et suffisant. C’est en effet la propriété source qui permet d’indiquer à la machine le chemin à suivre pour récupérer le fichier image à afficher sur la page web. Vous pouvez choisir la source : l’URL du site tiers d’où provient l’image, ou le nom du fichier image préalablement enregistré dans un répertoire ou sous-répertoire de la page HTML. Certaines précautions sont indispensables lors du choix d’une vision :
- Assurez-vous que les images sont libres de droits : la plupart des images en ligne sont protégées par le droit d’auteur, ce qui signifie qu’elles sont la propriété exclusive de leurs auteurs. Par conséquent, le pointage des balises HTML IMG SRC vers des images hébergées sur des sites tiers est interdit sauf autorisation préalable. Pour utiliser un contenu visuel sans risque de sanctions, vous devez soit : être le créateur, avoir une autorisation formelle pour le faire, ou vous assurer que le contenu est dans le domaine public. Cela est particulièrement vrai pour les visuels fournis par des images libres de droits.
- Vérifiez si le format est supporté par votre navigateur web : Il faut faire attention lorsque la source est un fichier image dans un répertoire de pages HTML. Les formats les plus courants sont pris en charge. Par conséquent, l’attribut src peut contenir des fichiers .jpg, .jpeg, .png, .gif et même .svg.
L’attribut alt
L’attribut alt n’est pas obligatoire, mais recommandé.
- Cette propriété permet d’afficher du texte si l’image ne se charge pas pour une raison quelconque.
- Le texte alternatif décrit l’image, permettant au logiciel de lecture d’écran de traduire la vision dans la langue parlée du visiteur malvoyant.
- L’attribut alt permet à Google Images d’indexer les visuels du mot-clé saisi, contribuant ainsi à améliorer la citation naturelle de la page. Notez que dans le même but, il est préférable de nommer le fichier image source avec un mot-clé pertinent.
Les attributs Height et Width
Ces propriétés peuvent modifier la taille, la hauteur et la largeur de l’image. Pour redimensionner une image en langage HTML, une valeur en pixels ou en pourcentage doit être saisie dans la balise img src