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 .