The aside tag

Aside element เป็น element ใหม่ของ HTML5 <aside> element สามารถนำมาใช้ได้ 2 แบบ คือ ใช้ด้านในหรือด้านนอกของ article element

เช่นในนิตยสาร เราจะเห็นว่า ข้อความบางข้อความจะเขียนแยกออกมาด้านนอก หรือบางข้อความจะเขียนเพื่อเน้นใจความด้านใน เช่น pull-quote เพราะฉะนั้นจะเลือกให้ aside element อยู่ด้านนอกหรือด้านในนั้นขึ้นอยู่กับความสัมพันธ์กันระหว่างข้อความด้วยกัน

Content related to the current article, blogpost, etc. (ข้อความที่เกี่ยวกับหัวข้อในบทความหรือ blogpost)

นี่คือตัวอย่างการใช้ <aside> element ด้านใน ของ <article> element

<article>
	<header>
		<h1>All About Flour<h1>
		<p class="byline">by Jane Doe</p> 
	</header>
	<section>
		<h2>The Two Types of Wheat</h2>
		<p>There … to rise.</p>
		<p>Where … with less protein.</p>
	</section>
	<aside>
		If you use organic flour you very often get better bread
	</aside>
</article>

Content related to your page as a whole (ข้อความที่เกี่ยวกับทั้งบทความ)

นี่คือตัวอย่างการใช้ <aside> element ด้านนอก ของ <article> element เช่น ใช้เมื่อ มีโฆษณา, blogroll, navigation ไปยังอ้างอิงค์ต่างๆ หรืออะไรก็ตามที่เกี่ยวข้องกับบทความทั้งหมด

<aside>
	<h3>Foodblogs I like</h3>
	<a href="http://www.bakerella.com">Bakerella</a>
	<a href="http://sourdough.com/"> Sourdough.com</a>
	<a href="http://www.bakingobsession.com">BakingObsession</a>
</aside>
<article>
	<header>
		<h1>All About Flour<h1>
		<p class="byline">by Jane Doe</p> 
	</header>
	<section>
		<h2>The Two Types of Wheat</h2>
		<p>There … to rise.</p>
		<p>Where … with less protein.</p>
	</section>
</article>

เมื่อไหร่ก็ตามที่ใช้ aside element ต้องจำไว้ว่า aside element เป็นการเขียนบทความย่อย เป็นบทความสำคัญรองลงมาจากบทความหลัก เราจะใช้ใน pullquote เราไม่ควรนำมาใช้ใน blockquote element

สรุป

• Aside element สามารถนำมาใช้ด้านในหรือด้านนอกของ article element ก็ได้
• การนำ aside element มาใช้ด้านในต้องขึ้นอยู่กับความสัมพันธ์กันระหว่างข้อความ
• ถ้าเราลบข้อความใน <aside> element แล้วทำให้บทความไม่สมบูรณ์ เราไม่ควรใช้ <aside> element
• การนำ aside element มาใช้ด้านนอก ข้อความนั้นต้องมีความสัมพันธ์กับบทความหลักทัั้ง webpage
• Aside element เป็น block-level element
• เราสามารถใช้ block level element เช่น <h1> - <h6> และ inline element (เช่น <em>) ด้านในของ <aside> element