aside — treść uzupełniająca
Używanie aside do pasków bocznych i treści luźno powiązanych z główną zawartością
aside — treść uzupełniająca to bezpłatna lekcja HTML Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej HTML Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs HTML Academy zawiera 4 lekcji w sumie.
Element aside
Element <aside> oznacza treść pobocznie powiązaną z otaczającą treścią:
- Można ją oddzielić od głównej treści bez utraty znaczenia tej głównej treści
- Pomyśl o: paskach bocznych, wyróżnionych polach, cytatach wyróżnionych i reklamach
aside w artykule
Wewnątrz artykułu aside oznacza informacje powiązane z narracją, ale nieistotne dla jej zrozumienia:
<article>
<h2>How the Internet Works</h2>
<p>The Internet is a global network of computers...</p>
<aside>
<h3>Did You Know?</h3>
<p>The first email was sent in 1971 by Ray Tomlinson.</p>
</aside>
<p>Data travels in packets across routers...</p>
</article>aside na poziomie strony
Na poziomie strony element aside służy do tworzenia pasków bocznych:
<div class="layout">
<main>
<article>...</article>
</main>
<aside>
<h2>Related Articles</h2>
<ul>...</ul>
<h2>Newsletter</h2>
<p>Subscribe for updates.</p>
</aside>
</div>Rola ARIA elementu aside
Element <aside> na poziomie strony jest mapowany na role="complementary":
<aside aria-label="Related resources">
<h2>Related resources</h2>
...
</aside>
<!-- Multiple asides should be uniquely labeled
Screen reader users can jump directly to complementary regions -->Cytaty wyróżnione z aside
Cytaty wyróżnione (fragmenty cytatów wyodrębnione dla uzyskania efektu wizualnego) można oznaczać jako aside:
<aside class="pullquote">
<blockquote>
<p>HTML is the foundation of the web — learn it well.</p>
</blockquote>
</aside>Reklamy z aside
Jednostki reklamowe na paskach bocznych można oznaczać jako aside:
<aside aria-label="Advertisement">
<p class="sr-only">Advertisement</p>
<img src="ad.jpg" alt="Learn JavaScript online — 50% off">
</aside>aside a section
Kluczowe rozróżnienie:
<aside>— pobocznie powiązany z główną treścią; dodatkowy<section>— tematycznie należący do głównej treści
aside dla terminów w glosariuszu
Elementu aside należy używać do definiowania terminów użytych w artykule:
<article>
<p>The DOM (Document Object Model) is updated when...</p>
<aside id="dom-def">
<dl>
<dt>DOM</dt>
<dd>Document Object Model — the browser's tree representation of an HTML page.</dd>
</dl>
</aside>
</article>Wiele sekcji paska bocznego
Element aside tworzący pasek boczny może zawierać wiele niezależnych sekcji:
<aside aria-label="Sidebar">
<section>
<h2>About the Author</h2>
<p>Jane Smith is a senior web developer...</p>
</section>
<section>
<h2>Popular Posts</h2>
<ul>...</ul>
</section>
</aside>aside nie wymaga nagłówka
W przeciwieństwie do section element aside nie wymaga bezwzględnie nagłówka:
<!-- Valid aside without heading: -->
<aside>
<img src="banner.jpg" alt="20% off this week only">
</aside>
<!-- But adding a heading (even visually hidden) improves accessibility -->
<aside>
<h2 class="sr-only">Promotions</h2>
<img src="banner.jpg" alt="20% off this week only">
</aside>aside nie służy do stylizacji treści pobocznej
Aside ma znaczenie semantyczne — nie należy używać go wyłącznie do wizualnego układu paska bocznego:
<!-- BAD: aside used for layout only -->
<aside class="right-column"> <!-- no semantic relationship to main content -->
<div class="ad">...</div>
</aside>
<!-- GOOD: aside for related content -->
<main><!-- article content --></main>
<aside><!-- genuinely related supplementary info --></aside>Szybkie sprawdzenie
Na jaką rolę punktu orientacyjnego ARIA jest mapowany element aside na poziomie strony?
Podsumowanie: aside
Najważniejsze informacje o aside:
- Treść pobocznie powiązana z otaczającą treścią
- Pasek boczny na poziomie strony → punkt orientacyjny complementary
- Wewnątrz artykułu → dodatkowe informacje (definicje terminów, wyróżnione pola)
- Wiele elementów aside należy opisywać za pomocą aria-label
- Nie służy do tworzenia wyłącznie układu — do tego należy użyć div
Często zadawane pytania
Czy lekcja „aside — treść uzupełniająca” jest bezpłatna?
Tak — pełny tekst „aside — treść uzupełniająca” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu HTML Academy, przejdź na CoddyKit PRO. Kurs HTML Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „aside — treść uzupełniająca”?
Używanie aside do pasków bocznych i treści luźno powiązanych z główną zawartością Ćwiczysz HTML Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć HTML Academy?
Nie wymagamy żadnego doświadczenia. HTML Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.
Ile czasu zajmuje lekcja „aside — treść uzupełniająca”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji HTML Academy?
Tak. Każda lekcja HTML Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- aside — treść uzupełniająca
- figure i figcaption — powtórzenie
- details i summary — widżet ujawniania treści
- Elementy progress i meter