HTML Entities, Formatting and Minifying Explained

Web pages are built from three kinds of text: HTML for structure, CSS for style and JavaScript for behavior. Each has its own housekeeping, from escaping special characters to making the files smaller.

Escaping characters in HTML

Some characters have a special meaning in HTML, so to show them as plain text you write them as entities. The less-than sign becomes <, the greater-than sign >, the ampersand & and the quotation mark ". If text from a user is placed in a page without escaping, someone can slip in a script and attack other visitors, which is called cross-site scripting. Escaping on output is the basic defense. The HTML Entity Encoder converts text both ways.

Formatting versus minifying

• Formatting adds line breaks and indentation so people can read the code. It makes files a little bigger.
• Minifying removes everything a browser doesn't need, such as comments, spaces and line breaks. It makes files smaller and harder to read.

Use the HTML Formatter when you inherit a page that is one long line, and keep the readable version as your source. Minify only the copy that you publish.

What minifying saves

The CSS Minifier and the JavaScript Minifier strip comments and whitespace. Real savings are often 10 to 40 percent before compression. Servers also compress files with gzip or Brotli, which already shrinks repeated spaces well, so the extra gain from minifying is smaller than it looks, but it still helps.

Safety notes

• The JavaScript minifier here removes comments and spaces but doesn't rename your variables, so it can't change what your code does. Build tools that rename variables save more, but need testing.
• Keep your original files. Minified code is very hard to edit.
• Test the page after minifying, especially scripts that rely on line breaks to end statements.