Attributs HTML

C'est quoi un attribut ?

les attributs définissent des caractéristiques ou des propriétés supplémentaires de l'élément telles que la largeur et la hauteur d'une image. Les attributs sont toujours spécifiés dans la balise de début (ou balise d'ouverture) et consistent généralement en des paires nom/valeur comme name="value". Les valeurs d'attribut doivent toujours être placées entre guillemets.

De plus, certains attributs sont requis pour certains éléments. Par exemple, une balise <img> doit contenir des attributs src et alt. Examinons quelques exemples d'utilisation des attributs :

<img src="images/john.png" width="30" height="30" alt="avatar">
<input type="text" value="Jean Claude">
<a href="https://www.facebook.com/" title="Réseau social">Facebook</a>

Dans l'exemple ci-dessus, src à l'intérieur de la balise <img> est un attribut et le chemin d'image fourni est sa valeur. De même, href à l'intérieur de la balise <a> se trouve un attribut et le lien fourni est sa valeur, et ainsi de suite.

Les guillemets simples et doubles peuvent être utilisés pour citer des valeurs d'attribut. Cependant, les guillemets doubles sont les plus courants. Dans les situations où la valeur de l'attribut elle-même contient des guillemets doubles, il est nécessaire d'envelopper la valeur entre guillemets simples, par exemple, value='John "Walter" Jr.'

Il existe plusieurs attributs dans HTML5 qui ne consistent pas en des paires nom/valeur mais uniquement en un nom. Ces attributs sont appelés attributs booléens. Des exemples d'attributs booléens couramment utilisés sont checked, disabled, readonly, required, etc.

<input type="email" required>
<input type="submit" value="Submit" disabled>
<input type="checkbox" checked>
<input type="text" value="Read only text" readonly>

Vous découvrirez tous ces éléments en détail dans les prochains chapitres.

Remarque : Les valeurs d'attribut ne sont généralement pas sensibles à la casse, à l'exception de certaines valeurs d'attribut, telles que les attributs id et class. Cependant, le World Wide Web Consortium (W3C) recommande les minuscules pour les valeurs d'attributs dans leurs spécifications.

Attributs à usage général

Il existe certains attributs, tels que id, title, class, style, etc. que vous pouvez utiliser sur la majorité des éléments HTML. La section suivante décrit leurs utilisations.

L'attribut id

L'attribut id est utilisé pour donner un nom ou un identifiant unique à un élément dans un document. Cela facilite la sélection de l'élément à l'aide de CSS ou de JavaScript.

<input type="text" id="nom">
<div id="container">quelques contenus</div>
<p id="info">Ceci est un paragraphe</p>

Remarque : Le id d'un élément doit être unique au sein d'un même document. Deux éléments d'un même document ne peuvent pas porter le même nom id et chaque élément ne peut en avoir qu'un seul id.

L'attribut class

Comme l'attribut id, l'attribut class est également utilisé pour identifier les éléments. Mais contrairement à id, l'attribut class n'a pas besoin d'être unique dans le document. Cela signifie que vous pouvez appliquer la même classe à plusieurs éléments d'un document, comme illustré dans l'exemple suivant :

<input type="text" class="active">
<div class="bloc active">Contenu</div>
<p class="active">Paragraphe</p>

Étant donné que la class peut être appliqué à plusieurs éléments, toutes les règles de style écrites sur celui-ci seront appliquées à tous les éléments ayant ce class.

L'attribut title

L'attribut title est utilisé pour fournir un texte consultatif sur un élément ou son contenu. Essayez l'exemple suivant pour comprendre comment cela fonctionne réellement.

<abbr title="World Wide Web Consortium">W3C</abbr>

<a href="images/john.jpg" title="Clic pour voir l'image en grand">
    <img src="images/john-thumb.jpg" alt="profil de john">
</a>

La valeur de l'attribut title (c'est-à-dire le texte du titre) est affichée sous forme d'info-bulle par les navigateurs Web lorsque l'utilisateur place le curseur de la souris sur l'élément.

L'attribut style

L'attribut style vous permet de spécifier des règles de style CSS telles que la couleur, la police, la bordure, etc. directement dans l'élément. Voyons un exemple pour voir comment cela fonctionne :

<p style="color: red;">Paragraphe en rouge</p>
<img src="images/letecode.jpg" style="width: 300px;" alt="logo letecode">
<div style="border: 1px solid red;">un bloc avec bordure rouge</div>

Vous en apprendrez plus sur le style des éléments HTML dans le chapitre sur les styles HTML .

Les attributs dont nous avons parlé ci-dessus sont également appelés attributs globaux.