post-image

Sử dụng HTML Entity

HTML

HTML Entity

Có một vài ký tự đặc biệt mà nếu nó xuất hiện trong một tài liệu HTML có thể gây hiểu nhầm cho bộ máy phân tích nguồn HTML (HTML source parser), chẳng hạn ký tự “nhỏ hơn” ( < ), khi gặp ký tự này bộ máy phân tích HTML có hiểu nhầm là nó đang bắt gặp một thẻ. Để tránh hiểu nhầm này, HTML sử dụng thực thể (HTML entity) &lt; để thay thế cho ký tự ( < ).Dưới đây là một vài ký tự thông dụng cần được thay thế bởi các thực thể (entity), danh sách đầy đủ bạn có thể xem ở phía cuối của bài viết này.

Ký tựMô tảThực thể
 Dấu cách không ngắt dòng (Non-breaking Space)&nbsp;
<Nhỏ hơn&lt;
>Lớn hơn&gt;
&Ký tự dấu và (ampersand)&amp;
Nháy kép (Double quotation mark)&quot;
Nháy đơn (Single quotation mark) (apostrophe)&apos;

Hãy xem một tài liệu HTML với sự xuất hiện của các thực thể và kết quả mà bạn nhìn thấy trên trình duyệt.

<!DOCTYPE html>
<html>
<head>
    <title>Entities</title>
    <meta charset="UTF-8">
</head>
<body>
 
    <h3>Entities example:</h3>
 
    HTML defines six levels of headings. <br/>
    The heading elements are: <br/><br/>
 
    <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
 
 
</body>
</html>

Kết quả:

Ngoài các thực thể đại diện cho các ký tự có thể gây hiểu nhầm nói trên, có một danh sách rất nhiều các thực thể đại diện cho các ký tự đặc biệt khác ( £ § ¢ ¥ © … )

CharacterDescriptionEntity Name
¢cent&cent;
£pound&pound;
¥yen&yen;
§section&sect;
©copyright&copy;
®registered trademark&reg;

Chú ý: Bạn có thể tìm thấy danh sách đầy đủ các thực thể HTML ở phía cuối của bài viết này.

Entity Name vs Entity Number

