สัญลักษณ์ HTML: การใช้ HTML Character Entities

เมื่อเขียนข้อความในหน้า HTML เราต้องใช้ตัวอักษรที่ไม่พร้อมใช้งานบนคีย์บอร์ด หรือตัวอักษรที่สงวนไว้มีความหมายพิเศษใน HTML เรียกว่า entities บทความนี้ดูวิธีใช้ special characters ในโค้ดและให้ reference สำหรับ entities ที่ใช้บ่อย

วิธีหนึ่งแสดงการใช้ symbols คือสร้าง code block ที่ต้องการ render บนหน้าจอ ปัญหาคือ HTML ต้องการ execute HTML!

< และ > เป็น reserved characters ใน HTML วิธีแก้คือแทนที่ตัวอักษรเหล่านั้นด้วย HTML entities Entities คือชื่อเรียกอีกอย่างของ HTML character codes นี่คือวิธีใช้ในโค้ดเพื่อให้ code block แสดง raw บนหน้าจอ:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>repl.it</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <code> <!--The <code> blocks don't prevent this HTML from being rendered--> <p>Famous Baseball Players</p> <ul> <li>Babe Ruth</li> <li>Mickey Mantle</li> <li>Nolan Ryan</li> </ul> </code> &ltcode> <br> <!--Replace special characters with character references--> <!-- &nbsp; === non-breaking space (4 spaces === tab) &lt; === < &gt; === > &sol; === / --> &nbsp;&nbsp;&nbsp;&nbsp;&lt;p>Famous Baseball Players<&sol;p> <br> &nbsp&nbsp&nbsp&nbsp&ltul> <br> &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&ltli>Babe Ruth<&sol;li> <br> &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&ltli>Mickey Mantle<&sol;li> <br> &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&ltli>Nolan Ryan<&sol;li> <br> &nbsp&nbsp&nbsp&nbsp<&sol;ul> <br> &lt/code> </body> </html>

แท็ก <code> รอบ code block แรกไม่หยุด HTML จากการประมวลผล ชุดที่สองของ <code> tags – พร้อม character codes – render raw code บนหน้าจอ แทนการ evaluate HTML

วิธีใช้ Character Entities

มี 3 วิธีใช้ characters ใน HTML: hex code, number code, และ entity code/character name ทั้ง 3 เริ่มต้นด้วย & ตัวอย่าง:

รหัสเหล่านี้แทนที่กันได้กับ entities ที่ออกมาพร้อม HTML4 ส่วนใหญ่คือ trial and error อย่าพยายามจดจำทั้งหมด เพราะไม่ได้ใช้บ่อย W3Schools มี reference ดีสำหรับ entities ทั้งหมด ลิงก์เริ่มจาก symbols ที่ introduced ใน HTML4 บทถัดไปมี symbols ใหม่ บางตัวมีทั้ง 3 วิธีเขียน บางตัวไม่มี บางตัวเข้ากันได้กับทุกเบราว์เซอร์ บางตัวไม่

สรุป: ตระหนักถึง symbols รู้ว่ามีอยู่ และรู้วิธีค้นหา code เพื่อใช้ในโปรเจกต์ นั่นคือทั้งหมดแล้ว ลองทำ trial and error ต่อไปคุณจะเก่งในเวลานี้!