Balise HTML `<main>`

La balise <main> est un nouvel élément de niveau bloc dans la spécification HTML5. La balise spécifie le contenu dominant du <body> du document. Le contenu de la balise <main> doit être unique et ne doit pas dupliquer des blocs du même type répétés dans d’autres documents, comme l’en-tête d’un site, l’en-tête, le pied de page, le menu, la recherche, les informations de copyright, etc.

L’élément <main> ne doit pas être placé dans les balises <article>, <aside>, <footer>, <header> ou <nav>. Un document ne doit pas comporter plus d’une balise <main> qui n’a pas d’attribut hidden spécifié.

Cet élément fait partie de l’arborescence DOM, mais il est exclu du plan du document, contrairement aux éléments de titre tels que <h2> qui y contribuent.

Les technologies d’assistance peuvent utiliser des repères pour identifier rapidement les grandes sections du document et y naviguer. Il est recommandé d’utiliser l’élément <main> au lieu de déclarer role="main", car l’élément porte implicitement ce rôle ARIA.

Les utilisateurs de technologies d’assistance peuvent ignorer de grandes sections de contenu répété en utilisant la technique « skipnav ». Cela permet à l’utilisateur d’accéder facilement au contenu principal d’une page. Si vous ajoutez un attribut id à l’élément <main>, il sera la cible d’un lien de navigation rapide.

Syntaxe

La balise <main> se présente par paires. Le contenu est écrit entre les balises ouvrante (<main>) et fermante (</main>).

Exemple de la balise HTML `<main>` :

Balise HTML <main>

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <main>
      <h1>Programming languages</h1>
      <p>
        Languages HTML and CSS are intended for site layout.
      </p>
      <article>
        <h2>HTML</h2>
        <p>
          HTML (Hyper Text Markup Language) is a language of hypertext markup, which is used to create web pages.
        </p>
        <p>... </p>
        <p>... </p>
      </article>
      <article>
        <h2>CSS</h2>
        <p>
          CSS is a language of styles, defining the display of HTML documents.
        </p>
        <p>... </p>
      </article>
    </main>
  </body>
</html>

Try it Yourself »

Résultat

main tag example

Attributs

La balise <main> prend en charge les attributs globaux et les attributs d’événement.

Comment styliser une balise HTML <main>

css

main {
  padding: 20px;
  background-color: #f9f9f9;
}

Practice

What is the significance and usage of the <main> tag in HTML?

It is used to sectionalize the main content on a webpage.It helps web browsers and assistive devices understand the structure of the website.It modifies the style of the main content on a webpage.It may exist multiple times on a page.It's optional and can be omitted on a webpage.

Balise HTML <main> ​

Syntaxe ​

Exemple de la balise HTML <main> : ​

Résultat ​