Tag HTML <main>

❮ Précédent Suivant ❯

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>

Essayez-vous-même!

Résultat

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>:

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 <main>:

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 <main>:

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 <main>:

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.


6+	4+	5+	11.1+

11.1+