HTML Entities - แสดงสัญลักษณ์พิเศษอย่างถูกต้อง
ในบทเรียนก่อนหน้า เราได้เรียนรู้เกี่ยวกับการใช้แท็ก <div> และ <span> เพื่อจัดกลุ่มองค์ประกอบต่างๆ บนหน้าเว็บของเรา ในบทนี้ เราจะมาทำความรู้จักกับสิ่งที่เรียกว่า HTML Entities ซึ่งเป็นสิ่งจำเป็นสำหรับการแสดงสัญลักษณ์พิเศษบางอย่างบนหน้าเว็บได้อย่างถูกต้อง
ทำไมต้องใช้ HTML Entities?
HTML ใช้สัญลักษณ์บางตัวเป็นส่วนหนึ่งของ syntax หรือโครงสร้างของภาษา ตัวอย่างเช่น เครื่องหมาย < (น้อยกว่า) และ > (มากกว่า) ถูกใช้เพื่อกำหนดแท็ก HTML ดังนั้น หากเราต้องการแสดงสัญลักษณ์เหล่านี้บนหน้าเว็บโดยตรง HTML จะตีความผิดว่าเป็นจุดเริ่มต้นหรือสิ้นสุดของแท็ก ทำให้เกิดข้อผิดพลาดในการแสดงผล นอกจากนี้ สัญลักษณ์บางอย่าง เช่น เครื่องหมายลิขสิทธิ์ (©) หรือเครื่องหมายการค้า (™) อาจไม่มีอยู่ในชุดตัวอักษรมาตรฐานที่ใช้ใน HTML
HTML Entities คือวิธีแก้ปัญหาเหล่านี้ โดยเป็นรหัสพิเศษที่แทนสัญลักษณ์เหล่านั้น ทำให้เบราว์เซอร์สามารถแสดงผลได้อย่างถูกต้อง แม้ว่าสัญลักษณ์นั้นจะเป็นส่วนหนึ่งของ syntax หรือไม่มีอยู่ในชุดตัวอักษรที่ใช้
สัญลักษณ์ที่ต้องใช้ HTML Entities
มีสัญลักษณ์หลายประเภทที่มักจะต้องใช้ HTML entities เพื่อแสดงผลอย่างถูกต้อง สัญลักษณ์ที่พบบ่อยที่สุดได้แก่:
- เครื่องหมายน้อยกว่า (<): ใช้แทนเครื่องหมาย
< - เครื่องหมายมากกว่า (>): ใช้แทนเครื่องหมาย
> - เครื่องหมายแอมเพอร์แซนด์ (&): ใช้แทนเครื่องหมาย
&(และ) - ช่องว่างที่ไม่ตัดคำ ( ): ใช้แทนช่องว่างที่ไม่ให้เบราว์เซอร์ตัดคำขึ้นบรรทัดใหม่
- เครื่องหมายคำพูดเดี่ยว (' หรือ '): ใช้แทนเครื่องหมาย
'(apostrophe) - เครื่องหมายคำพูดคู่ ("): ใช้แทนเครื่องหมาย
"(quotation mark) - เครื่องหมายลิขสิทธิ์ (©): ใช้แทนเครื่องหมาย ©
- เครื่องหมายการค้า (™): ใช้แทนเครื่องหมาย ™
- เครื่องหมายทะเบียน (®): ใช้แทนเครื่องหมาย ®
นอกจากนี้ยังมีสัญลักษณ์พิเศษอื่นๆ อีกมากมายที่สามารถแสดงผลได้ด้วย HTML entities เช่น สกุลเงินต่างๆ (¥, €, £), เครื่องหมายทางคณิตศาสตร์ (±, ÷, ×) และตัวอักษรพิเศษจากภาษาอื่นๆ (à, é, ü)
HTML Entities ที่พบบ่อย: <, >, &,
เรามาดูตัวอย่างการใช้งาน HTML entities ที่พบบ่อยที่สุด:
< (Less Than)
หากเราต้องการแสดงข้อความ "10 < 20" บนหน้าเว็บ เราจะต้องใช้ HTML entity สำหรับเครื่องหมายน้อยกว่า:
<p>10 < 20</p>
เบราว์เซอร์จะแสดงผลเป็น:
10 < 20
หากเราไม่ใช้ HTML entity และเขียน <p>10 < 20</p> เบราว์เซอร์จะตีความ < เป็นจุดเริ่มต้นของแท็ก HTML และอาจทำให้เกิดข้อผิดพลาดในการแสดงผล
> (Greater Than)
เช่นเดียวกับเครื่องหมายน้อยกว่า หากเราต้องการแสดงข้อความ "20 > 10" เราจะต้องใช้ HTML entity สำหรับเครื่องหมายมากกว่า:
<p>20 > 10</p>
เบราว์เซอร์จะแสดงผลเป็น:
20 > 10
& (Ampersand)
เครื่องหมายแอมเพอร์แซนด์ (&) มีความสำคัญเป็นพิเศษ เนื่องจากใช้เป็นส่วนหนึ่งของ syntax สำหรับ HTML entities เอง ดังนั้น หากเราต้องการแสดงเครื่องหมายแอมเพอร์แซนด์บนหน้าเว็บ เราจะต้องใช้ HTML entity &:
<p>HTML Entities ใช้เครื่องหมาย & ในการกำหนด</p>
เบราว์เซอร์จะแสดงผลเป็น:
HTML Entities ใช้เครื่องหมาย & ในการกำหนด
(Non-Breaking Space)
โดยปกติแล้ว เบราว์เซอร์จะยุบช่องว่างหลายช่องที่ต่อเนื่องกันให้เหลือเพียงช่องว่างเดียว และอาจตัดคำขึ้นบรรทัดใหม่หากคำนั้นยาวเกินไป หากเราต้องการบังคับให้มีช่องว่างหลายช่อง หรือป้องกันไม่ให้เบราว์เซอร์ตัดคำขึ้นบรรทัดใหม่ เราสามารถใช้ HTML entity (Non-Breaking Space):
<p>This is a sentence with non-breaking spaces.</p>
<p>This is a very long word that should not be broken across multiple lines: supercalifragilisticexpialidocious</p>
เบราว์เซอร์จะแสดงผลเป็น:
This is a sentence with non-breaking spaces.
This is a very long word that should not be broken across multiple lines: supercalifragilisticexpialidocious
การค้นหา HTML Entities ที่ต้องการ
เนื่องจากมี HTML entities จำนวนมาก การจดจำทั้งหมดจึงเป็นไปไม่ได้ Fortunately, มีหลายวิธีในการค้นหา HTML entities ที่เราต้องการ:
- เว็บไซต์อ้างอิง HTML Entities: มีเว็บไซต์มากมายที่รวบรวมรายการ HTML entities พร้อมทั้งชื่อและรหัสที่ใช้ ตัวอย่างเช่น HTML5 Named Character References จาก W3C
- โปรแกรมแก้ไขโค้ด (Code Editors): โปรแกรมแก้ไขโค้ดหลายตัวมีฟังก์ชัน autocompletion ที่ช่วยให้เราค้นหา HTML entities ได้อย่างรวดเร็ว เพียงพิมพ์
&แล้วโปรแกรมจะแสดงรายการ entities ที่เกี่ยวข้องให้เลือก - ค้นหาใน Google: หากเราทราบชื่อหรือลักษณะของสัญลักษณ์ที่เราต้องการ เราสามารถค้นหาใน Google ได้ ตัวอย่างเช่น "HTML entity copyright symbol"
สรุป
HTML Entities เป็นเครื่องมือที่สำคัญสำหรับการแสดงสัญลักษณ์พิเศษบนหน้าเว็บได้อย่างถูกต้อง การใช้ HTML entities ที่ถูกต้องจะช่วยให้เว็บไซต์ของเราแสดงผลได้อย่างถูกต้องและสวยงามบนทุกเบราว์เซอร์และทุกอุปกรณ์ ในบทต่อไป เราจะมาเรียนรู้เกี่ยวกับการใช้ <iframe> เพื่อฝังเนื้อหาจากภายนอกเว็บไซต์ของเรา