HTML <main> etikett

Definition och användning

<main> Taggen definierar huvudinnehållet i dokumentet.

<main> Innehållet i elementet bör vara unikt för dokumentet. Det bör inte innehålla upprepade innehåll som förekommer i flera dokument, till exempel sidopaneler, navigationslänkar, upphovsrättsinformation, webbplatslogo och sökformulär.

Observera:Det får inte finnas flera <main> -elementet. <main> -elementet får inte vara <article>och<aside>och<footer>och<header> eller <nav> Efterkommande element av en element.

Exempel

Exempel 1

Specificera huvudinnehållet i dokumentet:

<main>
  <h1>De mest populära webbläsarna</h1>
  <p>Chrome, Firefox och Edge är de mest använda webbläsarna i dag.</p>
  <article>
    <h2>Google Chrome</h2>
    <p>Google Chrome är en webbläsare utvecklad av Google, som lanserades 2008...</p>
  </article>
  <article>
    <h2>Mozilla Firefox</h2>
    <p>Mozilla Firefox är en öppen källkods nätbrowsare utvecklad av Mozilla......&</p>
  </article>
  <article>
    <h2>Microsoft Edge</h2>
    <p>Microsoft Edge är en nätbrowsare utvecklad av Microsoft, som lanserades 2015......&</p>
  </article>
</main>

Prova själv

Exempel 2

Använd CSS för att ställa in <main> Stil av element:

<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>De mest populära webbläsarna</h1>
  <p>Chrome, Firefox och Edge är de mest använda webbläsarna i dag.</p>
  <article>
    <h2>Google Chrome</h2>
    <p>Google Chrome är en webbläsare utvecklad av Google, som lanserades 2008...</p>
  </article>
  <article>
    <h2>Mozilla Firefox</h2>
    <p>Mozilla Firefox är en öppen källkods nätbrowsare utvecklad av Mozilla......&</p>
  </article>
  <article>
    <h2>Microsoft Edge</h2>
    <p>Microsoft Edge är en nätbrowsare utvecklad av Microsoft, som lanserades 2015......&</p>
  </article>
</main>
</body>
</html>

Prova själv

Globala egenskaper

<main> Etiketten stöder också Globala egenskaper i HTML.

Evenegenskaper

<main> Etiketten stöder också Evenegenskaper i HTML.

Webbläsarstöd

Tal i tabellen anger den första webbläsarversionen som helt stöder denna etikett.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
26.0 12.0 21.0 7.0 16.0