Ostatnio edytowany:

aside

Autor: Virtual Patriot

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

brak

wymagane atrybuty

brak

składnia HTML

<aside> ... </aside>

pominięcie tagu na początku

nigdy

pominięcie tagu na końcu

nigdy

CSS display

block

Dodatkowe domyślne reguły CSS elementu aside

aside {
  display:block;
}

Interpretacja elementu aside

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 .