DEV Community

Landry Sparrow for KADEA ACADEMY

Posted on • Updated on

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

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>
Enter fullscreen mode Exit fullscreen mode

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>`

Enter fullscreen mode Exit fullscreen mode

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">

Enter fullscreen mode Exit fullscreen mode

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>

Enter fullscreen mode Exit fullscreen mode

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"/>

Enter fullscreen mode Exit fullscreen mode

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>

Enter fullscreen mode Exit fullscreen mode

Pour péciser un attribut, vous ferez d'abord un espace entre le nom de la balise et le nom de l'attribut, que vous écrirez en minuscule.

Top comments (0)