Lekcja 9.6: Panel boczny (<aside>)
Oznaczanie treści pobocznych
Element <aside> jest semantycznym znacznikiem HTML5 służącym do oznaczania treści, która jest tylko luźno powiązana z główną treścią strony lub jej otoczeniem, i która mogłaby być uznana za treść poboczną lub oddzieloną od głównego przepływu.
Treść wewnątrz <aside> często jest prezentowana jako panel boczny (sidebar), ale nie jest to wymagane. Kluczowe jest jej semantyczne znaczenie jako treści dodatkowej, uzupełniającej, ale nie kluczowej dla zrozumienia głównej zawartości.
Kiedy używać <aside>?
Typowe zastosowania elementu <aside> to:
- Panele boczne (sidebars): Zawierające np. dodatkową nawigację, listę powiązanych artykułów, najnowsze komentarze, biogram autora.
- Reklamy: Bloki reklamowe często są treścią poboczną w stosunku do głównej zawartości.
- Cytaty lub dygresje: Wyciągnięte fragmenty tekstu (pull quotes) lub dygresje, które są związane z główną treścią, ale stanowią pewne odejście od głównego wątku.
- Glosariusz lub definicje: Wyjaśnienia terminów użytych w głównej treści.
- Informacje dodatkowe: Np. informacje o pogodzie, kursach walut, jeśli nie są one głównym tematem strony.
<aside> a kontekst
Znaczenie <aside> zależy od kontekstu, w jakim jest użyty:
- Gdy
<aside>jest wewnątrz<article>: Jego treść powinna być luźno powiązana z treścią tego konkretnego artykułu (np. glosariusz terminów użytych w artykule, biografia autora artykułu). - Gdy
<aside>jest poza<article>(ale np. wewnątrz<main>lub bezpośrednio w<body>): Jego treść powinna być luźno powiązana z całą stroną (np. główny panel boczny z linkami, reklamy).
Przykład panelu bocznego (sidebar) na stronie:
<body>
<header>...</header>
<div class="layout-container">
<main>
<article>
<h2>Główny artykuł</h2>
<p>Treść głównego artykułu...</p>
</article>
</main>
<aside class="sidebar"> <!-- Panel boczny powiązany z całą stroną -->
<section>
<h3>Popularne posty</h3>
<ul>
<li><a href="#">Post 1</a></li>
<li><a href="#">Post 2</a></li>
</ul>
</section>
<section>
<h3>Reklama</h3>
<img src="reklama.jpg" alt="Reklama">
</section>
</aside>
</div>
<footer>...</footer>
</body>Uwaga: W przykładzie użyto dodatkowego <div class="layout-container"> do celów układu (np. za pomocą CSS Flexbox lub Grid), aby umieścić <main> i <aside> obok siebie.
Przykład <aside> wewnątrz <article>:
<article>
<h2>Historia odkrycia penicyliny</h2>
<p>Alexander Fleming, szkocki bakteriolog, w 1928 roku zauważył...</p>
<aside> <!-- Dygresja lub informacja dodatkowa w artykule -->
<h4>Ciekawostka</h4>
<p>Pleśń Penicillium notatum, która zanieczyściła płytki Fleminga, jest stosunkowo rzadka.</p>
</aside>
<p>Dalsze badania prowadzone przez Florey'a i Chaina pozwoliły na...</p>
</article><aside> a inne znaczniki
<aside>vs<div>: Używaj<aside>, gdy treść jest semantycznie poboczna. Używaj<div>do grupowania bez nadawania specjalnego znaczenia semantycznego lub tylko do stylizacji.<aside>vs<section>:<section>grupuje główną treść tematycznie.<aside>zawiera treść luźno powiązaną, dodatkową. Panel boczny (<aside>) może zawierać w sobie różne sekcje (<section>), np. sekcję "Popularne posty" i sekcję "Reklama".
Zadanie praktyczne (z rozwiązaniem)
Zadanie: Do strony z przepisem kulinarnym z poprzedniej lekcji dodaj element <aside> obok głównego <article> (ale wewnątrz <main>). Wewnątrz <aside> umieść sekcję z linkami do podobnych przepisów.
Rozwiązanie:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Przepis z Panelem Bocznym</title>
<style>
body { font-family: sans-serif; }
.container { display: flex; /* Użycie Flexbox do układu */ gap: 20px; max-width: 1000px; margin: auto; }
main { flex: 3; /* Główna treść zajmuje 3/4 szerokości */ }
aside { flex: 1; /* Panel boczny zajmuje 1/4 szerokości */ border-left: 1px solid #eee; padding-left: 15px; }
article { border: 1px solid #ccc; padding: 15px; }
article header h2 { margin-top: 0; }
section { margin-top: 20px; padding-top: 10px; border-top: 1px dashed #eee; }
section h3 { margin-top: 0; }
aside h3 { margin-top: 0; }
</style>
</head>
<body>
<header> <!-- Główny nagłówek (poza .container dla pełnej szerokości) -->
<h1>Przepisy Kulinarne</h1>
</header>
<div class="container"> <!-- Kontener dla układu main + aside -->
<main>
<article>
<header>
<h2>Przepis na Domową Szarlotkę</h2>
</header>
<section id="skladniki" aria-labelledby="skladniki-heading">
<h3 id="skladniki-heading">Składniki</h3>
<!-- ... lista składników ... -->
</section>
<section id="przygotowanie" aria-labelledby="przygotowanie-heading">
<h3 id="przygotowanie-heading">Przygotowanie</h3>
<!-- ... instrukcje ... -->
</section>
<footer>
<p>Smacznego!</p>
</footer>
</article>
</main>
<aside> <!-- Panel boczny -->
<section aria-labelledby="podobne-heading">
<h3 id="podobne-heading">Podobne przepisy</h3>
<ul>
<li><a href="/przepis/placek-drozdzowy">Placek drożdżowy z owocami</a></li>
<li><a href="/przepis/sernik">Sernik tradycyjny</a></li>
<li><a href="/przepis/ciasto-marchewkowe">Ciasto marchewkowe</a></li>
</ul>
</section>
<section aria-labelledby="reklama-heading">
<h3 id="reklama-heading">Reklama</h3>
<p>Miejsce na reklamę...</p>
</section>
</aside>
</div>
<footer> <!-- Główna stopka (poza .container dla pełnej szerokości) -->
<p>© 2025 Przepisy Kulinarne</p>
</footer>
</body>
</html>W tym rozwiązaniu użyliśmy prostego układu Flexbox, aby umieścić <main> i <aside> obok siebie. Element <aside> zawiera sekcję z podobnymi przepisami, co jest typowym przykładem treści pobocznej.
Dodatkowe zadania do samodzielnego wykonania:
- Dodaj drugi element
<aside>wewnątrz<article>z przepisem, zawierający np. krótką historię szarlotki. - Zmień układ strony tak, aby panel boczny
<aside>znajdował się po lewej stronie<main>. - W panelu bocznym dodaj sekcję z informacjami o autorze strony (jeśli strona ma jednego autora).
Najczęściej zadawane pytania
Do czego służy znacznik <aside>?
Do oznaczania treści, która jest tylko luźno powiązana z główną zawartością strony lub jej otoczeniem, np. panele boczne, reklamy, dygresje, dodatkowe informacje.
Czy <aside> zawsze oznacza panel boczny (sidebar)?
Niekoniecznie. Chociaż często jest używany do tworzenia paneli bocznych, jego semantyczne znaczenie to treść poboczna, niezależnie od jej wizualnego umiejscowienia na stronie.
Gdzie umieszczać <aside> w strukturze HTML?
Może być umieszczony wewnątrz <article> (jeśli dotyczy treści artykułu) lub poza <article>, np. jako rodzeństwo <main> lub wewnątrz <main> (jeśli dotyczy całej strony).
Czym różni się <aside> od <section>?
<section> grupuje główną treść tematycznie. <aside> zawiera treść poboczną, luźno powiązaną. Panel boczny (<aside>) może zawierać w sobie różne sekcje (<section>).
Czy reklamy powinno się umieszczać w <aside>?
Tak, reklamy są zazwyczaj treścią poboczną w stosunku do głównej zawartości strony, więc umieszczenie ich w <aside> jest semantycznie poprawne.