Les attributs: id, class, style, src et href

Landry Sparrow — Fri, 21 Jul 2023 08:34:25 +0000

Les attributs HTML sont utilisés pour enregistrer des informations supplémentaires sur les éléments dans une balise HTML. Ils se composent d’un nom et d’une valeur.

<balise attr = valeur>

Il existe plusieurs attributs en HTML. Nous allons quant à nous apprendre cinque d'entre eux, qui sont: id, style,src, class, href

1. L'attribut id

L'attribut universel id définit un identifiant qui doit être unique pour l'ensemble du document. Le but de cet attribut est de pouvoir identifier un élément lorsqu'on crée un lien, avec un fragment et qu'on souhaite le manipuler avec un script ou qu'on le met en forme avec CSS.
ex:

<li><a href="https://example.com">Website</a></li>`

2. L'attribut class

L'attribut universel class indique une liste de classes associées à l'élément courant. Les classes permettent de manipuler les éléments, via CSS ou JavaScript en utilisant les sélecteurs de classe ou des fonctions telles que document.
ex:

<p class="haut">

3. L'attribu style

L'élément <style> peut être inclus dans l'élément <head>ou dans l'élément <body> du document et les styles seront appliqués. Toutefois, il est recommandé de placer les styles dans l'élément <head>afin de clairement séparer la présentation du contenu autant que possible.
ex:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>

4. L'attribut src

L'attribut src contient donc l'adresse à laquelle on va chercher l'image (voir le chapitre Liens). On peut utiliser une adresse absolue ou relative. Il faut cependant proscrire l'inclusion des objets (images, sons, vidéo) situés sur d'autres sites, ce que l'on appelle des « liens à chaud » (hot links).
ex:

<img src="https://assets.codepen.io/6093409/sprockt.svg" alt="Logo google png"/>

5. L'attribut herf

L'élément HTML <a>(pour ancre ou anchor en anglais), avec son attribut href , crée un lien hypertexte vers des pages web, des fichiers, des adresses e-mail, des emplacements se trouvant dans la même page, ou tout ce qu'une URL peut adresser. Le contenu de chaque élément <a> doit indiquer la destination du lien.
ex:

<p>
Rendez-vous quelque part sur la page :<br>
    <a href="index.html#cuisine">La cuisine</a><br>
    <a href="index.html#jardin">Le jardin</a><br>
    <a href="index.html#salon">Le salon</a><br>
</p>