Sémantický element
<aside>
Obsah stranou. Souvisí s okolím, ale bez něj by hlavní text pořád dával smysl.
V náhledu vidíte, kam se dostaneme. Skrolujte dolů a postavíme to krok za krokem.
Zápis
Tip uprostřed článku
Rámeček s tipem nebo zajímavostí je typický aside. Když ho přeskočíte, o nic důležitého nepřijdete.
Zápis
Sidebar stránky
Druhé typické použití: panel vedle hlavního obsahu, třeba se souvisejícími články. Článek a panel zabalíme do společného wrapperu.
Atributy
Dva různé panely
aside má jen globální atributy. Třídy odliší tip od sidebaru a aria-label panel pojmenuje pro screen readery.
Styl
Rámeček s tipem
Tlumený podklad a barevný proužek vlevo. Tip je vidět, ale nepřekřikuje text.
Styl
Panel vedle článku
Grid dá článku zbytek šířky a panelu pevných 200 pixelů.
Responzivita
Na mobilu panel pod článkem
Na telefonu není místo na dva sloupce, grid bude mít jen jeden.
Panel je pod článkem, protože je tak zapsaný v HTML. Pořadí v kódu je pořadí na mobilu, proto patří hlavní obsah v kódu na první místo.
Shrnutí
Kdy použít aside
Ano
- tip, poznámka nebo zajímavost k textu
- sidebar se souvisejícím obsahem
- reklama nebo upoutávka mimo hlavní obsah
Ne
- obsah, bez kterého by text nedával smysl
- cokoli, co je jen vizuálně „na boku“, ale patří k hlavnímu textu