Wstawka <aside>

W jaki sposób w HTML5 powinno się wstawiać elementy, powiązane tematycznie z artykułem na stronie?

<aside>...</aside>

Wstawka reprezentuje sekcję na stronie, która jest tylko nieznacznie powiązana tematycznie z treścią elementu, w którym się znajduje. Jednocześnie gdybyśmy usunęli taką sekcję z dokumentu, zarówno sam artykuł jaki i wyrwana z kontekstu sekcja nie utracą sensu ani swojej wewnętrznej kompletności. Typowe przeznaczenie: cytaty umieszczone w treści artykułu w postaci osobno wyróżnionych bloków, bannery reklamowe, grupy linków nawigacyjnych.

Element ten nie nadaje się do oznaczania uwag na marginesie. Co prawda bez nich sam artykuł nie utraci swojego sensu, ale uwagi takie tracą sens, gdy zostaną wyrwane z kontekstu.

Przykład <aside>

W artykule na temat komputerów możemy umieścić wstawkę dotyczącą np. laptopów. Bez tego dodatku kompletność artykułu nie ucierpi, a jednocześnie sama wstawka może być rozpatrywana zupełnie oddzielnie - w szczególności wstawiona do innego artykułu.

<article>
	<h1>Komputery</h1>
	<p>W dzisiejszych czasach komputery towarzyszą człowiekowi na każdym kroku. Używamy ich w codziennej pracy, jak również szukając odprężenia po trudnym dniu. Sterują zarówno naszymi samochodami, jak i statkami kosmicznymi.</p>
	<aside>
		<h1>Laptop</h1>
		<p>Ten przenośny rodzaj komputera, ze względu na liczne zalety, szybko przyjął się wśród użytkowników.</p>
	</aside>
<article>

Należy tutaj podkreślić, że powyższy artykuł nie opisuje rodzajów komputerów, a jedynie podaje informacje ogólnie o tym urządzeniu elektronicznym. Dlatego wstawka o laptopach jest tutaj jak najbardziej uprawniona. W przeciwnym razie zamiast znacznika ASIDE prawdopodobnie lepszym pomysłem byłoby użycie SECTION.

Przykład dodania do artykułu wstawki z dodatkowym cytatem:

<article>
	<h1>Szczególna teoria względności</h1>
	<p>Ta teoria fizyczna, stworzona w 1905 roku, zrewolucjonizowała sposób pojmowania otaczającej nas rzeczywistości. Zgodnie z nią czas nie musi płynąć liniowo, ale zależy od względnej prędkości obserwatora. Twórcą teorii względności jest Albert Einstein.</p>
	<aside>
		<q>Dwie rzeczy nie mają granic: wszechświat i ludzka głupota, chociaż co do pierwszego nie mam pewności.</q>
	</aside>
	<p>Albert Einstein był jednym z najwybitniejszych fizyków-teoretyków. Laureat nagrody Nobla.</p>
</article>

Warto zwrócić uwagę, że gdyby treść artykułu była sformułowana w inny sposób, usunięcie z niej cytatu mogłoby nie być możliwe bez utraty wewnętrznej kompletności tekstu. W takim przypadku użycie znacznika ASIDE nie byłoby właściwe:

<article>
	<h1>Szczególna teoria względności</h1>
	<p>Ta teoria fizyczna, stworzona w 1905 roku, zrewolucjonizowała sposób pojmowania otaczającej nas rzeczywistości. Zgodnie z nią czas nie musi płynąć liniowo, ale zależy od względnej prędkości obserwatora. Twórcą teorii względności jest Albert Einstein. Jedna z jego słynnych wypowiedzi brzmi:
		<q>Dwie rzeczy nie mają granic: wszechświat i ludzka głupota, chociaż co do pierwszego nie mam pewności.</q>
	</p>
	<p>Albert Einstein był jednym z najwybitniejszych fizyków-teoretyków. Laureat nagrody Nobla.</p>
</article>

Pytania i odpowiedzi <aside>

Co robi ASIDE w HTML?

Element ASIDE oznacza sekcję na stronie, która jest tylko nieznacznie powiązana tematycznie z resztą treści w dokumencie HTML5. Na przykład mogą to być bannery reklamowe albo wtrącone cytaty, do których nie na żadnego bezpośrednio odniesienia w pozostałej części artykułu ani one nie odnoszą się również wprost do tego artykułu, a zostały w tym miejscu zamieszczone tylko dlatego, że w sposób ogólny pasują do kontekstu treści na stronie.

Kiedy ASIDE a kiedy ARTICLE?

Oba te znaczniki tworzą nową sekcję w dokumencie, która w innym kontekście mogłaby funkcjonować niezależnie. Stosuj element ASIDE do oznaczania wszelkich elementów pobocznych, które można by było swobodnie usunąć z dokumentu bez żadnej utraty jego wewnętrznej spójności. Natomiast jeśli usunięcie samodzielnej sekcji spowodowałoby, że pozostała treść na stronie utraciłaby sens, właściwym wyborem będzie element ARTICLE.