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

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

การใช้งานทั่วไปของ <article>

บทความในเว็บบล็อก

ในการสร้างบทความหรือโพสต์ในบล็อก <article> จะเป็นส่วนที่ใช้ครอบเนื้อหาของโพสต์แต่ละโพสต์

<article>
  <h2>5 วิธีผ่อนคลายความเครียด</h2>
  <p>ในชีวิตประจำวัน หลายคนต้องเจอกับสถานการณ์ที่ทำให้เกิดความเครียด...</p>
</article>

ข่าวสารในเว็บไซต์ข่าว

แต่ละข่าวบนหน้าเว็บไซต์ข่าวสามารถถูกแยกออกเป็น <article> เพื่อให้แยกจากกันได้อย่างชัดเจน

<article>
  <h2>ข่าวด่วน: พายุไต้ฝุ่นเข้าสู่พื้นที่กรุงเทพ</h2>
  <p>พายุไต้ฝุ่นเคลื่อนตัวเข้าสู่กรุงเทพ ส่งผลให้เกิดฝนตกหนักในพื้นที่...</p>
</article>

ความเห็นของผู้ใช้หรือคอมเมนต์

ความเห็นหรือรีวิวของผู้ใช้ก็สามารถใช้ <article> ได้ เพื่อให้สามารถแยกความเห็นออกจากเนื้อหาอื่น ๆ

<article>
  <header>
    <h3>รีวิวจากผู้ใช้: นานา</h3>
    <p>วันที่ 2 ตุลาคม 2024</p>
  </header>
  <p>ฉันใช้ผลิตภัณฑ์นี้มาเป็นเวลาหนึ่งเดือนแล้ว และเห็นผลลัพธ์ที่ดี...</p>
</article>

การใช้งานใน Blog Post ที่มีหลายบทความ

ถ้ามีหลายบทความในหน้าเดียวกัน แต่ละบทความควรถูกห่อด้วย <article>

<article>
  <h2>บทความที่ 1: วิธีการปลูกต้นไม้ในบ้าน</h2>
  <p>การปลูกต้นไม้ในบ้านสามารถช่วยฟอกอากาศและสร้างบรรยากาศที่ดี...</p>
</article>

<article>
  <h2>บทความที่ 2: การดูแลสัตว์เลี้ยงอย่างมืออาชีพ</h2>
  <p>สัตว์เลี้ยงต้องการความใส่ใจในการดูแลทั้งเรื่องอาหารและสุขภาพ...</p>
</article>

การใช้ <article> ร่วมกับ <section> และ <div>

สามารถใช้ <article> ร่วมกับ <section> หรือ <div> เพื่อจัดการเนื้อหาที่เป็นกลุ่มหรือเป็นส่วนหนึ่งของเว็บไซต์

<section>
  <article>
    <h2>การทำสมาธิเพื่อสุขภาพจิต</h2>
    <p>การทำสมาธิช่วยให้จิตใจสงบและเพิ่มประสิทธิภาพในการทำงาน...</p>
  </article>

  <article>
    <h2>เคล็ดลับการนอนหลับที่ดี</h2>
    <p>การนอนหลับที่เพียงพอเป็นสิ่งสำคัญสำหรับสุขภาพของเรา...</p>
  </article>
</section>

ประโยชน์ของการใช้ <article>

• ช่วยให้เครื่องมือค้นหาสามารถเข้าใจโครงสร้างเนื้อหาได้ดีขึ้น ทำให้การจัดอันดับ SEO ดียิ่งขึ้น
• สร้างโครงสร้างที่ชัดเจนและรองรับการแชร์หรือใช้งานเนื้อหาซ้ำในบริบทอื่น

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