ทำความเข้าใจ HTML Quotation & Citation Elements ข้อความอ้างอิง

Nov. 30, 2024 · boychawin

การใช้ Quotation และ Citation Elements ใน HTML เป็นวิธีที่ช่วยเพิ่มความน่าเชื่อถือให้เนื้อหา ไม่ว่าจะเป็นการแสดงคำพูด (Quotes) หรือข้อมูลที่อ้างอิงถึงงานอื่น ๆ (Citation)

แท็กเหล่านี้ช่วยให้เนื้อหามีความชัดเจนและดูเป็นมืออาชีพ พร้อมทั้งยังดีต่อ SEO และ Accessibility ด้วย

รายการและตัวอย่าง HTML Quotation และ Citation Elements

  1. <abbr> - Abbreviation (คำย่อ) ใช้กำหนดคำย่อหรืออักษรย่อ พร้อมระบุความหมายใน title attribute
<p>The <abbr title="World Health Organization">WHO</abbr> is responsible for global health issues.</p>
  1. <address> - Contact Information (ข้อมูลติดต่อ) ใช้สำหรับใส่ข้อมูลติดต่อของเจ้าของเอกสารหรือผู้เขียน เช่น อีเมลหรือที่อยู่
<address>
    Written by <a href="mailto:[email protected]">Author Name</a>.<br>
    Visit us at: 123 Web Street, Code City
</address>
  1. <bdo> - Bidirectional Override (กำหนดทิศทางข้อความ) ใช้เปลี่ยนทิศทางข้อความ เช่น จากซ้ายไปขวา (LTR) หรือขวาไปซ้าย (RTL)
<p><bdo dir="rtl">This text is displayed from right to left.</bdo></p>
  1. <blockquote> - Block Quotation (คำพูดแบบบล็อก) ใช้แสดงคำพูดที่อ้างอิงมาจากแหล่งอื่นในรูปแบบบล็อก พร้อมระบุแหล่งที่มาใน cite
<blockquote cite="https://example.com">
    "The journey of a thousand miles begins with one step."
</blockquote>
  1. <cite> - Citation (อ้างอิงชื่อผลงาน) ใช้สำหรับระบุชื่อผลงาน เช่น หนังสือหรือบทความ
<p><cite>The Great Gatsby</cite> is a novel by F. Scott Fitzgerald.</p>
  1. <q> - Inline Quotation (คำพูดในบรรทัด) ใช้แสดงคำพูดในบรรทัดเดียวกัน
    <p>As Albert Einstein said, <q>Imagination is more important than knowledge.</q></p>

ความแตกต่างของ Quotation และ Citation Elements

  • Quotation Tags (<q>, <blockquote>): ใช้แสดงคำพูดที่มาจากแหล่งอื่น
  • Citation Tags (<cite>): ใช้สำหรับชื่อผลงานที่อ้างอิง
  • <abbr> และ <address>: เสริมข้อมูลเพิ่มเติม เช่น คำย่อหรือข้อมูลติดต่อ

สรุป

  • <abbr> เหมาะกับการใส่คำย่อที่ต้องการคำอธิบาย
  • <address> เหมาะสำหรับข้อมูลติดต่อผู้เขียนหรือเจ้าของเอกสาร
  • <bdo> ใช้สำหรับปรับทิศทางข้อความในกรณีพิเศษ
  • <blockquote> และ <q> ใช้แสดงคำพูดในรูปแบบต่าง ๆ
  • <cite> ใช้เสริมชื่อผลงาน เพิ่มความน่าเชื่อถือ
Tags: html , seo , quotation , citation