display Apple keys in HTML

Just saw an interesting kbd tag supported on Stackoverflow and started wondering how to display Apple keys like command, shift, control, option, etc. on the Web page.

And it actually is very straightforward using HTML character entities. The concept is well explained in this Wikipedia article. There are two forms: numeric character reference and character entity reference:


numeric character reference: either in decimal form (&#dddd;) or in hexadecimal form (&#xhhhh;), e.g. "less than" character can be expressed as < or <

character entity reference: in the form of &name; the same "less than" character can be expressed as <

Now, it is very clear how to display these special Apple keys with the help of entity tables such as this unicode table. Somehow I could not find the corresponding character entity reference table for the same keys.

These are the most common Apple keys you might use:

⌘ Command: ⌘
⇧ Shift: ⇧
⌃ Control: ⌃
⌥ Option: ⌥
⎋ Esc: ⎋

If you use TextMate, there is a convenient HTML bundle feature that helps to insert these special characters in an HTML document. Create a new HTML document, then goto Bundles menu => HTML => Entities => Pick the character you want. You can also use the autocomplete, e.g. type "command" and press tab.