Web Writing HTML Entities Cheat Sheet

Over the years I’ve copied and saved HTML Character Entities that I use on a regular basis, and I thought I’d share my cheat sheet.

These are important to me as a technical web publisher specializing in writing blogging and WordPress tutorials, so I’ve explained why and how I use them in the table below. They might not work for your needs, and they do not represent all of the HTML entities available, but they might inspire you to create your own cheat sheet. I’ve included a list of HTML Entities references at the bottom of the post to help you.

I keep this list in a text file in my constantly open text editor, NoteTab Pro. You may copy and paste these into a file in your favorite text editor, too. Do not put these in Word as it will probably mess them up.

Also note that these characters and symbols will look different on your site depending upon the font you are using.

Category	Symbol	Entity	Description	Explanation
WordPress
	Wordpress	`Wordpress`	Wordpress	When I write about the lowercase p in Wordpress, because WordPress forces an uppercase P, I need to create it manually.
Web Specific
	http://	`http://`	Website Address	Used to publish an example website address and not have WordPress convert it into a link.
	.	`.`	Period (fullstop)	WordPress will sometimes convert a site title with dot com, such as lorelle.wordpress.com, into a website address when I don’t want to. It is rare and inconsistent. I add the fullstop period between the domain and the com to stop that.
	/	`/`	Solidus or figure slash (fraction) (/ is normal slash)	Used in website address, when I don’t want WordPress to convert it into an address for tutorials, I replace the slash with the HTML entity.
	\	`\`	Reverse solidus (backslash)	When publishing articles on computer file structures or in code when I need WordPress ignore the backslash.
	@	`@`	@ At symbol	To type out an email address that will not convert into a `mailto` email address.
Coding and Programming
	<	`< or <`	Less than	Used constantly for publishing code such as `<div>` so the browser and WordPress will not recognize it as HTML code.
	>	`> or >`	Greater than	Used rarely for publishing code in WordPress as the `<` symbol used in HTML, PHP, and other programming languages tells the browser and publishing platform that code is starting. Without that symbol before it, wrapped around a specific element of code, the browser ignores the `>`. I will write `<div>`, saving a few keystrokes.
	&	`&`	Ampersand	WordPress converts most ampersands into this HTML entity automatically, but when publishing code in WordPress for technical articles and tutorials, I need to use it to ensure the code or HTML entity is readable, as I’ve done throughout this article.
		` `	Non-breaking space	Used often to force a space, especially with writing code or using it within an HTML `div` tag.
	"	`"`	Straight Quote Mark	When publishing code in WordPress, I need to convert curly quote marks into straight quote.
	'	`'`	Straight Apostrophe	Used when publishing code to make straight apostrophes not curly ones.
	“	`“ or “`	Curly Quote Mark Left or Opening	Once in a while a sequence of quotes will confuse WordPress and the automatic curling of quote marks, leaving two openings and no closing or a closing with no opening quote mark. This forces them to line up right.
	”	`” or ”`	Curly Quote Mark Right or Closing	“
	*	`*`	Asterisk	When publishing CSS code, asterisks are used in CSS comments.
	:	`:`	Colon	Used for publishing code, especially in website addresses I wish WordPress to not convert into a link.
	#	`#`	Number sign #	Used for publishing code sometimes, especially when publishing HTML entities and jump link examples.
	?	`?`	Question mark	Used for publishing code sometimes, especially when publishing PHP code for techniques.
	;	`;`	Semi-colon	“
	,	`,`	Comma	“
	=	`=`	Equals sign	“
	(	`(`	Left parenthesis (	“
	)	`)`	Right parenthesis )	“
	[	`[`	Left square bracket [	Used for publishing code, specifically WordPress shortcodes.
	]	`]`	Right square bracket ]	“
Numbers and Money Symbols
	‰	`‰`	%
	$	`$`	Dollar sign
	¢	`¢`	Cent sign ¢	There is no key on your keyboard for the cents sign.
	+	`+`	Plus sign
	×	`× or ×`	Multiplication
	÷	`&#247 or ÷`	Divide
	%	`%`	Percent sign
	π	`π`	Pi
	°	`°`	Degree sign °
	˜	`˜ or &tilde;`	Tilde ~
	≈	`≈ or ≈`	Almost equal ≈
	≠	`≠ or ≠`	Not equal
	≡	`≡ or &equiv;`	Equivalent
	≤	`≤ or ≤`	Less or equal
	≥	`≥ or ≥`	Greater or equal
Legal Symbols
	©	`©`	Copyright sign
	®	`®`	Registered trademark sign
	§	`§`	Section sign
	™	` or ™`	Trademark sign
Writing
	!	`!`	Exclamation mark
	«	`« or «`	Double Arrow or Double Angle Quotation Mark (Left)	Used often in the HTML `title` in the `head` of a WordPress site as part of the default for the `wp-title()` template tag in WordPress Themes. When copying web page links with the CoLT Firefox Extension, I do a search and replace for this symbol in my text editor to replace it with a dash for link lists.
	»	`» or »`	Double Arrow or Double Angle Quotation Mark (Right)
	-	`-`	Hyphen
	–	`–`	En dash
	—	`—`	Em dash —
