Az <aside> címke Kiegészítő tartalmak és oldalsávok
A <aside> egy HTML5 szemantikus címke, amelyet kiegészítő tartalmak elhelyezésére használunk. Tipikusan oldalsávokban, hirdetésekhez, kapcsolódó cikkekhez vagy egyéb másodlagos információkhoz alkalmazzuk.
Ebben a bejegyzésben megnézzük, hogyan használhatod a <aside> címkét, milyen tartalmak illenek bele, és milyen gyakori hibákat érdemes elkerülni.
🔹 1. Mi az <aside> címke szerepe?
A <aside> címke másodlagos, az oldal fő tartalmához lazán kapcsolódó információkat tartalmaz.
💡 Fontos tudni:
✔ Nem része a fő tartalomnak, inkább kiegészítő információkat tartalmaz.
✔ Oldalsávként (sidebar) vagy cikkekhez kapcsolódó extra tartalomként is használható.
✔ Segít a keresőmotoroknak és a felhasználóknak megérteni az oldal szerkezetét.
🔹 2. Hogyan néz ki az <aside> a HTML-ben?
Az <aside> gyakran az oldalsávban található, de lehet egy cikkhez kapcsolódó extra információ is.
📌 Példa egy alapvető <aside> szerkezetre
<aside>
<h2>Kapcsolódó cikkek</h2>
<ul>
<li><a href=”cikk1.html”>HTML alapjai</a></li>
<li><a href=”cikk2.html”>CSS bevezetés</a></li>
<li><a href=”cikk3.html”>Reszponzív webdesign</a></li>
</ul>
</aside>
💡 Mit látunk itt?
✔ A <h2> egy alcím, amely leírja az oldalsáv tartalmát.
✔ A <ul> lista tartalmazza a kapcsolódó cikkek linkjeit.
Azt is elvárnánk egy ilyen címkétől, hogy oldalt jelenítse meg a szöveget, de az <aside> címke alapértelmezés szerint blokkszintű elem, ami azt jelenti, hogy mindig új sorba kerül és teljes szélességet foglal el. Ahhoz, hogy az oldalsávként jelenjen meg, szükséged van CSS-re, amely float (régebbi megoldás) vagy flexbox/grid segítségével helyezi el a megfelelő pozícióba. Erről majd később lesz szó.
🔹 3. Milyen tartalmak illenek az <aside>-ba?
A <aside> leggyakrabban az alábbi típusú kiegészítő információkat tartalmazza:
📌 1️⃣ Oldalsáv (sidebar) a fő tartalom mellett
<aside>
<h2>Rólunk</h2>
<p>Ez a weboldal segít elsajátítani a webfejlesztés alapjait.</p>
</aside>
✔ Egy rövid bemutatkozó szöveg, amely nem a fő tartalom része, de hasznos lehet a látogatóknak.
📌 2️⃣ Hirdetések és promóciók
<aside>
<h2>Hirdetés</h2>
<a href=”https://example.com”>
<img src=”hirdetes.jpg” alt=”Reklám”>
</a>
</aside>
✔ A <aside> megfelelő hely hirdetések elhelyezésére is.
📌 3️⃣ Kapcsolódó tartalmak egy blogcikk mellett
<<article>
<h1>Mi az a HTML5?</h1>
<p>A HTML5 egy modern szabvány…</p>
<aside>
<h2>További olvasnivaló</h2>
<ul>
<li><a href=”html-tortenelem.html”>A HTML története</a></li>
<li><a href=”html5-ujdonsagok.html”>A HTML5 újdonságai</a></li>
</ul>
</aside>
</article>
✔ Ebben a példában az <aside> egy cikken belül jelenik meg, kiegészítő információkkal.
🔹 4. Gyakori hibák és hogyan kerüld el őket
📌 1️⃣ Az <aside> nem helyettesítheti a fő tartalmat
🚨 Hiba:
<aside>
<h1>HTML Tanfolyam</h1>
<p>Tanuld meg a HTML alapjait.</p>
</aside>
❌ Mi a probléma?
- Az
<aside>nem a fő tartalom megjelenítésére való! Az ilyen tartalmaknak<article>vagy<main>elemen belül kell lenniük.
📌 2️⃣ Nem megfelelő helyen lévő <aside>
🚨 Hiba:
<head>
<aside>
<p>Ez egy oldalsáv.</p>
</aside>
</head>
❌ Mi a probléma?
- Az
<aside>mindig a<body>-n belül kell, hogy legyen, nem pedig a<head>részben.
📌 3️⃣ Nem kapcsolódik a fő tartalomhoz
🚨 Hiba:
<article>
<h1>CSS Alapok</h1>
<p>CSS segít a weboldalak stílusának meghatározásában.</p>
<aside>
<h2>Kapcsolódó cikkek</h2>
<ul>
<li><a href=”recept.html”>Hogyan készítsünk palacsintát?</a></li>
</ul>
</aside>
</article>
❌ Mi a probléma?
- A kapcsolódó cikkek nem kapcsolódnak a fő tartalomhoz. Az
<aside>-ban lévő információknak relevánsnak kell lenniük a fő tartalomhoz.
🔹 5. Összegzés – Miért fontos az <aside>?
✔ A <aside> kiegészítő információkat tartalmaz, amelyek az oldal fő tartalmához kapcsolódnak.
✔ Oldalsávként (sidebar) vagy egy cikk mellett extra tartalomként is használható.
✔ Használható kapcsolódó cikkek, reklámok, rövid bemutatkozások és egyéb információk megjelenítésére.
✔ Ne helyettesítse a fő tartalmat, és mindig kapcsolódjon az oldal többi részéhez!
📌 Kapcsolódó bejegyzések:
🔗 A <nav> címke – A weboldalak navigációs rendszere
🔗 A <header> címke – Weboldalak fejlécének szerepe
🔗 A <footer> címke – A lábléc megfelelő kialakítása