summary

Element summary reprezentuje nagłówek pełniący rolę objaśnienia treści reprezentowanej przez zawartość elementu details, do którego należy dany element summary.

brak

kategoria ogólna

brak

kontekst zewnętrzny

jako pierwszy element dziecko elementu details

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 "summary" jest element "details", dla którego wspomniany element "summary" jest pierwszym elementem dzieckiem, dlatego w tej sytuacji wspomniany kontekst zewnętrzny, czyli element "details", jest prawidłowym kontekstem zewnętrznym dla elementu "summary".

kontekst wewnętrzny

• zawartość frazowana

  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 "summary" jest wyłącznie tekst. Wspomniany tekst jest jednym z elementów, które należą do kategorii zawartość frazowana, dlatego w tej sytuacji wspomniany kontekst wewnętrzny, czyli ciąg znaków "Lista dopuszczalnych typów pliku:", jest prawidłowym kontekstem wewnętrznym dla elementu "summary".

• dokładnie jeden element HTML należący do kategorii nagłówek zawartości

  Przykładowy Kod HTML

  <form>
    <label>
      Wybierz plik:
      <input type="file" accept=".html, .css, .js">
    </label>
  
    <details>
      <summary>
        <h4>Lista dopuszczalnych typów pliku:</h4>
      </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 "summary" jest wyłącznie jeden element HTML należący do kategorii nagłówek zawartości, dlatego w tej sytuacji wspomniany kontekst wewnętrzny, czyli element "h4", jest prawidłowym kontekstem wewnętrznym dla elementu "summary".

wymagane elementy dzieci

brak

wymagane atrybuty

brak

zdolność fallback

nie dotyczy

składnia HTML

<summary> ... </summary>

pominięcie tagu na początku

nigdy

pominięcie tagu na końcu

nigdy

CSS display

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

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

/* wszystkie reguły CSS, jeżeli przeglądarka internetowa interpretuje element "summary" */

summary {
  display:block;
}

summary:focus {
  outline-width:1px;
  outline-style:dotted;
}

tak

tak

tak

tak

nie

tak

Zobacz więcej informacji o interpretacji elementu summary.