Le tag <main> est un nouvel élément de bloc dans la spécification de HTML5, qui est créé pour insérer le contenu principal dans le document. Le contenu du tag <main> doit être unique et ne pas dupliquer le même type de blocs que ceux répétés dans d'autres documents, tels que l'en-tête (header), le pied de page (footer), le menu, le formulaire de recherche, les informations de copyright, etc.

L’élément <main> ne doit pas être imbriqué dans les tags <article>, <aside>, <footer>, <header> ou <nav>. Dans un document, on peut utiliser seulement un tag <main>.

Syntaxe

Le contenu du tag est placé entre les tags ouvrant (<main>) et fermant (</main>).

Exemple

<!DOCTYPE html>
<html>
   <body>
      <main>
         <h1>Les langages de programmation</h1>
         <p>Les langages HTML et CSS sont destinés à la mise en page du site.</p>
         <article>
            <h2>HTML</h2>
            <p>HTML (Hyper Text Markup Language) – un langage de balisage hypertexte utilisé pour créer des pages Web.</p>
            <p>... </p>
            <p>... </p>
         </article>
         <article>
            <h2>CSS</h2>
            <p>CSS est un langage des styles, qui spécifie l’affichement des documents HTML.</p>
            <p>... </p>
         </article>
      </main>
   </body>
</html>

Résultat

Les langages de programmation

Attributs

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

Comment styler le tag HTML <main> ?

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

Coloration du texte dans le tag HTML <main>:

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

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

Support de Navigateurs

chrome firefox safari opera
6+ 4+ 5+ 11.1+

Pratiquez vos connaissances

Quelle est l'utilisation correcte de la balise HTML <main>?
Trouvez-vous cela utile?