พัฒนาเว็บไซต์ด้วย HTML5

HTML5 การใช้งาน Encoding (Character Set)

การกำหนด Encoding หรือ Character Sets ใน HTML5 มีความสำคัญอย่างยิ่งในการทำให้หน้าเว็บสามารถแสดงผลข้อความได้อย่างถูกต้อง โดยเฉพาะเมื่อต้องแสดงผลข้อความที่เป็นภาษาต่างๆ เช่น ภาษาไทย จีน ญี่ปุ่น หรือภาษาอื่นๆ ที่ไม่ได้ใช้ชุดตัวอักษรแบบ ASCII ปกติ การระบุ Character Encoding อย่างถูกต้องจะช่วยให้ข้อความไม่แสดงผลเป็นเครื่องหมายคำถามหรือสัญลักษณ์ที่ไม่ถูกต้อง

การกำหนด Encoding ใน HTML5

HTML5 มักใช้ชุดตัวอักษรแบบ UTF-8 เป็นมาตรฐาน เนื่องจากสามารถรองรับตัวอักษรได้ทุกภาษาและเป็นที่นิยมใช้งานมากที่สุดในปัจจุบัน

วิธีการกำหนด Encoding โดยใช้ <meta> Tag

HTML
<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <title>ตัวอย่างการใช้ Encoding ใน HTML5</title>
</head>
<body>
    <p>สวัสดี</p>
</body>
</html>

ในตัวอย่างนี้ได้กำหนด Encoding เป็น UTF-8 ผ่านทาง <meta charset="UTF-8"> ซึ่งเป็นการระบุ Character Encoding ในการแสดงผลหน้าเว็บ

การใช้ Encoding แบบอื่นๆ

นอกจาก UTF-8 แล้ว ยังมี Encoding รูปแบบอื่นๆ ที่สามารถใช้งานได้ เช่น ISO-8859-1 หรือที่เรียกอีกอย่างว่า Latin-1 ซึ่งใช้สำหรับภาษาในยุโรปตะวันตก, UTF-16 หรือแม้แต่ Windows-1252

ตัวอย่างการใช้ ISO-8859-1
HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="ISO-8859-1">
    <title>Example with ISO-8859-1 Encoding</title>
</head>
<body>
    <p>Bonjour, ça va?</p>
</body>
</html>

ในตัวอย่างนี้เป็นการใช้ ISO-8859-1 ซึ่งเหมาะกับการแสดงผลตัวอักษรภาษาฝรั่งเศส เยอรมัน สเปน และภาษาอื่นๆ ในกลุ่มยุโรปตะวันตก

การแปลง Encoding ให้ถูกต้อง

หากเรามีไฟล์ HTML ที่ถูกสร้างขึ้นใน Encoding อื่น แต่ต้องการเปลี่ยนเป็น UTF-8 เราสามารถแปลงไฟล์โดยใช้เครื่องมือแก้ไขข้อความ (text editor) เช่น Notepad++ หรือ Visual Studio Code ที่รองรับการแปลง Encoding

วิธีเช็ค Encoding ของไฟล์

  • เมื่อเปิดหน้าเว็บในเบราว์เซอร์ คุณสามารถใช้เครื่องมือตรวจสอบ Encoding ของหน้าเว็บโดยไปที่ Developer Tools ของเบราว์เซอร์นั้นๆ
  • ตรวจสอบ <meta charset> ที่ถูกใส่ใน <head> ของ HTML

สรุป

การกำหนด Encoding ใน HTML5 มีความสำคัญต่อการแสดงผลข้อความให้ถูกต้อง โดย UTF-8 เป็นรูปแบบที่ได้รับความนิยมมากที่สุดเนื่องจากสามารถรองรับตัวอักษรจากทุกภาษา และยังมีรูปแบบอื่นๆ เช่น ISO-8859-1 หรือ UTF-16 ที่สามารถเลือกใช้ได้ตามความต้องการ

Tags
แชร์เรื่องนี้

เรื่องที่น่าสนใจ