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

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

ลักษณะการใช้งาน <cite>

1. อ้างอิงหนังสือ บทความ หรือแหล่งข้อมูล: ใช้เมื่อมีการกล่าวถึงชื่อหนังสือ บทความ ภาพยนตร์ หรือเพลง
2. อ้างอิงบุคคลหรือองค์กร: บางครั้งใช้ในการอ้างถึงผู้แต่งหนังสือหรือนักเขียนที่เป็นที่รู้จักกันดี

ตัวอย่างการใช้งาน

การอ้างอิงหนังสือหรือบทความ

<p>หนังสือที่ฉันชอบมากที่สุดคือ <cite>To Kill a Mockingbird</cite> โดย Harper Lee</p>

ในตัวอย่างนี้ <cite> ถูกใช้เพื่อแสดงชื่อหนังสือ

การอ้างอิงภาพยนตร์

<p>ภาพยนตร์เรื่อง <cite>Inception</cite> กำกับโดย Christopher Nolan</p>

ในตัวอย่างนี้ <cite> ถูกใช้เพื่ออ้างอิงชื่อภาพยนตร์

การอ้างอิงเพลง

<p>เพลงโปรดของฉันคือ <cite>Bohemian Rhapsody</cite> โดย Queen</p>

ในตัวอย่างนี้ <cite> ถูกใช้เพื่ออ้างอิงชื่อเพลง

การอ้างอิงงานวิจัย

<p>งานวิจัยล่าสุดของ <cite>John Doe</cite> เกี่ยวกับ AI น่าสนใจมาก</p>

ในตัวอย่างนี้ <cite> ถูกใช้เพื่ออ้างอิงถึงนักวิจัยหรือบุคคลที่มีส่วนเกี่ยวข้องกับงานวิจัย

ข้อสังเกต

• <cite> ไม่ควรใช้เพื่ออ้างอิง URL หรือเว็บไซต์โดยตรง เพราะมีแท็ก <a> สำหรับการเชื่อมโยง URL อยู่แล้ว
• เนื้อหาที่อยู่ใน <cite> มักจะถูกทำให้เป็นตัวเอียง (italic) ตามดีฟอลต์ของเบราว์เซอร์ แต่สามารถปรับแต่งได้โดยใช้ CSS

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

เราสามารถปรับแต่งการแสดงผลของ <cite> โดยใช้ CSS ได้ เช่น

<style>
  cite {
    font-style: normal;
    color: blue;
  }
</style>

<p>ฉันชอบอ่านหนังสือ <cite>1984</cite> ของ George Orwell</p>

ในตัวอย่างนี้การแสดงผลของ <cite> จะถูกเปลี่ยนให้เป็นสีฟ้าและไม่ใช้ตัวเอียง