HTML <main> -elementti

Määrittely ja käyttö

<main> Tagi määrittelee dokumentin pääsisällön.

<main> Elementin sisältö tulisi olla dokumentissa ainutlaatuista. Siihen ei tulisi sisällyttää sisältöä, joka toistuu useissa dokumenteissa, kuten sivupalkkeja, navigointilinkkejä, tekijänoikeustietoja, verkkosivun logoa ja hakulomakkeita jne.

Huomaa:Dokumentissa ei voi olla useita <main> -elementti。 <main> -elementti ei voi olla <article>ja<aside>ja<footer>ja<header> tai <nav> Elementin jälkeläis-elementit.

Esimerkki

Esimerkki 1

Määritä dokumentin pääsisältö:

<main>
  <h1>Suosituimmat selaimet</h1>
  <p>Chrome, Firefox ja Edge ovat nykyisin eniten käytettyjä selaimia.</p>
  <article>
    <h2>Google Chrome</h2>
    <p>Google Chrome on Google kehittämä verkkoselain, julkaistu vuonna 2008......</p>
  </article>
  <article>
    <h2>Mozilla Firefox</h2>
    <p>Mozilla Firefox on Mozilla:n kehittämä avoimen lähdekoodin verkkoselain......&</p>
  </article>
  <article>
    <h2>Microsoft Edge</h2>
    <p>Microsoft Edge on Microsoftin kehittämä verkkoselain, joka julkaistiin vuonna 2015......&</p>
  </article>
</main>

Kokeile itse

Esimerkki 2

CSS:n avulla asetettu <main> Elementin tyyli:

<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>Suosituimmat selaimet</h1>
  <p>Chrome, Firefox ja Edge ovat nykyisin eniten käytettyjä selaimia.</p>
  <article>
    <h2>Google Chrome</h2>
    <p>Google Chrome on Google kehittämä verkkoselain, julkaistu vuonna 2008......</p>
  </article>
  <article>
    <h2>Mozilla Firefox</h2>
    <p>Mozilla Firefox on Mozilla:n kehittämä avoimen lähdekoodin verkkoselain......&</p>
  </article>
  <article>
    <h2>Microsoft Edge</h2>
    <p>Microsoft Edge on Microsoftin kehittämä verkkoselain, joka julkaistiin vuonna 2015......&</p>
  </article>
</main>
</body>
</html>

Kokeile itse

Globaalit määrittimet

<main> Tunniste tukee myös HTML:n globaalit määrittimet.

Tapahtumamäärittimet

<main> Tunniste tukee myös HTML:n tapahtumamäärittimet.

Selaimen tuki

Taulukossa olevat numerot osoittavat ensimmäisen täysin tukevan selaimen version.

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