<blockquote> เป็นแท็กใน HTML5 ที่ใช้สำหรับการแสดงข้อความที่เป็นการอ้างอิง (quotation) จากแหล่งอื่น ๆ โดยปกติจะใช้เมื่อเราต้องการแสดงเนื้อหาที่อ้างอิงมาจากแหล่งภายนอก เช่น หนังสือ บทความ หรือข้อความจากบุคคลอื่น การใช้งาน <blockquote> สามารถทำได้หลายรูปแบบ
การใช้งานพื้นฐานของ <blockquote>
การใช้งานที่ง่ายที่สุดของ <blockquote> คือการอ้างอิงข้อความจากแหล่งอื่นโดยไม่มีการระบุแหล่งที่มา
ตัวอย่าง
<blockquote>
This is a simple blockquote element.
</blockquote>ข้อความที่อยู่ภายในแท็ก <blockquote> จะถูกจัดแสดงเป็นการอ้างอิง โดยปกติจะมีการเยื้องเล็กน้อยจากข้อความอื่น ๆ
การใช้งาน <blockquote> พร้อมแหล่งที่มา
HTML5 รองรับการระบุแหล่งที่มา (source) ของการอ้างอิงด้วยการใช้แอตทริบิวต์ cite ซึ่งจะเป็นการระบุ URL หรือแหล่งที่มาของการอ้างอิงนั้น ๆ
ตัวอย่าง
<blockquote cite="https://example.com">
This is a blockquote with a citation.
</blockquote>แม้แอตทริบิวต์ cite จะไม่แสดงผลเป็นข้อความบนหน้าเว็บ แต่สามารถใช้เพื่อตรวจสอบแหล่งที่มาในซอร์สโค้ดได้
การใช้ <blockquote> ร่วมกับ <cite> เพื่อแสดงชื่อแหล่งที่มา
เราสามารถแสดงชื่อแหล่งที่มาของข้อความที่อ้างอิงได้ โดยใช้แท็ก <cite> เพื่อบอกชื่อหรือแหล่งที่มาเพิ่มเติม
ตัวอย่าง
<blockquote>
"The only limit to our realization of tomorrow is our doubts of today."
<cite>Franklin D. Roosevelt</cite>
</blockquote>ในกรณีนี้ <cite> จะช่วยระบุว่าใครเป็นผู้พูดหรือเขียนข้อความนั้น
การใช้ <blockquote> ภายใน <figure> เพื่ออ้างอิงรูปภาพหรือสื่ออื่น ๆ
คุณสามารถรวมการอ้างอิงกับสื่ออื่น ๆ เช่น รูปภาพหรือกราฟ โดยใช้แท็ก <figure> เพื่อประกอบกับคำอธิบาย
ตัวอย่าง
<figure>
<blockquote cite="https://example.com">
"This is a quote that is associated with a media element."
</blockquote>
<figcaption>Quote from <cite>Example Source</cite></figcaption>
</figure>ในตัวอย่างนี้ ข้อความใน <blockquote> จะมีคำอธิบายแหล่งที่มาแสดงใต้ข้อความเพื่อบอกว่าอ้างอิงจากแหล่งใด
การจัดสไตล์ของ <blockquote> ด้วย CSS
สามารถเพิ่มการจัดรูปแบบให้กับ <blockquote> โดยใช้ CSS เพื่อให้สวยงามยิ่งขึ้น
ตัวอย่าง
<blockquote style="border-left: 4px solid #ccc; padding-left: 10px; color: #555;">
"This blockquote is styled with CSS to make it visually distinct."
</blockquote>ในตัวอย่างนี้ มีการจัดให้ <blockquote> มีเส้นขอบด้านซ้ายและมีการเยื้องข้อความเพิ่มเติม ทำให้แตกต่างจากข้อความทั่วไป
สรุป
แท็ก <blockquote> เป็นแท็กที่มีประโยชน์ในการอ้างอิงเนื้อหาจากแหล่งภายนอกหรือจากแหล่งข้อมูลที่น่าเชื่อถือ สามารถใช้งานได้หลากหลายวิธี เช่น การอ้างอิงทั่วไป การระบุแหล่งที่มาโดยใช้แอตทริบิวต์ cite หรือการแสดงแหล่งที่มาภายในเนื้อหา และยังสามารถประยุกต์ใช้ร่วมกับสื่ออื่น ๆ เช่น รูปภาพและกราฟได้