how to use an html entity as text

Question

I am making a developer page for my website, and I have HTML code for a button to put into their own website. But the code for them to copy has an entity in it, and I need the entity to appear as text. Can anyone help?

HTML:

<button id="b">0</button><div id='votes'>⇐</div>

P.S. The HTML entity is &Leftarrow

Answer 1

If you want the text

<button id="b">0</button><div id='votes'>&Leftarrow;</div>

to appear on the page, as it seems, write it as

<button id="b">0</button><div id='votes'>⇐</div>

That is, the code in the question but the ampersand & before Leftarrow escaped as &, by normal HTML rules.

However, the character reference ⇐ is an addition in HTML5 and not supported by older browsers. It is a pointless risk to use it, instead of the HTML 4 entity reference ⇐, which is considerably more widely supported. Or you could enter the character “⇐” itself, provided that developers know how to use UTF-8 property, as they should.

The entity &Arrowleft mentioned in the question does not belong to any HTML version. The names of entity/character references for arrows are very confusing (who would have guessed that ← and ← are the same thing, but different from⇐?), which is yet another reason to use the character themselves, or numeric references like ⇐.

Note that independently of these notational issues, the character “⇐” is has limited font support. If you only use it in an icon-like manner, using an image, with an adequate alt text, is probably a safer option.

Answer 2

Use this chart http://dev.w3.org/html5/html-author/charref as guidance, and replace the HTML entities with their corresponding entity reference. So if you have < use < instead, for example.

Answer 3

Use this markup:

<button id="b">0</button><div id='votes'>&leftarrow;</div>

If you're posting this into some kind of CMS and it's changing your code, try wrapping everything in <pre></pre>.