Tag HTML <address>

❮ Précédent Suivant ❯

Le tag <address> est utilisé pour souligner l’information sur les contacts du propriétaire du site ou de l’auteur de l’article. En tant que l’information des contacts on peut donner l’adresse, le numéro de téléphone, e-mail, le lien sur le site etc.

Syntaxe

Le tag <address> est apparié, son contenu est écrit entre le tag ouvrant <address> et le tag fermant </address>. La plupart des navigateurs ajoutent avant de l’élément et après lui le saut de ligne, et l’information dans le tag on affiche en italique.

Si le tag <address> est mis en dedans de l’élément <body>, l’information des contacts qu’il contient est sur tout le document en général. Pour mettre en évidence l’informations des contacts de l’auteur de l’article il faut mettre le tag <address> dans l’élément <article>.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
  </head>
  <body>
    <address>
      Auteur: W3docs team<br />
      <a href="mailto:[email protected]">Contacter à l'auteur</a>
    </address>
  </body>
</html>

Essayez-vous-même!

Résultat

N'utilisez pas le tag & lt;address> à pour fournir une adresse email, à moins que cela ne fasse partie des informations sur l'auteur.

Le tag <address> est inclus avec une autre information dans l’élément <footer>.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <style>
      .header {
        height: 40px;
        padding: 20px 20px 0;
        background: #e1e1e1;
      }
      .main-content {
        height: 60vh;
        padding: 20px;
      }
      footer {
        padding: 10px 20px;
        background: #666666;
        color: white;
      }
      a {
        color: #00aaff;
      }
    </style>
  </head>
  <body>
    <div class="header">Header / Menu</div>
    <div class="main-content">
      <h1>Contenu principal</h1>
      <p>C'est un paragraphe. </p>
    </div>
    <footer style="display:flex; justify-content:space-between; align-items:flex-end;">
      <p style="margin:0;">Company © W3docs. All rights reserved.</p>
      <address>
        3rd street, app 43<br />
        New York, USA        
      </address>
    </footer>
  </body>
</html>

Essayez-vous-même!

Attributs

Le tag <address> supporte les Attributs globaux et les Attributs d'événements.

Comment styler le tag HTML <address> ?

Propriétés communes pour modifier le poids visuel/emphase/taille du texte dans le tag <address>:

La propriété CSS font-style définit le style de la police: normal | italic | oblique | initial | inherit
La propriété CSS font-family spécifie une liste priorisée d’un ou plusieurs noms de famille de police et/ou noms de famille génériques pour l’élément sélectionné.
La propriété CSS font-size définit la taille de la police.
La propriété CSS font-weight définit si la police doit être en gras ou épaisse.
La propriété CSS text-transform contrôle le cas de texte et la capitalisation.
La propriété CSS text-decoration spécifie la décoration ajoutée au texte, et est une propriété raccourcie pour les propriétés CSS text-decoration-line, text-decoration-color, text-decoration-style.

Coloration du texte dans le tag HTML <address>:

La propriété CSS color décrit la couleur du contenu et les décorations du texte.
La propriété CSS background-color définit la couleur de fond d’un élément.

Styles de mise en page du texte pour la tag HTML <address>:

La propriété CSS text-indent spécifie l’indentation de la première ligne dans un bloc de texte.
La propriété CSS text-overflow spécifie comment le contenu qui n’est pas affiché doit être signalé à l’utilisateur.
La propriété CSS white-space spécifie comment l’espace blanc à l’intérieur d’un élément est géré.
La propriété CSS word-break spécifie où les lignes doivent être cassées.

Autres propriétés utiles pour le tag HTML <address>:

La propriété CSS text-shadow ajoute des ombres au texte.
La propriété CSS text-align-last définit l’alignement de la dernière ligne du texte.
La propriété CSS line-height spécifie la hauteur d’une ligne.
La propriété CSS letter-spacing définit les espaces entre les lettres/caractères d’un texte.
La propriété CSS word-spacing permet de définir l’espacement entre les mots.