attributs globaux
#################

Les attributs globaux sont des attributs susceptibles d’être appliqués à
n’importe quelle balise. `La spécification en indique
12 <https://www.w3.org/TR/html5/dom.html#global-attributes>`__.
Cependant, les deux attributs globaux les plus courants sont les
suivants :

id
**

l’attribut ``id`` permet de définir un identificateur unique pour un élément. Il permet notamment de sauter directement à une partie spécifique du document grâce à un lien hypertexte.

Les valeur d’\ ``id`` ne sont pas définies par la spécification HTML. On tentera autant que possible d’indiquer un ``id`` qui nous renseigne sur l’élément sur lequel il est appliqué.

   Il s’agit d’un attribut unique, qui ne peut être attribué qu’une seule fois.

.. code-block:: html

   <section id="exemple-d-id">contenu<section>

   <a href="#exemple-d-id">lien vers l’exemple</a>

.. note::

   Ici on définit un élément ``section`` avec l’identifiant unique
   ``exemple-d-id``

   l’élément ``a`` (pour *anchor*, ancre) est un lien qui renvoit vers
   l’adresse indiquée via son attribut ``href`` (pour *Hypertexte
   REFerence*). Ici, il renverra vers l’élément donc l’\ ``id`` sera
   ``exemple-d-id``.

Class
*****

l’attribut ``class`` permet de définir un ou plusieurs identificateurs,
séparées par des espaces, et permettant d’indiquer les classes (on
pourrait dire les groupes) auxquelles l’élément appartient.

Les valeurs de ``class`` ne sont pas définies par la spécification HTML.
On tentera autant que possible d’indiquer des valeurs de ``class`` qui
nous renseignent sur l’élément sur lequel elles sont appliquées.

.. code-block:: html

   <button class="bouton--suppression grandes-marges avertissement">supprimer les fichiers</a>

.. note::

   Le principal usage des classes est de permettre la sélection, en CSS,
   des éléments, afin de pouvoir indiquer comment ceux-ci doivent
   apparaître.

attributs style
***************

l’attribut ``style`` est un attribut global qui peut être utilisé pour
associer des propriétés CSS de mise en forme directement dans le HTML.

.. warning::

   Cela constitue toutefois une entorse au principe de séparation des préoccupations. C’est quelque chose que l’on souhaite ardemment éviter, il est donc préférable d’avoir une très bonne justification pour insérer directement dans son code source des propriétés CSS via cet attribut.

.. code-block:: html

   <p style="color:red;">paragraphe</p>