Ostatnio edytowany:

main

Autor: Virtual Patriot

Przeznaczenie elementu main

Element main reprezentuje zawartość, którą powinny być elementy HTML, których zawartość reprezentuje główną treść części BODY danego dokumentu HTML.

W elemencie "main" nie powinna znajdować się zawartość, która powtarzana jest w obrębie wszystkich podstron danego serwisu internetowego, np. zawartość głównego nagłówka strony, zawartość głównej stopki strony, zawartość głównego menu nawigacji itp.

Maksymalnie jeden element "main" może znaleźć się w części BODY dokumentu HTML.

Dodatkowe techniczne informacje o elemencie main

kategoria ogólna
kontekst zewnętrzny
element HTML, który tworzy wewnętrzny kontekst opływający, lecz nie następujące elementy HTML jako elementy przodkowie: article, aside, footer, header, nav

Przykładowy Kod HTML

<body>
  <h1>Rzeczowy blog o rzeczach</h1>

  <main>
    <article>
      <h2>Mój ulubiony owoc</h2>
      <p>Moim ulubionym owocem jest czereśnia.</p>
    </article>

    <article>
      <h2>Moje ulubione zwierzę</h2>
      <p>Moim ulubionym zwierzęciem jest lew.</p>
    </article>

    <article>
      <h2>Mój ulubiony kwiat</h2>
      <p>Moim ulubionym kwiatem jest róża.</p>
    </article>
  </main>
</body>

Kontekstem zewnętrznym przykładowego elementu "main" jest element "body". Wspomniany element "body" jest jednym z elementów HTML, które tworzą wewnętrzny kontekst opływający. Ponadto elementami przodkami wspomnianego elementu "main" nie są elementy HTML, które są zakazanymi elementami przodkami elementu "main", dlatego w tej sytuacji wspomniany kontekst zewnętrzny, czyli element "body", jest prawidłowym kontekstem zewnętrznym dla elementu "main".

kontekst wewnętrzny
zawartość opływająca

Przykładowy Kod HTML

<body>
  <h1>Rzeczowy blog o rzeczach</h1>

  <main>
    <article>
      <h2>Mój ulubiony owoc</h2>
      <p>Moim ulubionym owocem jest czereśnia.</p>
    </article>

    <article>
      <h2>Moje ulubione zwierzę</h2>
      <p>Moim ulubionym zwierzęciem jest lew.</p>
    </article>

    <article>
      <h2>Mój ulubiony kwiat</h2>
      <p>Moim ulubionym kwiatem jest róża.</p>
    </article>
  </main>
</body>

Kontekstem wewnętrznym przykładowego elementu "main" są wyłącznie elementy HTML, które należą do kategorii zawartość opływająca, dlatego w tej sytuacji wspomniany kontekst wewnętrzny, czyli element "article", element "article" oraz element "article", jest prawidłowym kontekstem wewnętrznym dla elementu "main".

wymagane elementy dzieci

brak

wymagane atrybuty

brak

składnia HTML

<main> ... </main>

pominięcie tagu na początku

nigdy

pominięcie tagu na końcu

nigdy

CSS display

block

Dodatkowe domyślne reguły CSS elementu main

main {
  display:block;
}

Interpretacja elementu main

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

nie

Edge

tak

Zobacz więcej informacji o interpretacji elementu .