Balise HTML <main>
La balise main définit le contenu principal du document en HTML5. Description, attributs et exemples.
La balise <main> est un élément de niveau bloc introduit dans la spécification HTML5. Elle englobe le contenu dominant du <body> du document — le contenu propre à ce document et non répété sur les autres pages du site, comme l'en-tête du site, le menu de navigation, la barre latérale, le champ de recherche ou le pied de page.
Cette page explique à quoi sert <main>, comment elle s'intègre dans une structure de document complète aux côtés de <header>, <nav> et <footer>, comment elle permet les liens « aller au contenu », et les règles d'utilisation de plusieurs <main> sur une page.
Où <main> peut et ne peut pas se trouver
L'élément <main> ne doit pas être placé à l'intérieur d'un élément <article>, <aside>, <footer>, <header> ou <nav> — <main> est une région de niveau supérieur, donc ces conteneurs ne lui sont pas applicables.
Cet élément fait partie de l'arbre DOM mais est exclu du plan du document, contrairement aux éléments de titre tels que <h1> à <h6>, qui y contribuent.
Accessibilité et le repère main
<main> représente le repère ARIA main. Les technologies d'assistance telles que les lecteurs d'écran exposent les repères afin que les utilisateurs puissent accéder directement aux grandes régions d'une page. Préférez l'élément <main> plutôt que d'ajouter role="main" à un élément générique tel qu'un <div>, car <main> porte ce rôle de manière implicite.
Il ne doit y avoir qu'un seul repère main par page. Les utilisateurs au clavier et les utilisateurs de lecteurs d'écran peuvent également passer le contenu répété (navigation, bannières, publicités) grâce à la technique du « lien d'évitement ». Si vous donnez un id à l'élément <main>, cet id devient la cible d'un lien d'évitement — voir l'exemple ci-dessous.
Syntaxe
La balise <main> s'utilise en paires. Le contenu est écrit entre les balises ouvrante (<main>) et fermante (</main>).
Exemple de la balise HTML <main> :
Balise HTML <main>
<!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><main> dans une structure de document complète
Dans une page réelle, <main> est placée aux côtés des autres éléments de repère. L'en-tête, la navigation et le pied de page se répètent sur toutes les pages, ils restent donc en dehors de <main> ; seul le contenu propre à la page se trouve à l'intérieur.
<!DOCTYPE html>
<html>
<head>
<title>Programming languages</title>
</head>
<body>
<header>
<h1>My Web Tutorials</h1>
</header>
<nav>
<a href="/html">HTML</a> |
<a href="/css">CSS</a> |
<a href="/js">JavaScript</a>
</nav>
<main>
<h2>Programming languages</h2>
<p>HTML and CSS are intended for site layout.</p>
</main>
<footer>
<p>© 2026 My Web Tutorials</p>
</footer>
</body>
</html>Ajouter un lien « aller au contenu principal »
Un lien d'évitement permet aux utilisateurs au clavier et aux lecteurs d'écran de sauter directement après la navigation répétée. Faites correspondre le href du lien avec l'id de l'élément <main> :
<body>
<a href="#main-content">Skip to main content</a>
<header>
<h1>My Web Tutorials</h1>
</header>
<nav>
<a href="/html">HTML</a> |
<a href="/css">CSS</a>
</nav>
<main id="main-content">
<h2>Programming languages</h2>
<p>HTML and CSS are intended for site layout.</p>
</main>
</body>Activer ce lien déplace le focus vers #main-content, de sorte que l'utilisateur arrive directement sur le contenu principal de la page.
Utiliser plusieurs <main> avec l'attribut hidden
Une page ne peut contenir qu'un seul élément <main> visible. Tout élément <main> supplémentaire doit porter l'attribut hidden. Cela est utile dans les applications monopages (SPA), où plusieurs « vues » existent simultanément dans le DOM mais seule la vue active est affichée :
<main>
<h2>Home view</h2>
<p>This view is visible.</p>
</main>
<main hidden>
<h2>Settings view</h2>
<p>This view is in the DOM but hidden until activated.</p>
</main>Lorsque l'utilisateur change de vue, le script permute l'attribut hidden de sorte qu'exactement un <main> soit visible à tout moment.
Attributs
La balise <main> prend en charge les Attributs globaux et les Attributs d'événement.
Mise en forme de l'élément <main>
<main> est simplement un conteneur structurel ; appliquez-lui des styles comme à n'importe quel élément de bloc. Comme il contient le contenu principal de la page, c'est l'endroit idéal pour définir la largeur de lecture globale, le rembourrage et l'espacement :
main {
display: block; /* ensures block layout in older browsers */
max-width: 800px;
margin: 0 auto; /* center the content column */
padding: 20px;
background-color: #f9f9f9;
}