Wyjaśnienie elementu aside

Przeznaczenie elementu `aside`

Element aside reprezentuje sekcję typu aside, której zawartość powinna reprezentować treść poboczną, czyli taką treść, która po usunięciu z zawartości dokumentu HTML nie wpłynęłaby w żaden sposób na znaczenie treści reprezentowanej przez zawartość elementów HTML, które pozostały w zawartości wspomnianego dokumentu HTML. Zawartością elementu aside może być: reklama, poboczna nawigacja do innych stron internetowych, poboczne oznaczenie, mało ważny dodatek do treści (głosowanie, sondy itp.) oraz każda inna treść, którą uznamy za wspomnianą treść poboczną.

Dodatkowe techniczne informacje o elemencie `aside`

kategoria ogólna

kontekst zewnętrzny

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

Przykładowy Kod HTML

<body>
  <h1>Sprzedaż sztucznych owoców</h1>

  <aside>
    <h2>Reklama</h2>
    <a href="owoce-reklama-01.html">
      <img src="owoce-01.png" alt="sztuczne owoce">
    </a>
  </aside>

  <article>
    <h2>Czereśnia</h2>
    <img src="owoc-01.png" alt="zdjęcie czereśni">
  </article>

  <article>
    <h2>Truskawka</h2>
    <img src="owoc-02.png" alt="zdjęcie truskawki">
  </article>

  <article>
    <h2>Kiwi</h2>
    <img src="owoc-03.png" alt="zdjęcie kiwi">
  </article>
</body>

Kontekstem zewnętrznym przykładowego elementu "aside" jest element "body". Wspomniany element "body" 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 "body", jest prawidłowym kontekstem zewnętrznym dla elementu "aside".

kontekst wewnętrzny

zawartość opływająca, lecz nie element main jako element potomek

Przykładowy Kod HTML

<body>
  <h1>Sprzedaż sztucznych owoców</h1>

  <aside>
    <h2>Reklama</h2>
    <a href="owoce-reklama-01.html">
      <img src="owoce-01.png" alt="sztuczne owoce">
    </a>
  </aside>

  <article>
    <h2>Czereśnia</h2>
    <img src="owoc-01.png" alt="zdjęcie czereśni">
  </article>

  <article>
    <h2>Truskawka</h2>
    <img src="owoc-02.png" alt="zdjęcie truskawki">
  </article>

  <article>
    <h2>Kiwi</h2>
    <img src="owoc-03.png" alt="zdjęcie kiwi">
  </article>
</body>

Kontekstem wewnętrznym przykładowego elementu "aside" są wyłącznie elementy HTML, które należą do kategorii zawartość opływająca oraz które nie są zakazanym kontekstem wewnętrznym elementu "aside", dlatego w tej sytuacji wspomniany kontekst wewnętrzny, czyli element "h2" oraz element "a", jest prawidłowym kontekstem wewnętrznym dla elementu "aside".

wymagane elementy dzieci