Webflow + Custom Code

HTML Encoding & Decoding

Overview
Do You Remember?
Tracking w/ Cookies & Web Storage
100
Custom Code
HTML Encoding & Decoding
100
Custom Code Character Limit
101
Inline Coding Techniques
4:41
104
Inline CSS
4:41
104
Sygnal Webflow Utilities ( WFU )
Sygnal Webflow Utils ( WFU )
200
Helper Functions
202
No items found.
Published
November 26, 2022
Updated
in lightbox

Here's the list of lower ASCII characters you'll normally encounter in English content, and in HTML markup.

 !"#$%&'()*+,-./
0123456789
:;<=>?@
ABCDEFGHIJKLMNOPQRSTUVWXYZ
[\]^_`
abcdefghijklmnopqrstuvwxyz
{|}~

I've broken these into groups for convenience.

Why & How Text Gets Encoded

Encoding and escaping is often about maintaining the ability to distinguish structure from content;

  • URL path structures, like protocol, domain, path, and query, from the contents within each of those.
  • HTML DOM element hierarchies, from the content within them.
  • Javascript code, from the content stored in arrays, JSON, and literal strings.
Because each of these grammars are different, the encoding rules are different too. This will be very important soon.

Because many of these characters are also relied upon for HTML markup, they must be encoded to prevent conflict.

For example, HTML uses angle brackets < and > to identify tags. Therefore if you have text content containing an angle bracket, it must be encoded. In HTML a < is encoded as an HTML entity &lt;

HTML Encoding

In most HTML encoders, these are the common text characters that are HTML-encoded, while others are left untouched.  

  • Less-than ( < ) becomes &lt;
  • Greater-than ( > ) becomes &gt;
  • Double-quote ( " ) becomes &quot;
  • Dollar-Sign aka Sect ( $ ) becomes &sect;
  • Ampersand ( & ) becomes &amp;
  • Single-quote ( ' ) becomes &#39;
  • Minus aka Hyphen ( - ) becomes &#45;

JSON Encoding

JSON is different, so JSON encoding is different.

  • Double-quote ( " ) becomes \"
  • Backslash ( \ ) becomes \\

See a table of comparisons.

Webflow & Character Encoding

When you use an HTML Embed or Custom Code, Webflow gives you the ability to insert CMS field content into your page.

If you're asking... ok, but how is that encoded? you're asking the right question.

It's HTML encoded. Always.

Where this causes problems

One of the most common areas where people experience issues with this is in trying to create JSON+LD content in the site, for Google SEO.

But that encoding problem can bite you. If your string has a double-quote in it, the HTML encoding won't encode it at all, and your JSON will get something like...

{
"title": "Bob's "bait" shoppe"
}

Which Google will choke fiercely on.

FAQs

Answers to frequently asked questions.

Videos
No items found.
Table of Contents
Comments
Did we just make your life better?
Passion drives our long hours and late nights supporting the Webflow community. Click the button to show your love.