HTML5 การใช้งาน section Tag

แท็ก <section> ใน HTML5 ใช้เพื่อกำหนดกลุ่มของเนื้อหาที่มีความสัมพันธ์กัน หรือเป็นเนื้อหาที่แยกออกมาเป็นหมวดหมู่ชัดเจน โดยจะเป็นการแยกเนื้อหาเป็นส่วนย่อย ๆ เพื่อให้เนื้อหาดูเป็นระเบียบมากขึ้นและสามารถอธิบายเนื้อหานั้นได้ว่าเกี่ยวข้องกับอะไร ตัวอย่างการใช้งานเช่น การแบ่งเนื้อหาบนหน้าเว็บเพจให้เป็นหมวดหมู่ต่าง ๆ เช่น ข่าวสาร บทความ ผลิตภัณฑ์ หรือบทคอมเมนต์ เป็นต้น

การใช้งานแท็ก <section> มักจะใช้ในบริบทที่เนื้อหานั้นมีหัวข้อหรือกลุ่มเนื้อหาที่มีความสัมพันธ์กัน ซึ่งแตกต่างจาก <div> ที่ใช้เพื่อจัดกลุ่มเนื้อหาทั่วไปโดยไม่มีความหมายเชิงเนื้อหาเฉพาะเจาะจง

รูปแบบการใช้งาน <section>

การใช้งานพื้นฐานในเว็บเพจทั่วไป

ในกรณีที่ต้องการแบ่งเนื้อหาในหน้าเว็บเป็นกลุ่มย่อยที่มีหัวข้อแตกต่างกัน

<section>
    <h2>ข่าวล่าสุด</h2>
    <p>วันนี้มีการประกาศเกี่ยวกับ ...</p>
</section>

<section>
    <h2>บทความยอดนิยม</h2>
    <p>บทความนี้เป็นที่นิยมในช่วง ...</p>
</section>

การใช้ <section> เพื่อกำหนดบทความหรือเนื้อหาตามหมวดหมู่

หากเว็บไซต์มีเนื้อหาหลายบทความ สามารถใช้ <section> เพื่อจัดหมวดหมู่ได้

<section id="technology">
    <h2>เทคโนโลยี</h2>
    <article>
        <h3>ข่าวสาร AI ล่าสุด</h3>
        <p>ในปีนี้ AI ได้รับความนิยมอย่างมากใน ...</p>
    </article>
</section>

<section id="lifestyle">
    <h2>ไลฟ์สไตล์</h2>
    <article>
        <h3>การดูแลสุขภาพสำหรับคนยุคใหม่</h3>
        <p>การออกกำลังกายและโภชนาการมีความสำคัญ ...</p>
    </article>
</section>

การใช้ <section> ภายในบทความ

สามารถแบ่งกลุ่มข้อมูลภายในบทความเดียวกันเป็นส่วน ๆ เพื่อให้มีการแบ่งแยกเนื้อหาชัดเจน

<article>
    <h1>การพัฒนาซอฟต์แวร์เว็บแอปพลิเคชัน</h1>
    <section>
        <h2>บทนำ</h2>
        <p>การพัฒนาเว็บแอปพลิเคชันเป็นสิ่งที่สำคัญมาก ...</p>
    </section>

    <section>
        <h2>กระบวนการพัฒนา</h2>
        <p>การพัฒนาเริ่มจากการวางแผน ...</p>
    </section>

    <section>
        <h2>สรุป</h2>
        <p>สรุปแล้ว การพัฒนาเว็บแอปพลิเคชัน ...</p>
    </section>
</article>

การใช้ <section> ภายในฟอร์ม

ถ้ามีฟอร์มที่ซับซ้อนและต้องการแยกส่วนข้อมูล สามารถใช้ <section> เพื่อจัดกลุ่มข้อมูลในฟอร์มได้

<form>
    <section>
        <h2>ข้อมูลส่วนตัว</h2>
        <label for="name">ชื่อ:</label>
        <input type="text" id="name" name="name">
    </section>

    <section>
        <h2>ข้อมูลการติดต่อ</h2>
        <label for="email">อีเมล:</label>
        <input type="email" id="email" name="email">
    </section>

    <section>
        <h2>ข้อมูลที่อยู่</h2>
        <label for="address">ที่อยู่:</label>
        <input type="text" id="address" name="address">
    </section>

    <button type="submit">ส่งข้อมูล</button>
</form>

ข้อดีของการใช้ <section>

1. ความหมายที่ชัดเจน: การใช้ <section> ช่วยเพิ่มความชัดเจนในเนื้อหา ช่วยให้ผู้อ่านและเครื่องมือค้นหาหรือเว็บเบราว์เซอร์เข้าใจเนื้อหาได้ง่ายขึ้น
2. การจัดการเนื้อหา: สามารถจัดกลุ่มเนื้อหาที่มีความเกี่ยวข้องกันในเชิงลำดับและหมวดหมู่
3. SEO ที่ดีขึ้น: เนื่องจาก <section> ให้ความหมายเชิงโครงสร้างของเนื้อหา ช่วยให้การจัดอันดับ SEO ดีขึ้น

ข้อควรระวัง

1. ไม่ควรใช้ <section> แบบฟุ่มเฟือยในการแบ่งเนื้อหาที่ไม่จำเป็น หากไม่มีความจำเป็นในการแบ่งกลุ่มเนื้อหาอย่างชัดเจน ควรเลือกใช้ <div> แทน