Tag HTML <main>

Definicja i zastosowanie

<main> Tag <main> określa główną zawartość dokumentu.

<main> Zawartość elementu powinna być unikalna dla dokumentu. Nie powinna zawierać powtarzających się treści z innych dokumentów, takich jak panel boczny, linki nawigacyjne, informacje o prawach autorskich, logo strony i formularze wyszukiwania itp.

Uwaga:W dokumencie nie może być wielu Element <main>. Element <main> nie może być <article>,<aside>,<footer>,<header> lub <nav> Potomkowie elementu.

Przykład

Przykład 1

Określenie głównego zawartości dokumentu:

<main>
  <h1>Najbardziej popularne przeglądarki</h1>
  <p>Chrome, Firefox i Edge są najczęściej używanymi przeglądarkami.</p>
  <article>
    <h2>Google Chrome</h2>
    <p>Google Chrome to przeglądarka internetowa opracowana przez Google, wydana w 2008 roku......</p>
  </article>
  <article>
    <h2>Mozilla Firefox</h2>
    <p>Mozilla Firefox to otwarty kod źródłowy przeglądarki internetowej opracowanej przez Mozilla......&</p>
  </article>
  <article>
    <h2>Microsoft Edge</h2>
    <p>Microsoft Edge to przeglądarka internetowa opracowana przez Microsoft, wydana w 2015 roku......&</p>
  </article>
</main>

Spróbuj sam

Przykład 2

Ustawienia CSS <main> Styl elementu:

<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>Najbardziej popularne przeglądarki</h1>
  <p>Chrome, Firefox i Edge są najczęściej używanymi przeglądarkami.</p>
  <article>
    <h2>Google Chrome</h2>
    <p>Google Chrome to przeglądarka internetowa opracowana przez Google, wydana w 2008 roku......</p>
  </article>
  <article>
    <h2>Mozilla Firefox</h2>
    <p>Mozilla Firefox to otwarty kod źródłowy przeglądarki internetowej opracowanej przez Mozilla......&</p>
  </article>
  <article>
    <h2>Microsoft Edge</h2>
    <p>Microsoft Edge to przeglądarka internetowa opracowana przez Microsoft, wydana w 2015 roku......&</p>
  </article>
</main>
</body>
</html>

Spróbuj sam

Globalne atrybuty

<main> Tag również obsługuje Globalne atrybuty HTML.

Atrybuty wydarzeń

<main> Tag również obsługuje Atrybuty wydarzeń w HTML.

Obsługa przeglądarek

Liczby w tabeli wskazują na pierwszą wersję przeglądarki, która w pełni obsługuje ten tag.

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