เรียนรู้วิธีใช้งาน Element <article> ใน HTML
แท็ก <article> ใน HTML ใช้กำหนด Element สำหรับเนื้อหาที่ อิสระต่อเนื่อง (self-contained) Self-contained หมายถึง เนื้อหาภายใน Article ควรทำงานได้อย่างอิสระจากส่วนอื่นของเว็บไซต์
วิธีใช้แท็ก <article> ใน HTML
กรณีการใช้งาน <article>:
- บล็อก (Blogs)
- นิตยสาร (Magazines)
- เว็บข่าว (News sites)
ไม่เหมือน Element <main> ซึ่งก็เป็น Container เนื้อหา <article> สามารถใช้ได้หลายครั้งในเอกสาร HTML เดียวกัน
ตัวอย่าง ใช้ <article> เดียวเป็น Container หลักสำหรับบทความ/โพสต์:
<article> <h1>Title of your post</h1> <p>Paragraph</p> <p>Paragraph</p> <img href="your-image.jpg" alt="description of image" /> <p>Paragraph</p> <p>Paragraph</p> </article>เว็บไซต์ที่คุณอ่านอยู่ก็ใช้โครงสร้าง HTML คล้ายกัน คุณตรวจสอบได้ด้วยการคลิกขวาเลือก Inspect
<article> ยังใช้แสดงรายการเนื้อหาต่างๆ แต่ละรายการใน Article ของตัวเอง เช่น ฟีดบทความพร้อมลิงก์:
<div> <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> </div>แต่ละ Article ทั้งสามอ่านว่าเป็นเนื้อหาอิสระต่อเนื่องโดยเบราว์เซอร์
<article> เป็นหนึ่งในแท็ก HTML สำหรับ Container Element แท็ก Container ที่ใช้บ่อยที่สุด:
<section>, <main> , <header>, <footer>,<form>, และ <div> (แท็กทั่วไปใช้เมื่อไม่มีแท็กอื่นเหมาะสม)
