details

Element details reprezentuje zawartość, którą powinna być treść, z której użytkownik może uzyskać dodatkowe informacje na temat treści reprezentowanej przez pozostałą zawartość, do której należy dany element details lub z której użytkownik może uzyskać dodatkową kontrolę nad treścią reprezentowaną przez pozostałą zawartość, do której należy dany element details.

brak

kategoria ogólna

• zawartość opływająca

• korzeń sekcji

• zawartość interaktywna

• zawartość namacalna

kontekst zewnętrzny

element HTML, który tworzy wewnętrzny kontekst opływający

Przykładowy Kod HTML

<form>
  <label>
    Wybierz plik:
    <input type="file" accept=".html, .css, .js">
  </label>

  <details>
    <summary>Lista dopuszczalnych typów pliku:</summary>

    <ul>
      <li>Plik HTML</li>
      <li>Plik CSS</li>
      <li>Plik JS</li>
    </ul>

    <p>
      <b>Możesz wybrać tylko jeden plik.</b>
    </p>
  </details>
</form>

Kontekstem zewnętrznym przykładowego elementu "details" jest element "form". Wspomniany element "form" jest jednym z elementów HTML, które tworzą wewnętrzny kontekst opływający, dlatego w tej sytuacji wspomniany kontekst zewnętrzny, czyli element "form", jest prawidłowym kontekstem zewnętrznym dla elementu "details".

kontekst wewnętrzny

dokładnie jeden element summary, a następnie zawartość opływająca

Przykładowy Kod HTML

<form>
  <label>
    Wybierz plik:
    <input type="file" accept=".html, .css, .js">
  </label>

  <details>
    <summary>Lista dopuszczalnych typów pliku:</summary>

    <ul>
      <li>Plik HTML</li>
      <li>Plik CSS</li>
      <li>Plik JS</li>
    </ul>

    <p>
      <b>Możesz wybrać tylko jeden plik.</b>
    </p>
  </details>
</form>

Kontekstem wewnętrznym przykładowego elementu "details" są wyłącznie elementy HTML, które należą do kategorii zawartość opływająca oraz które występują po dokładnie jednym elemencie "summary", dlatego w tej sytuacji wspomniany kontekst wewnętrzny, czyli element "summary", element "ul" oraz element "p", jest prawidłowym kontekstem wewnętrznym dla elementu "details".

wymagane elementy dzieci

element summary jako pierwszy element dziecko

wymagane atrybuty

brak

zdolność fallback

nie dotyczy

składnia HTML

<details> ... </details>

pominięcie tagu na początku

nigdy

pominięcie tagu na końcu

nigdy

CSS display

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

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

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

tak

tak

tak

tak

nie

tak

Zobacz więcej informacji o interpretacji elementu details.