เรียนรู้วิธีใช้งาน Element <section> ใน HTML
Element <section> ใน HTML ใช้เป็น Container สำหรับแทนส่วนเนื้อหาแต่ละส่วนในเอกสาร
คุณอาจมีหน้าเว็บที่มีหลายส่วนแสดงข้อมูลต่างๆ ของบริษัท เช่น:
- Hero Section
- Services Section
- Team Section
- Sponsors Section
- Contact Us Section
แต่ละส่วนสามารถห่อหุ้มใน Section แบบอิสระได้:
<section> <h2>A section 1</h2> <p>...</p> <img src="" alt="" /> </section> <section> <h2>A section 2</h2> <p>...</p> <img src="" alt="" /> </section> <section> <h2>A section 3</h2> <p>...</p> <img src="" alt="" /> </section>กรณีใช้งานอีกอย่างของ <section> คือภายใน Element <article>
สมมติคุณมีบทความยาวที่อภิปรายหลายหัวข้อ สามารถใช้ <section> แบ่งบทความเป็นส่วนย่อย:
<article> <h1>Main post title</h1> <section> <h2>Topic 1</h2> <p>...</p> <img src="" alt="" /> </section> <section> <h2>Topic 2</h2> <p>...</p> <img src="" alt="" /> </section> <section> <h2>Topic 3</h2> <p>...</p> <img src="" alt="" /> </section> </article>คุณยังสามารถวาง Element <article> ภายใน <section> ได้
เช่น มี Section ในหน้าแรกแสดงการ์ดบทความพร้อมลิงก์:
<section> <h2>Check out our latest blog posts</h2> <article> <a href="/path-to-blog-post-1"> <h3>Blog post 1</h3> </a> </article> <article> <a href="/path-to-blog-post-2"> <h3>Blog post 2</h3> </a> </article> <article> <a href="/path-to-blog-post-3"> <h3>Blog post 3</h3> </a> </article> </section><section> เป็นหนึ่งในแท็ก Container Element แท็ก Container ที่ใช้บ่อย:
<article> , <main> , <header>, <footer>,<form>, และ <div> (แท็กทั่วไปใช้เมื่อไม่มีแท็กอื่นเหมาะสม)
