การใช้อีโมจิใน HTML

อีโมจิคืออะไร ?

อิโมจิดูเหมือนรูปภาพหรือไอคอน แต่ไม่ใช่ อิโมิจิเป็นตัวอักษร (อักขระ) จากชุดอักขระ UTF-8 (Unicode)

UTF-8 ครอบคลุมอักขระและสัญลักษณ์เกือบทั้งหมดในโลก

HTML charset Attribute

หากต้องการแสดงหน้าเพจ HTML อย่างถูกต้อง เว็บเบราว์เซอร์ต้องทราบชุดอักขระที่ใช้ในเพจ

สิ่งนี้ระบุไว้ในแท็ก <meta>

<meta charset="UTF-8">

หากไม่ได้ระบุ UTF-8 จะเป็นชุดอักขระเริ่มต้นใน HTML

อักขระ UTF-8

เราไม่สามารถพิมพ์อักขระ UTF-8 จำนวนมากบนแป้นพิมพ์ได้ แต่สามารถแสดงโดยใช้ตัวเลขได้เสมอ (เรียกว่า Entity Numbers)

เช่น A คือ 65 B คือ 66 C คือ 67

ตัวอย่าง

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>

<p>การแสดงผล A B C</p>
<p>การแสดงผล A B C</p>

</body>
</html>

ลองดูสิ ❱

อธิบายตัวอย่าง

อีโมจิคาแรคเตอร์

อิโมจิยังเป็นอักขระจากตัวอักษร UTF-8 เช่น

😄 คือ 128516
😍 คือ 128525
💗 คือ 128151

ตัวอย่าง

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>

<h1>การแสดงผลอีโมจิหน้ายิ้ม</h1>

<p>😀</p>

</body>
</html>

ลองดูสิ ❱

เนื่องจากอิโมจิเป็นอักขระ จึงสามารถคัดลอก แสดง และปรับขนาดได้เช่นเดียวกับอักขระอื่นๆ ใน HTML

ตัวอย่าง

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>

<h1>การปรับขนาดอีโมิจิ</h1>

<p style="font-size:48px">
😀😀😀😀
</p>

</body>
</html>

ลองดูสิ ❱

สัญลักษณ์อีโมจิบางตัวใน UTF-8

อีโมจิ	ค่า
`🗻`	🗻
`🗼`	🗼
`🗽`	🗽
`🗾`	🗾
`🗿`	🗿
`😀`	😀
`😁`	😁
`😂`	😂
`😃`	😃
`😄`	😄
`😅`	😅

ลองดูสิ ❱

❮ บทเรียนก่อนหน้า

บทเรียนถัดไป ❯