Autor publikacji
Virtual Patriot - Administrator

main

Data publikacji
Ostatnio edytowano

Przeznaczenie elementu main

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

W elemencie main nie powinna znajdować się zawartość, która jest powtarzana 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 strony itp.

Maksymalnie tylko jeden widoczny element "main" może znajdować się w części BODY dokumentu HTML. Jeżeli chcemy umieścić większą liczbę elementów "main" w części BODY dokumentu HTML, wtedy pozostałe elementy "main" muszą posiadać atrybut hidden.

Dodatkowe artykuły związane z elementem main

Informacje techniczne 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

zdolność fallback

nie dotyczy

składnia HTML

<main> ... </main>

pominięcie tagu na początku

nigdy

pominięcie tagu na końcu

nigdy

CSS display

  • block (jeżeli przeglądarka internetowa interpretuje element main)

  • inline (jeżeli przeglądarka internetowa nie interpretuje elementu main)

Przypuszczalnie domyślne reguły CSS elementu main

/* jeżeli przeglądarka internetowa interpretuje element "main" */
main {
  display:block;
}

Interpretacja elementu main

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak, lecz od wersji 9

Edge

tak

Zobacz więcej informacji o interpretacji elementu .