The section tag

Section element เป็น element ใหม่ที่ยากที่สุดที่จะทำความเข้าใจและใช้ให้ถูกต้อง เป็น element ที่ต้องใช้เหมือน <article> element แต่ชี้เฉพาะเจาะจงกว่า

นั่นหมายความว่า เราต้องพิจารณาให้ดีก่อนว่าเราจะใช้ <nav>, <aside>, <header>, <footer>, หรือ <article> element ก่อนที่เราจะใช้ <section> element (บาง element อาจจะเป็นใหม่ สามารถดูได้ตามบทต่างๆในหัวข้อ HTML5)

เรามาดูตัวอย่างวิธีใช้ <section> element ว่ามันสามารถแบ่ง Flour-article ให้เป็นส่วนๆได้อย่างไร

</header>
<section>
	<h2>The Two Types of Wheat</h2>
	<p>There are two …</p>
</section>

<section>
	<h2>All-Purpose Flour</h2>
	<p>All-purpose … </p>
</section>
...
<footer>...</footer>
</article>

จากตัวอย่าง บางคนต้องการให้มี markup ใน document มากๆเพื่อให้เข้าใจง่าย บางคนก็ต้องการ markup ไม่มาก เราไม่จำเป็นต้องใช้ section element ใน article ก็ได้ แต่ถ้าใช้ จะทำให้โครงสร้างของ document ถูกต้องตามมาตรฐาน
section element จะแบ่งข้อมูลออกเป็นส่วนๆ ซึ่งจำเป็นทีจะต้องจำไว้ว่า ทุกๆ section element ต้องตามด้วย heading tag ถ้ามันไม่เหมาะกับประเภทของข้อมูลที่เรามี เราไม่ควรจะใช้ section element (เราควรใช้ element อื่นๆ หรืออาจจะไม่ต้องใช้เลย)

บางคนพยายามจะใช้ section เป็น styling hook เช่น pullquote (การอ้างอิง) แต่จริงๆแล้ว จะมี element ที่เหมาะสมกว่า เช่น aside element

สรุป

• ไม่ควรใช้ <section> เป็น styling hook
• ถ้าต้องการใช้ styling hook ให้ใช้ <<div>
• <section> element ควรเป็นตัวเลือกสุดท้าย ต้องให้แน่ใจว่า ไม่มี element ไหนสามารถใช้แทนได้
• ใช้ section เมือต้องการแบ่งส่วนของ term และ condition ออกจากกัน
• ใช้ section เมือต้องการจัดกลุ่มของข้อมูล เช่น บทความของข่าว
• ไม่ควรใช้ <section> ในการอ้างอิง แต่ควรใช้ <aside> element แทน
• ถ้า <section> ไม่ได้ตามด้วย heading element (<h1> ถึง <h6>) เราก็ไม่จำเป็นต้องใช้ <section> element
• เราสามารถ nest section ใน article และ article ใน section ได้
• <section> element เป็น block-level element