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