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

ใน HTML5 แท็ก <summary> ที่ทำงานคู่กับแท็ก <details> โดยแท็ก <summary> จะใช้สำหรับสร้างส่วนหัวของข้อมูลที่สามารถย่อ/ขยายได้ เมื่อผู้ใช้คลิกที่ <summary> ข้อมูลภายในแท็ก <details> จะถูกแสดงหรือซ่อนตามต้องการ

การใช้งานแท็ก <summary>

แท็ก <summary> ถูกใช้เพื่อระบุชื่อหัวข้อหรือหัวเรื่องของส่วนที่สามารถขยายหรือย่อได้ โดยจะวางไว้เป็นลูกของ <details> เพื่อให้ทำงานร่วมกัน

ตัวอย่างการใช้งาน <summary> กับ <details>

<details>
  <summary>อ่านเพิ่มเติมเกี่ยวกับ HTML5</summary>
  <p>HTML5 คือเวอร์ชันล่าสุดของ HTML ที่มีคุณสมบัติใหม่มากมาย เช่น การใช้แท็กสื่อมีเดียและการจัดการ API ต่างๆ เพื่อสร้างเว็บที่มีประสิทธิภาพมากขึ้น</p>
</details>

ในตัวอย่างนี้ แท็ก <summary> แสดงหัวข้อ “อ่านเพิ่มเติมเกี่ยวกับ HTML5” และเมื่อคลิกที่หัวข้อนี้ ข้อความภายในแท็ก <details> จะถูกแสดงขึ้นมา

รูปแบบการประยุกต์ใช้งานของ <summary>

ข้อมูลที่ซ่อน/แสดง เราสามารถใช้ <details> และ <summary> เพื่อสร้าง FAQ (คำถามที่พบบ่อย) หรือข้อมูลที่ผู้ใช้สามารถแสดงหรือซ่อนตามความต้องการได้

<details>
  <summary>คำถาม: HTML5 คืออะไร?</summary>
  <p>HTML5 คือเวอร์ชันล่าสุดของ HTML ซึ่งพัฒนาเพื่อให้มีฟังก์ชันการใช้งานที่ดียิ่งขึ้นสำหรับเว็บแอปพลิเคชัน</p>
</details>

<details>
  <summary>คำถาม: แท็ก <summary> ทำงานอย่างไร?</summary>
  <p>แท็ก <summary> ใช้เพื่อระบุชื่อหัวข้อหรือหัวเรื่องที่สามารถคลิกเพื่อแสดงหรือซ่อนเนื้อหาเพิ่มเติม</p>
</details>

ผลลัพธ์

ข้อมูลรายละเอียดผลิตภัณฑ์ เราสามารถใช้แท็กนี้เพื่อซ่อนหรือแสดงข้อมูลรายละเอียดของผลิตภัณฑ์บนหน้าเว็บ

<details>
  <summary>รายละเอียดสินค้า</summary>
  <ul>
    <li>สี: ดำ</li>
    <li>ขนาด: M, L, XL</li>
    <li>วัสดุ: ฝ้าย 100%</li>
  </ul>
</details>

ผลลัพธ์

แบบฟอร์มการสมัครงาน แท็กนี้สามารถใช้ในการซ่อนหรือแสดงรายละเอียดเพิ่มเติมเกี่ยวกับตำแหน่งงานในแบบฟอร์มสมัครงาน

<details>
  <summary>รายละเอียดงาน</summary>
  <p>เรากำลังมองหาผู้สมัครที่มีประสบการณ์ในการพัฒนาเว็บแอปพลิเคชันด้วย HTML5 และ JavaScript</p>
</details>

ข้อมูลทางเทคนิค สามารถใช้เพื่อซ่อนข้อมูลทางเทคนิคหรือคำอธิบายเพิ่มเติมที่ผู้ใช้อาจไม่ต้องการอ่านทันที

<details>
  <summary>ข้อมูลทางเทคนิค</summary>
  <p>หน่วยประมวลผล: Intel Core i7</p>
  <p>หน่วยความจำ: 16GB RAM</p>
  <p>พื้นที่เก็บข้อมูล: 512GB SSD</p>
</details>

คุณสมบัติพิเศษของ <summary> และ <details>

เมื่อโหลดหน้าเว็บ <details> จะถูกซ่อนอยู่โดยค่าเริ่มต้น แต่สามารถตั้งค่าให้แสดงทันทีได้โดยเพิ่มแอตทริบิวต์ open

<details open>
  <summary>แสดงข้อมูลนี้โดยอัตโนมัติ</summary>
  <p>ข้อมูลนี้จะแสดงโดยไม่ต้องคลิกเปิด</p>
</details>

การประยุกต์ใช้งาน <summary> ร่วมกับ CSS และ JavaScript

เราสามารถใช้ CSS และ JavaScript เพื่อปรับแต่งสไตล์หรือการทำงานเพิ่มเติมได้

<style>
  details summary {
    cursor: pointer;
    font-weight: bold;
  }

  details[open] summary {
    color: green;
  }
</style>

<details>
  <summary>ข้อมูลเพิ่มเติม</summary>
  <p>นี่คือเนื้อหาที่จะถูกแสดงเมื่อคลิกที่หัวข้อ</p>
</details>

ในตัวอย่างนี้เราใช้ CSS ในการปรับเปลี่ยนสีของ <summary> เมื่อตำแหน่งนั้นถูกขยาย

สรุป

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