Encode your HTML attribute values as well as other content

I recently wrote the following bit of code:

1
<meta name="author" content="willem & øen" />

Which got me thinking, should I encode these special characters? Even though they are inside the attribute values? It appears that this is a fairly common issue but I found it difficult to find a definitive answer so I thought I would write about it here. After a bit of Googling around, I found the answer to be yes you should always encode special characters in HTML content.

Taking that into consideration, the code above should actually be written as:

1
<meta name="author" content="willem &amp; &oslash;en" />

Any special characters in between any tags should also be encoded like so:

1
<div>H&eacute;ll&ouml;</div>

Also, something that I regularly forget is that any ampersands in URLs also need to be encoded so if you are linking to ?query=string&second=value then you should instead write ?query=string&amp;second=value

Pro tip

If you use Sublime Text, it can automatically encode html special characters:

  • Select the text you want to encode
  • Press CMD + Shift + P (or CTRL + Shift + P on Windows)
  • Type in encode and it will filter the options available
  • Select “HTML: Encode Special Characters”

Sources

You should follow me on twitter here.