alainericgauthier.com

construire une présence sur le web

Apprendre HTML5 : les attributs universels

Web

Qu'est-ce qu'un attribut?

Un attribut permet de modifier le comportement d'un élément ou d'y ajouter de l'information. Cette valeur sera utilisée différemment selon le type d'attribut. Par exemple, l'attribut title permet d'afficher des informations supplémentaires à propos d'un élément. Disons que vous créez un hyperlien vers un autre site web. Vous pouvez, avec l'attribut title, indiquer le nom du site web ou le titre de la page mais vous pouvez aussi y ajouter le nom de l'auteur ou d'autres informations pertinentes liées à ce lien. Quand l'utilisateur place son curseur au-dessus du lien, le texte assigné à l'attribut title apparaîtra dans une bulle près de de l'élément.

La syntaxe d'un élément contenant un seul attribut est la suivante :

<[élément] [attribut]="[valeur]">Texte dans la page</[élément]>

Pour vous donner un exemple concret semblable à celui décrit plus haut :

<a href="http://alainericgauthier.com" title="Site web d'Alain Éric Gauthier">Visitez mon site web</a>

À quoi servent les attributs?

Un attribut donne une signification et un contexte à un élément. On s'en sert pour distinguer des éléments identiques qui ont une fonction différente dans un contexte particulier.

Par exemple, vous voulez publier un texte informatif qui comporte deux types de paragraphes, débutants et avancés. Il est possible d'utiliser l'attribut class et de définir deux classes : "debutants", "avances".

<p class="debutants">Paragraphe pour les utilisateurs débutants.</p>

<p class="avances">Paragraphe pour les utilisateurs avancés.</p>

Note : je ne conseille pas d'utiliser des signes diacritiques (é, è, à, û, etc.) pour des valeurs aux attributs id et class, cela pourrait causer des problèmes avec certains navigateurs.

Syntaxe des attributs

Les attributs se présentent sous 4 formes :

  1. [attribut]
  2. [attribut]=valeur
  3. [attribut]='valeur'
  4. [attribut]="[valeur]"

Une attribut peut avoir plusieurs valeurs et dans ce cas il faut utiliser des guillemets simples ou doubles et chaque valeur sera séparée d'un espace. L'ordre des attributs n'est pas important.

Les attributs universels

Les attributs universels s'appliquent à tous les éléments HTML5. Tous les éléments de la norme HTML5 les acceptent et tous les navigateurs savent interpréter ces attributs.

Il existe 22 attributs universels (source).

Voici la liste des attributs qui sont vraiment utiles pour créer une page web contenant principalement du texte :

class : définit une classe ou plusieurs classes pour un élément, la même classe peut être utilisée sur plusieurs éléments identiques ou différents dans une même page HTML5.

id : définit un identifiant, il ne peut y avoir qu'un seul identifiant par page

lang ou xml:lang : définit la langue du texte délimité par l'élément

style : permet d'appliquer du CSS (que nous verrons dans une autre série d'articles) directement à l'élément

title : permet de donner un titre à un élément, cette information sera utilisée, par exemple, par les outils qui permettent de présenter vos pages web à des personnes avec un handicap visuel.

Les attributs ne sont pas obligatoires. Ils sont utiles pour specifier des particularités à des éléments.

Quelques exemples

Vous créez un site web pour un manuel d'instruction qui contient des paragraphes qui mettent en garde l'utilisateur, il s'agit de paragraphes d'avertissement.

<p class="avertissement">Attention. Voici un paragraphe d'avertissement.</p>

Bien que la syntaxe HTML5 repose sur l'anglais, la valeur des attributs  peut être dans n'importe quelle langue :

id="accueil"

Vous pouvez définir la langue d'une page en ajoutant un attribut à l'élément <html> ou encore pour une citation dans une autre langue avec <q>.

<html xml:lang="en">

<q lang="fr">

L'attribut style permet d'ajouter du CSS (un langage complémentaire à HTML5 qui permet de contrôler la présentation de vos pages web) à un élément :

style="text-align:center"

Contrairement à ce que ce mot suggère, l'attribut title ne sert pas uniquement à ajouter un titre mais il peut contenir des informations à propos du contenu de l'élément. Par exemple, dans le cas d'une citation, il serait possible d'indiquer le nom de l'auteur, l'œuvre liée et le nom du site web où l'information a été trouvée. Pour les navigateurs sur ordinateur, ce texte s'affiche généralement sous-forme de bulle superposée quand le curseur est au-dessus du contenu de l'élément.

Mettons en application ce que nous avons vu jusqu'à maintenant.

<section id="citations">
  <h2>Quelques unes de mes citation préférées</h2>
  <p class="avertissement">
    <strong>Avertissement :</strong><br />
    Les opinions exprimées sur cette page ne sont endossées que par l'auteur. Son employeur et ses proches ne peuvent être tenus responsables des opinions exprimées sur cette page.<p>
  <p>À propos de la guerre : <q title="Citation d'Albert Einstein dans Comment je vois le monde">“Ceux qui aiment marcher en rangs sur une musique : ce ne peut être que par erreur qu’ils ont reçu un cerveau, une moelle épinière leur suffirait amplement.”</q></p>
  <p>À propos du savoir, Peter Drucker à dit : <q lang="en">Today knowledge has power. It control access to opportunities and advancement.</q></p>
  <p>À propos de la politique : <q title="Citation de Coluche">La différence qu'il y a entre les oiseaux et les hommes politiques, c'est que de temps en temps les oiseaux s'arrêtent de voler!</q></p>
</section>

Et comme je l'ai déjà mentionné pour d'autres exemples, les choix que j'ai fait ici ne sont qu'une solution parmi tant d'autres. La beauté d'HTML5 c'est que nous pouvons l'utiliser de différentes manières pour rendre la communication plus efficace.