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

ใน HTML5 แท็ก <q> ใช้เพื่อใส่ข้อความอ้างอิงสั้น ๆ หรือ “quotation” ภายในเอกสาร HTML โดยข้อความภายใน <q> มักจะถูกล้อมรอบด้วยเครื่องหมายคำพูด (quotation marks) อัตโนมัติตามสไตล์ของเบราว์เซอร์แต่ละตัว

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

<p>เธอกล่าวว่า <q>วันนี้อากาศดีมาก</q> ขณะเดินอยู่ในสวน</p>

ในตัวอย่างนี้ เบราว์เซอร์จะเพิ่มเครื่องหมายคำพูดรอบ ๆ ข้อความ “วันนี้อากาศดีมาก” อัตโนมัติ โดยที่เราไม่จำเป็นต้องใส่เครื่องหมายคำพูดเอง

การใส่แหล่งที่มาของคำอ้างอิงด้วย cite attribute

HTML5 เพิ่มความสามารถในการใส่แหล่งที่มาของคำอ้างอิงโดยใช้แอตทริบิวต์ cite เพื่อระบุ URL ที่อ้างอิงมาจาก

<p>ในบทความจากเว็บไซต์ <q cite="https://www.example.com">การรักษาสุขภาพคือสิ่งที่สำคัญที่สุด</q> ได้กล่าวถึงเรื่องนี้อย่างละเอียด</p>

ในตัวอย่างนี้ คำอ้างอิงสามารถเชื่อมโยงกลับไปยังแหล่งข้อมูลต้นฉบับได้หากต้องการ

การใช้งาน <q> ภายใน <blockquote>

หากมีข้อความอ้างอิงที่ยาวเกินไป ควรใช้ <blockquote> แทน <q> และถ้ามีการใช้งานคำพูดภายในข้อความที่ยาวเหล่านั้นสามารถใช้ <q> ซ้อนภายใน <blockquote> ได้

<blockquote cite="https://www.example.com">
  ในบทความนี้ ผู้เขียนได้กล่าวว่า 
  <q>การรับประทานอาหารที่มีประโยชน์ช่วยส่งเสริมสุขภาพจิต</q> 
  ซึ่งเป็นส่วนหนึ่งของเนื้อหาที่เขียนเกี่ยวกับสุขภาพ
</blockquote>

สไตล์เครื่องหมายคำพูดในแต่ละภาษา

เครื่องหมายคำพูดที่แสดงผลในเบราว์เซอร์จะขึ้นอยู่กับภาษาของเอกสาร เช่น ถ้าภาษาเป็นภาษาไทย เบราว์เซอร์อาจใช้เครื่องหมายคำพูดแบบไทยหรือแบบอื่น ๆ ที่เหมาะสม

ตัวอย่างการกำหนดภาษาด้วย lang attribute

<p lang="en">He said, <q>Life is beautiful</q>.</p>
<p lang="fr">Il a dit, <q>La vie est belle</q>.</p>

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

การประยุกต์ใช้งาน

1. ในเนื้อหาข่าวหรือบทความ: เมื่ออ้างอิงคำพูดสั้น ๆ จากบุคคล
2. ในบทความวิชาการ: เพื่ออ้างอิงคำพูดหรือทฤษฎีจากแหล่งอ้างอิงที่เชื่อถือได้
3. ในการสนทนาหรือข้อความในหน้าเว็บ: เพื่อทำให้เนื้อหานั้นดูน่าเชื่อถือยิ่งขึ้นด้วยการอ้างคำพูดจากแหล่งที่มาหรือบุคคลสำคัญ

ข้อควรระวัง

• อย่าใช้ <q> กับข้อความที่ยาวมาก ๆ ควรใช้ <blockquote> สำหรับการอ้างอิงข้อความยาวแทน
• ระวังการใช้ <q> ซ้อนกันหลายชั้น เพราะอาจทำให้เครื่องหมายคำพูดซ้อนกันมากเกินไปและดูยุ่งเหยิง

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