Balise HTML <main>
Exemple
Spécifiez le contenu principal du document :
<main>
<h1>Most Popular Browsers</h1>
<p>Chrome, Firefox, and
Edge are the most used browsers today.</p>
<article>
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser
developed by Google, released in 2008. Chrome is the world's most popular web
browser today!</p>
</article>
<article>
<h2>Mozilla
Firefox</h2>
<p>Mozilla Firefox is an open-source web browser developed by
Mozilla. Firefox has been the second most popular web browser since January,
2018.</p>
</article>
<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015.
Microsoft Edge replaced Internet Explorer.</p>
</article>
</main>
Plus d'exemples "Essayez-le vous-même" ci-dessous.
Définition et utilisation
La <main>balise spécifie le contenu principal d'un document.
Le contenu à l'intérieur de l' <main>élément doit être unique pour le document. Il ne doit pas contenir de contenu répété dans les documents tels que les barres latérales, les liens de navigation, les informations de copyright, les logos de site et les formulaires de recherche.
Remarque : Il ne doit pas y avoir plus d'un <main>élément dans un document. L' <main>élément ne doit PAS être un descendant d'un élément <article>, <aside>, <footer>, <header> ou <nav>.
Prise en charge du navigateur
Les nombres dans le tableau indiquent la première version du navigateur qui prend entièrement en charge l'élément.
| Element | |||||
|---|---|---|---|---|---|
| <main> | 26.0 | 12.0 | 21.0 | 7.0 | 16.0 |
Attributs globaux
La <main>balise prend également en charge les attributs globaux en HTML .
Attributs d'événement
La <main>balise 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>Most
Popular Browsers</h1>
<p>Chrome, Firefox, and Edge are the
most used browsers today.</p>
<article class="browser">
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser
developed by Google, released in 2008. Chrome is the world's most popular web
browser today!</p>
</article>
<article class="browser">
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an
open-source web browser developed by Mozilla. Firefox has been the second most
popular web browser since January, 2018.</p>
</article>
<article class="browser">
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015.
Microsoft Edge replaced Internet Explorer.</p>
</article>
</main>
</body>
</html>