logo oujood
🔍

 Balise HTML <basefont> : police, couleur et taille par défaut

Comprendre la balise <basefont> obsolète et ses alternatives CSS modernes pour définir la typographie globale d'une page web.

OUJOOD.COM

La balise <basefont> : définir une police par défaut en HTML

LES BALISES HTML

La balise <basefont> était utilisée en HTML 3.2 pour définir la police par défaut, la couleur et la taille des caractères pour l'ensemble du contenu textuel d'un document HTML. Déclarée une seule fois dans la page, elle affectait globalement tous les textes non stylisés individuellement. Bien que cette balise soit aujourd'hui officiellement obsolète depuis HTML5, la comprendre reste utile pour maintenir des projets legacy ou comprendre l'évolution des bonnes pratiques typographiques du web.

En développement web moderne 2026, la bonne pratique consiste à utiliser les feuilles de style CSS pour contrôler la typographie globale via les propriétés font-family, font-size, color et line-height appliquées à la balise body ou via des variables CSS personnalisées.

Définition et fonctionnement de <basefont>

L'élément <basefont> est déclaré obsolète depuis HTML4 et totalement supprimé de la spécification HTML5. Aucun navigateur moderne ne garantit son interprétation. La balise de fermeture </basefont> était facultative en HTML et permettait de réinitialiser la taille de police à sa valeur par défaut (niveau 3).

