Znasz już header i footer. Czas na poziom wyżej. Poznaj tag <aside> do pasków bocznych, <figure> do profesjonalnych podpisów pod zdjęciami oraz magiczny tag <details>, którym stworzysz rozwijane sekcje (np. FAQ) bez użycia JavaScriptu!
Kluczowe zagadnienia:
- Tag
<aside>(treści poboczne). - Tagi
<figure>i<figcaption>. - Interaktywny element
<details>i<summary>.
Pytania do filmu:
- Do jakiego typu treści służy znacznik
<aside>? (Odp: Panel boczny / treści dodatkowe). - Jaki znacznik służy do grupowania zdjęcia z jego podpisem?
- Gdzie wpisujemy tekst podpisu pod zdjęciem wewnątrz
<figure>? (Odp:<figcaption>). - Jaki tag tworzy rozwijaną sekcję (np. „Pokaż więcej”)? (Odp:
<details>). - Jaki tag wewnątrz
<details>jest widocznym nagłówkiem, w który się klika? (Odp:<summary>). - Czy
<details>wymaga JavaScriptu do działania? (Odp: Nie). - Czy
<aside>musi być zawsze z boku strony? (Odp: Semantycznie tak, wizualnie zależy od CSS). - Do czego najczęściej używamy zestawu details+summary? (Odp: FAQ / Najczęstsze pytania).
- Co oznacza, jeśli dodamy atrybut
opendo<details>? (Odp: Będzie domyślnie otwarty). - Czy
<figcaption>można użyć bez<figure>? (Odp: Nie, muszą być razem).