เรียนรู้วิธีใช้ HTML <section> ธาตุ
HTML <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> องค์ประกอบอยู่ภายใน <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>
คุณยังสามารถใส่ <article> องค์ประกอบภายใน <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> แท็กเป็นหนึ่งในแท็ก HTML จำนวนมากที่ใช้กำหนดองค์ประกอบคอนเทนเนอร์ องค์ประกอบคอนเทนเนอร์ HTML ที่ใช้บ่อยที่สุดคือ:
<article> , <main> , <header> , <footer> ,<form> และ <div> , (ซึ่งเป็นแท็กทั่วไปที่เราใช้หากไม่มีแท็กอื่นใดที่เกี่ยวข้อง)
