Mission 16: Section

เป้าหมายของ Mission นี้: ใช้ <section> แบ่งหน้าเว็บเป็นส่วนๆ ที่มี ความหมาย และรู้ว่าต่างจาก <div> ตรงไหน

Section Tag

<section> คือ semantic HTML สำหรับแบ่งหน้าเป็นส่วนๆ ที่มีหัวข้อ/จุดประสงค์ ของตัวเอง ต่างจาก <div> ตรงที่ <section> สื่อความหมาย ว่า "นี่คือส่วน หนึ่งของเนื้อหา" ซึ่งช่วยทั้ง SEO และ accessibility

เลือกใช้ section หรือ div ดี

ถ้าส่วนนั้นมีหัวข้อของตัวเอง หรือเป็นเนื้อหาที่แยกออกมาได้ชัดเจน → ใช้ <section> ถ้าแค่ต้องการกล่องมาห่อจัด layout เฉยๆ ไม่มีความหมายพิเศษ → ใช้ <div>

Demo

<section>
  <h2>ทักษะ</h2>
  <ul>...</ul>
</section>