HTML entities คืออะไร และคุณต้องใช้มันเมื่อไร?

HTML entities เป็นรหัสพิเศษที่แทนอักขระที่อาจจะถูกตีความว่าเป็น markup หรืออักขระที่ยากต่อการพิมพ์ พวกมันเริ่มต้นด้วย & และสิ้นสุดด้วย ;

อักขระที่คุณ ต้องหลีกเลี่ยง

สี่อักขระมีความหมายพิเศษใน HTML และต้องเขียนเป็น entities เมื่อคุณต้องการอักขระตามตัวอักษร:

<   →  &lt;     (less-than — otherwise starts a tag)
>   →  &gt;     (greater-than)
&   →  &amp;    (ampersand — otherwise starts an entity)
"   →  &quot;   (inside attribute values)

<!-- ❌ the browser tries to parse <div> as a tag -->
<p>Use the <div> element</p>

<!-- ✅ shows the literal text "Use the <div> element" -->
<p>Use the &lt;div&gt; element</p>

นี่เป็นพื้นฐานของ การป้องกัน XSS ด้วย: เมื่อคุณแสดงข้อความที่สร้างโดยผู้ใช้ การหลีกเลี่ยง <, >, & จะป้องกันไม่ให้เบราว์เซอร์เรียกใช้แท็ก <script> ที่ฉีด Frameworks (React, Vue) หลีกเลี่ยงโดยค่าเริ่มต้นด้วยเหตุผลนี้

Entities ที่มีประโยชน์อื่นๆ

    non-breaking space (keeps words together, no line break)
©   ©      ®   ®     ™  ™
—  —      – –     … …
×  ×      ÷ ÷
©   © by decimal code   © © by hex code

หมายเหตุสมัยใหม่: UTF-8 ลดความต้องการ

<meta charset="UTF-8" />
<p>© 2024 — café résumé 日本語</p> <!-- with UTF-8 you can type these directly -->

ด้วย charset UTF-8 คุณสามารถเขียนสัญลักษณ์และอักขระที่มีการออกเสียงส่วนใหญ่ได้โดยตรง; entities จึงเป็นสิ่งที่จำเป็นหลักสำหรับอักขระ markup ที่ สงวนไว้ (<, >, &, ") และ  

ทำไมมันถึงสำคัญ

Entities ให้คุณแสดงอักขระที่สงวนไว้เป็นข้อความและเป็นศูนย์กลางของการป้องกัน XSS เมื่อเรนเดอร์เนื้อหาที่ไม่น่าเชื่อถือ

ด้วย UTF-8 คุณหลายครั้งไม่ต้องใช้มันสำหรับสัญลักษณ์ แต่การหลีกเลี่ยง <, >, & อย่างถูกต้องเป็นสิ่งจำเป็นเมื่อใดก็ตามที่ข้อความดิบอาจถูกเข้าใจผิดเป็น markup