HTML <main> Tag
Exemple
Spécifiez le contenu principal du document :
<main>
<h1>Navigateurs les Plus Populaires</h1>
<p>Chrome, Firefox et Edge sont les navigateurs les plus utilisés aujourd'hui.</p>
<article>
<h2>Google Chrome</h2>
<p>Google Chrome est un navigateur web développé par Google, sorti en 2008. Aujourd'hui, Chrome est le navigateur web le plus populaire au monde !</p>
</article>
<article>
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox est un navigateur web open-source développé par Mozilla. Depuis janvier 2018, Firefox est le deuxième navigateur web le plus populaire.</p>
</article>
<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge est un navigateur web développé par Microsoft, sorti en 2015. Microsoft Edge a remplacé Internet Explorer.</p>
</article>
</main> Plus d'exemples "Essayez-le Vous-Même" ci-dessous.
Définition et Utilisation
Le <main> tag spécifie le contenu principal d'un document.
Le contenu à l'intérieur de l'élément <main> doit être unique au document. Il ne doit pas contenir de contenu qui est répété dans d'autres documents, comme des barres latérales, des liens de navigation, des informations sur les droits d'auteur, des logos de site et des formulaires de recherche.
Remarque : Il ne doit pas y avoir plus d'un élément <main> dans un document. L'élément <main> ne doit PAS être un descendant d'un élément <article>, <aside>, <footer>, <header> ou <nav>.
Support des Navigateurs
Les chiffres dans le tableau spécifient la première version du navigateur qui prend entièrement en charge l'élément.
| Élément | |||||
|---|---|---|---|---|---|
| <main> | 26.0 | 12.0 | 21.0 | 7.0 | 16.0 |
Attributs Globaux
Le <main> tag prend également en charge les Attributs Globaux en HTML .
Attributs d'Événement
Le <main> tag prend également en charge les Attributs d'Événement en HTML .
Plus d'Exemples
Exemple
Utilisez CSS pour styliser l'élément <main> :
<html>
<head>
<style>
main {
margin: 0;
padding: 5px;
background-color: lightgray;
}
main > h1, p, .browser {
margin: 10px;
padding: 5px;
}
.browser {
background: white;
}
.browser > h2, p {
margin: 4px;
font-size: 90%;
}
</style>
</head>
<body>
<main>
<h1>Navigateurs les Plus Populaires</h1>
<p>Chrome, Firefox et Edge sont les navigateurs les plus utilisés aujourd'hui.</p>
<article class="browser">
<h2>Google Chrome</h2>
<p>Google Chrome est un navigateur web développé par Google, sorti en 2008. Aujourd'hui, Chrome est le navigateur web le plus populaire au monde !</p>
</article>
<article class="browser">
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox est un navigateur web open-source développé par Mozilla. Depuis janvier 2018, Firefox est le deuxième navigateur web le plus populaire.</p>
</article>
<article class="browser">
<h2>Microsoft Edge</h2>
<p>Microsoft Edge est un navigateur web développé par Microsoft, sorti en 2015. Microsoft Edge a remplacé Internet Explorer.</p>
</article>
</main>
</body>
</html>