Graphic Symbols and Characters
	♥	`♥`	Heart symbol	Used for fun.
	•	`•`	Bullet	Used between contact information or lists of items in a sentence form rather than an HTML list in WordPress Text Widgets.
	·	`· or ·`	Middle Dot	“
	∞	`∞∞`	Infinity	“
	◊	`◊ or &loz;`	Lozenge or Open Diamond	“
		` `	Space	Like the non-breaking space, this is another way to force a space.
		`  or  `	Thin space	Like space and non-breaking space, this creates a thinner, narrower space between words.
	←	`← or ←`	Left arrow	Used rarely for pointing in tutorials and sometimes in a WordPress Text Widgets.
	↑	`↑ or ↑`	Up arrow	"
	→	`→ or →`	Right arrow	"
	↓	`↓ or ↓`	Down arrow	"
Foreign
	à	`à or à`	à
	á	`á or á`	á
	ã	`ã or ã`	ã
	ä	`ä or ä`	ä
	â	`â or â`	â
	æ	`æ or æ`	æ
	ç	`ç or ç`	ç
	è	`è or è`	è
	é	`é or é`	é
	ê	`ê or ê`	ê
	ë	`ë or ë`	ë
	ñ	`ñ or ñ`	ñ
	ö	`ö`	Umlout ö
	¡	`¡`	Inverted exclamation ¡
	¿	`¿`	Inverted question ¿
	¥	`¥`	Yen symbol ¥
	€	`€`	Euro symbol €
	£	`£`	Pound sterling £

How to Use HTML Character Entities in WordPress

To uses these HTML Entities in posts, Pages, and Text Widgets, use the WordPress Text Editor not the Visual Editor to copy and paste them into place.

Publishing code in your WordPress posts and Pages is a little more complex. On WordPress.com and if you are using the Jetpack WordPress Plugin, or another syntax highlighting WordPress Plugin, you may use the [sourcecode language="html"] shortcode to highlight a block of code.

To publish code within a sentence such as <a href="http://lorelle.wordpress.com/" title="Lorelle on WordPress.">example of a link</a>, I use the <code> HTML tag around the code and it really looks like this:

To publish code within a sentence such 
as <code>&lt;a href=&#034;http&#058;&#047;&#047;lorelle&#046;wordpress&#046;com&#047;&#034; title=&#034;Lorelle on WordPress.&#034;>example 
of a link&lt;/a></code>, I use the <code>&lt;code></code>
HTML tag around the code and it really looks like this:

Ask you can see, one of the most challenging publishing tasks is to publish such code to help others use such code in their posts, explained in the articles below.

HTML Character Entities Lists

There are many lists of HTML Character Entities on the web. I've included in this list some of the ones I find most helpful, with the characters I use in my own web writing.

6 Comments

Andy

Posted February 23, 2015 at 3:41 am | Permalink

Hi Lorelle,
when writing about places or words in a different language that use accented characters should I simply type those into WordPress or is it preferable to use the HTML entities?
Regards,
Andy

- Lorelle VanFossen
  
  Posted February 24, 2015 at 12:53 am | Permalink
  
  If you are writing in a specific language within the interface of WordPress set up for that language, you use the characters on the keyboard or as you normally would. If you are using characters not on the keyboard, you would use the character entities. If you are blogging in another language, WordPress automatically converts the letters into HTML character entities if they are “normal” characters in that language. All web publishing tools do that for the language they are set for. You just don’t see it. Visit a website in Hebrew or something and look under the hood. You will see a mess of HTML character entities in the source code of the web page.
  
- Andy
  
  Posted February 24, 2015 at 3:41 am | Permalink
  
  I was specifically thinking the European accented characters that you mentioned above. I tried the characters, é € ø æ © none of which are on my UK-GB keyboard, I used charmap or alt+Unicode number to get those. The visual editor just accepted those and in the front end I just see the single characters in the source too. I also tried using the Android WordPress client and that also put these characters in as a single unicode character, not the HTML entities.
  
  - Lorelle VanFossen
    
    Posted February 24, 2015 at 1:28 pm | Permalink
    
    Excellent test. The charmap is the Character Map, a visual representation of the HTML entities. Look under the hood at the source code and you will probably see most of these converted to HTML entities. Thanks!
saradwrites

Posted February 23, 2015 at 4:12 pm | Permalink

A little over my head right now but I now have a great resource for all things WordPress and html. Thanks Lorelle. I did write down the one for copyright symbol as I use that one a lot.

Does it mess the code when copy/pasting from google docs?

- Lorelle VanFossen
  
  Posted February 24, 2015 at 12:49 am | Permalink
  
  Not if you are careful. Paste using the paste from Word or put it in via the Text Editor.

One Trackback/Pingback

By WordPress School: Visual and Text Editors « Lorelle on WordPress on February 24, 2015 at 5:17 pm

[…] whole sections of acceptable and web standard code. This is most evident in the use of HTML tables, Lorelle on WordPressHTML Character Entities, publishing code, and other styles such as inline styles. I’ve spent […]