HTML5 การใช้งาน Emoji

การใช้งาน Emoji ใน HTML5 เป็นเรื่องง่ายและช่วยเพิ่มความสนุกและการสื่อสารที่มีความหมายมากขึ้นให้กับเว็บไซต์ ใน HTML5 เราสามารถใช้งาน Emoji ได้หลายวิธี ซึ่งได้แก่การใช้ Unicode, HTML Entities, และการคัดลอกวาง Emoji ตรง ๆ ไปในโค้ด

การใช้ Unicode

เราสามารถใส่ Emoji โดยใช้ Unicode ซึ่งเป็นรหัสมาตรฐานที่แสดงถึงตัวอักษรหรือสัญลักษณ์ต่าง ๆ ทั่วโลก โดย Emoji แต่ละตัวจะมี Unicode ของตัวเอง ตัวอย่างเช่น

<p>ฉันรู้สึกมีความสุข 😊</p>

ในโค้ดนี้ เราใช้ Unicode สำหรับ Emoji “😊” ที่มีรหัส Unicode คือ U+1F60A (ไม่ต้องเขียนโค้ด Unicode เพียงใส่ Emoji ลงในโค้ดก็เพียงพอ)

การใช้ HTML Entities

HTML Entities คือรูปแบบหนึ่งของการแสดงตัวอักษรหรือสัญลักษณ์พิเศษที่ไม่ได้อยู่ในมาตรฐาน ASCII ผ่านการใช้เครื่องหมาย & และ ; โดยในกรณีของ Emoji เราสามารถใช้รูปแบบนี้ได้เช่นกัน ตัวอย่างเช่น

<p>ฉันรักแมว 🐱</p>

หรืออาจใช้ในรูปแบบ Unicode Decimal เช่น

<p>ฉันรักแมว 🐱</p>

รหัส 🐱 คือ Emoji แมว 🐱 ในรูปแบบ Decimal ของ Unicode

การคัดลอกและวาง Emoji

วิธีที่ง่ายที่สุดคือการคัดลอก Emoji จากแหล่งต่าง ๆ เช่นจากแป้นพิมพ์ หรือเว็บไซต์ และวางลงในโค้ด HTML ได้เลยโดยตรง ตัวอย่างเช่น

<p>ขอให้โชคดี 🍀</p>

การใช้ใน Input Fields

Emoji สามารถนำไปใช้ในช่องกรอกข้อมูลได้ด้วย โดยสามารถให้ผู้ใช้พิมพ์ Emoji ผ่านคีย์บอร์ดหรือเลือกจากแป้นพิมพ์เสริม เช่น

<label for="message">ส่งข้อความพร้อม Emoji:</label>
<input type="text" id="message" name="message" placeholder="😊">

การใช้ Emoji ใน CSS (Custom Font or Background)

เราสามารถใช้ Emoji เป็นส่วนหนึ่งของ CSS เพื่อสร้างความแตกต่างในการออกแบบ เช่นใช้เป็นไอคอนหรือเป็นพื้นหลังได้

<style>
  .emoji-background {
    background: url('https://example.com/emoji.png') no-repeat center;
  }
</style>

<div class="emoji-background">เนื้อหาพร้อมพื้นหลังเป็น Emoji</div>

การใช้ในตัวแปร JavaScript

Emoji สามารถเก็บไว้ในตัวแปร JavaScript เพื่อใช้งานใน Dynamic Content หรือในฟังก์ชันต่าง ๆ ได้เช่นกัน ตัวอย่าง

<script>
  let happyEmoji = "😊";
  document.getElementById("emoji-message").innerHTML = `ขอบคุณสำหรับข้อความ ${happyEmoji}`;
</script>
<div id="emoji-message"></div>

สรุป

Emoji ใน HTML5 สามารถใช้งานได้ง่ายและหลากหลาย ไม่ว่าจะเป็นการใส่ Emoji ตรง ๆ ผ่าน Unicode หรือ HTML Entities หรือจะนำไปใช้ใน CSS หรือ JavaScript เพื่อปรับแต่งเว็บไซต์ให้มีชีวิตชีวาขึ้น