Có hai cách để bạn đề cập tới một thực thể đó là sử dụng “Tên của thực thể” hoặc sử dụng “Mã số của thực thể”. Chẳng hạn để đề cập tới ký tự nhỏ hơn ( < ) bạn có thể sử dụng tên thực thể ( &lt; ) hoặc sử dụng mã số thực thể ( &#60; ).

&entity_name;
 
&#entity_number;

Ưu điểm của việc sử dụng tên thực thể (entity name) đó là dễ nhớ. Nhưng nhược điểm là một số trình duyệt có thể không hỗ trợ đầy đủ tất cả tên các thực thể, nhưng chúng hỗ trợ một cách đầy đủ mã số của các thực thể.

DisplayDescriptionEntity NameEntity Number
 Non-breaking space&nbsp;&#160;
<Less than&lt;&#60;
>Greater than&gt;&#62;
&Ampersand&amp;&#38;
Double quotation mark&quot;&#34;
Single quotation mark (apostrophe)&apos;&#39;

Chú ý: Bạn có thể tra cứu danh sách các thực thể với tên và mã số đầy đủ ở phía cuối của bài viết này.

Non-breaking Space ( )

Thực thể &nbsp; được sử dụng để thay thế cho “dấu cách không bị ngắt dòng” (Non-breaking space). Để dễ hiểu bạn có thể xem hình minh họa dưới đây:

Su dung HTML Entity 1

Danh sách các thực thể

ISO 8859-1 Symbol HTML Entity

DisplayDescriptionEntity NameNumber Code
 non-breaking space&nbsp;&#160;
¡inverted exclamation mark&iexcl;&#161;
¤currency&curren;&#164;
¢cent&cent;&#162;
£pound&pound;&#163;
¥yen&yen;&#165;
¦broken vertical bar&brvbar;&#166;
§section&sect;&#167;
¨spacing diaeresis&uml;&#168;
©copyright&copy;&#169;
ªfeminine ordinal indicator&ordf;&#170;
«angle quotation mark (left)&laquo;&#171;
¬negation&not;&#172;
­soft hyphen&shy;&#173;
®registered trademark&reg;&#174;
trademark&trade;&#8482;
¯spacing macron&macr;&#175;
°degree&deg;&#176;
±plus-or-minus &plusmn;&#177;
²superscript 2&sup2;&#178;
³superscript 3&sup3;&#179;
´spacing acute&acute;&#180;
µmicro&micro;&#181;
paragraph&para;&#182;
·middle dot&middot;&#183;
¸spacing cedilla&cedil;&#184;
¹superscript 1&sup1;&#185;
ºmasculine ordinal indicator&ordm;&#186;
»angle quotation mark (right)&raquo;&#187;
¼fraction 1/4&frac14;&#188;
½fraction 1/2&frac12;&#189;
¾fraction 3/4&frac34;&#190;
¿inverted question mark&iquest;&#191;
×multiplication&times;&#215;
÷division&divide;&#247;

ISO 8859-1 Character HTML Entity

DisplayDescriptionEntity NameNumber Code
Àcapital a, grave accent&Agrave;&#192;
Ácapital a, acute accent&Aacute;&#193;
Âcapital a, circumflex accent&Acirc;&#194;
Ãcapital a, tilde&Atilde;&#195;
Äcapital a, umlaut mark&Auml;&#196;
Åcapital a, ring&Aring;&#197;
Æcapital ae&AElig;&#198;
Çcapital c, cedilla&Ccedil;&#199;
Ècapital e, grave accent&Egrave;&#200;
Écapital e, acute accent&Eacute;&#201;
Êcapital e, circumflex accent&Ecirc;&#202;
Ëcapital e, umlaut mark&Euml;&#203;
Ìcapital i, grave accent&Igrave;&#204;
Ícapital i, acute accent&Iacute;&#205;
Îcapital i, circumflex accent&Icirc;&#206;
Ïcapital i, umlaut mark&Iuml;&#207;
Ðcapital eth, Icelandic&ETH;&#208;
Ñcapital n, tilde&Ntilde;&#209;
Òcapital o, grave accent&Ograve;&#210;
Ócapital o, acute accent&Oacute;&#211;
Ôcapital o, circumflex accent&Ocirc;&#212;
Õcapital o, tilde&Otilde;&#213;
Öcapital o, umlaut mark&Ouml;&#214;
Øcapital o, slash&Oslash;&#216;
Ùcapital u, grave accent&Ugrave;&#217;
Úcapital u, acute accent&Uacute;&#218;
Ûcapital u, circumflex accent&Ucirc;&#219;
Ücapital u, umlaut mark&Uuml;&#220;
Ýcapital y, acute accent&Yacute;&#221;
Þcapital THORN, Icelandic&THORN;&#222;
ßsmall sharp s, German&szlig;&#223;
àsmall a, grave accent&agrave;&#224;
ásmall a, acute accent&aacute;&#225;
âsmall a, circumflex accent&acirc;&#226;
ãsmall a, tilde&atilde;&#227;
äsmall a, umlaut mark&auml;&#228;
åsmall a, ring&aring;&#229;
æsmall ae&aelig;&#230;
çsmall c, cedilla&ccedil;&#231;
èsmall e, grave accent&egrave;&#232;
ésmall e, acute accent&eacute;&#233;
êsmall e, circumflex accent&ecirc;&#234;
ësmall e, umlaut mark&euml;&#235;
ìsmall i, grave accent&igrave;&#236;
ísmall i, acute accent&iacute;&#237;
îsmall i, circumflex accent&icirc;&#238;
ïsmall i, umlaut mark&iuml;&#239;
ðsmall eth, Icelandic&eth;&#240;
ñsmall n, tilde&ntilde;&#241;
òsmall o, grave accent&ograve;&#242;
ósmall o, acute accent&oacute;&#243;
ôsmall o, circumflex accent&ocirc;&#244;
õsmall o, tilde&otilde;&#245;
ösmall o, umlaut mark&ouml;&#246;
øsmall o, slash&oslash;&#248;
ùsmall u, grave accent&ugrave;&#249;
úsmall u, acute accent&uacute;&#250;
ûsmall u, circumflex accent&ucirc;&#251;
üsmall u, umlaut mark&uuml;&#252;
ýsmall y, acute accent&yacute;&#253;
þsmall thorn, Icelandic&thorn;&#254;
ÿsmall y, umlaut mark&yuml;&#255;

Các thực thể khác được hỗ trợ bởi các trình duyệt

DisplayDescriptionEntity NameNumber Code
Œcapital ligature OE&OElig;&#338;
œsmall ligature oe&oelig;&#339;
Šcapital S with caron&Scaron;&#352;
šsmall S with caron&scaron;&#353;
Ÿcapital Y with diaeres&Yuml;&#376;
ˆmodifier letter circumflex accent&circ;&#710;
˜small tilde&tilde;&#732;
en space&ensp;&#8194;
em space&emsp;&#8195;
thin space&thinsp;&#8201;
zero width non-joiner&zwnj;&#8204;
zero width joiner&zwj;&#8205;
left-to-right mark&lrm;&#8206;
right-to-left mark&rlm;&#8207;
en dash&ndash;&#8211;
em dash&mdash;&#8212;
left single quotation mark&lsquo;&#8216;
right single quotation mark&rsquo;&#8217;
single low-9 quotation mark&sbquo;&#8218;
left double quotation mark&ldquo;&#8220;
right double quotation mark&rdquo;&#8221;
double low-9 quotation mark&bdquo;&#8222;
dagger&dagger;&#8224;
double dagger&Dagger;&#8225;
horizontal ellipsis&hellip;&#8230;
per mille &permil;&#8240;
single left-pointing angle quotation&lsaquo;&#8249;
single right-pointing angle quotation&rsaquo;&#8250;
euro&euro;&#8364;

Kết luận

Qua đây là một số chia sẻ về HTML Entity, mời bạn tiếp tục theo dõi các bài viết sau để hiểu rõ hơn về HTML.

Các bạn có thể tham khảo các bài viết hay về HTML tại đây.


Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.

Trở thành lập trình viên từ con số 0
Tags:
,

Leave a Reply

Your email address will not be published. Required fields are marked *