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 .