La balise BASEFONT permettait de modifier les polices de caractères globalement :

  • Taille de police (attribut size) : valeur entière de 1 à 7, où 3 représente la taille par défaut du navigateur (équivalente à environ 16px en CSS)
  • Couleur du texte (attribut color) : en nom CSS, hexadécimal (#RRGGBB) ou rgb()
  • Famille de police (attribut face) : liste ordonnée de polices séparées par des virgules, le navigateur utilisant la première disponible

La balise </basefont> de fermeture réinitialisait la taille à 3 (taille par défaut). Cette balise était très rarement utilisée même à son époque, car elle était vite remplacée par les styles CSS dès les années 2000.


Attributs spécifiques de <basefont>

La colonne DTD dans le tableau suivant indique dans quel DOCTYPE HTML 4.01/XHTML 1.0 l'attribut était autorisé : S=Strict, T=Transitional, F=Frameset.

Attributs propres à <basefont>

AttributValeurDescriptionDTD
colorrgb(x,x,x)
#xxxxxx
nom de couleur
Obsolète. Spécifie la couleur par défaut de tout le texte du document. Remplacé par la propriété CSS color sur le sélecteur body.TF
facefont_familyObsolète. Spécifie la famille de police par défaut pour tout le texte. Accepte une liste de polices séparées par des virgules. Remplacé par font-family en CSS.TF
size1 à 7Obsolète. Spécifie la taille par défaut du texte (échelle propriétaire de 1 à 7, valeur 3 = taille normale). Remplacé par font-size en CSS (px, em, rem).TF

Attributs standards supportés

Comme la plupart des balises HTML, <basefont> supportait également les attributs universels suivants :

AttributValeurDescriptionDTD
classnom de classeSpécifie un nom de classe CSS pour l'élémentSTF
dirltr | rtlSpécifie l'orientation du texte (gauche à droite ou droite à gauche)STF
ididentifiant uniqueSpécifie un identifiant unique pour l'élément dans le documentSTF
langcode_langueSpécifie le code de langue pour le contenu de l'élément (ex: fr, en)STF
styledéclaration CSSApplique un style CSS en ligne directement sur l'élémentSTF
titletexteFournit des informations complémentaires affichées en infobulleSTF

Exemple historique : utilisation de <basefont> (déconseillé)

À titre éducatif et historique, voici comment la balise <basefont> était utilisée dans les années 1990-2000. N'utilisez jamais ce code dans un projet moderne : il sera ignoré par les navigateurs actuels.

  📋 Copier le code

<!-- Exemple HISTORIQUE - code obsolète HTML 3.2, à ne pas reproduire -->
<html>
<head>
  <title>Page avec basefont</title>
</head>
<body>
  <!-- Définition de la police globale via basefont (obsolète depuis HTML5) -->
  <basefont face="Arial, Helvetica" size="4" color="#333333">
  <!-- Tout le texte suivant hérite de ces paramètres -->
  <p>Ce texte utilise la police Arial en taille 4 et couleur #333333.</p>
  <p>Ce paragraphe hérite aussi des mêmes styles globaux.</p>
  <!-- La balise /basefont réinitialise la taille à 3 (valeur par défaut) -->
  </basefont>
  <p>Ce texte retrouve la taille par défaut (3).</p>
</body>
</html>

Alternative CSS moderne : remplacer <basefont> correctement en 2026

La bonne pratique CSS actuelle pour définir la typographie globale d'un site web consiste à appliquer les propriétés typographiques directement sur le sélecteur body ou via des variables CSS personnalisées (custom properties). Cette approche offre une maintenabilité, une accessibilité et une compatibilité navigateurs bien supérieures à l'ancienne balise <basefont>.

Exemple 1 : remplacement direct via CSS sur body

C'est l'équivalent CSS moderne et valide de la balise <basefont>. Toutes les propriétés s'appliquent globalement à la page entière via le sélecteur body.

  📋 Copier le code

<!-- Méthode recommandée en 2026 : CSS dans <style> ou fichier externe -->
<style>
  body {
    /* Équivalent de l'attribut face : liste de polices par ordre de préférence */
    font-family: Arial, Helvetica, sans-serif;
    /* Équivalent de size="4" : 1.125rem ≈ 18px avec base navigateur à 16px */
    font-size: 1.125rem;
    /* Équivalent de color="#333333" */
    color: #333333;
    /* Propriété supplémentaire sans équivalent basefont : lisibilité améliorée */
    line-height: 1.6;
  }
</style>
<p>Ce texte hérite automatiquement de toutes les propriétés CSS définies sur body.</p>

Exemple 2 : utilisation des variables CSS pour une typographie évolutive

Les variables CSS (custom properties) introduites en CSS3 permettent de centraliser les valeurs typographiques et de les réutiliser partout dans le code. C'est la meilleure pratique pour les projets à grande échelle en 2026.

  📋 Copier le code

<style>
  :root {
    /* Déclaration des variables CSS globales (custom properties) */
    --font-principale: 'Segoe UI', Arial, Helvetica, sans-serif;
    --couleur-texte: #2c2c2c;
    --taille-base: 1rem; /* 16px par défaut navigateur */
    --interligne: 1.7;
  }
  body {
    /* Utilisation des variables pour une mise à jour centralisée */
    font-family: var(--font-principale);
    color: var(--couleur-texte);
    font-size: var(--taille-base);
    line-height: var(--interligne);
  }
  h1, h2, h3 {
    /* Les titres peuvent surcharger localement sans affecter le body */
    color: #1a1a2e;
    font-weight: 700;
  }
</style>

Exemple 3 : équivalence des valeurs size de <basefont> en unités CSS modernes

Le tableau ci-dessous vous aide à convertir les valeurs numériques de l'attribut size (échelle 1 à 7) en unités CSS modernes comme px, em et rem pour migrer d'anciens projets HTML.

  📋 Copier le code

/* Table de correspondance : attribut size de basefont vs CSS moderne */
.taille-1 { font-size: 0.625rem; } /* size="1" ≈ 10px */
.taille-2 { font-size: 0.8125rem; } /* size="2" ≈ 13px */
.taille-3 { font-size: 1rem; }      /* size="3" = taille par défaut ≈ 16px */
.taille-4 { font-size: 1.125rem; }  /* size="4" ≈ 18px */
.taille-5 { font-size: 1.5rem; }    /* size="5" ≈ 24px */
.taille-6 { font-size: 2rem; }      /* size="6" ≈ 32px */
.taille-7 { font-size: 3rem; }      /* size="7" ≈ 48px */

Pourquoi <basefont> a-t-il été abandonné ?

La suppression de <basefont> de la spécification HTML5 (et HTML Living Standard en 2026) s'explique par plusieurs raisons techniques et philosophiques fondamentales du développement web moderne :

  • Séparation du fond et de la forme : HTML doit décrire la structure sémantique du contenu, pas son apparence visuelle. La typographie relève exclusivement des CSS.
  • Manque de flexibilité : l'attribut size utilisait une échelle propriétaire de 1 à 7, non standardisée entre navigateurs, contrairement aux unités CSS (px, rem, em, vw).
  • Accessibilité : les CSS modernes permettent le design responsive et accessible avec des unités relatives qui respectent les préférences de taille de texte de l'utilisateur.
  • Maintenabilité : modifier la typographie d'un site entier via un fichier CSS externe est infiniment plus efficace que d'éditer chaque page HTML individuellement.

   Vous êtes ici : Balise basefont    Retour à la liste des balises



Retour à l'accueil du site

Par carabde | Mis à jour le 8 mars 2026