Surprise – No Special Characters or Numbers Are Allowed To Be Used In IDs

Have you ever been working on a website and been completely stumped as to why something is no longer working that was working just a bit ago? We this happened to me a few weeks ago and it was quite the puzzle to figure out.

I was creating anchor links within a web page that allowed you to jump to a section of the page via a scrolling sub menu. My first thought was that someone had gone in and changed a theme setting. I spent about an hour trying to look around for some sort of setting that had been changed with no luck. The next thing I did was inspect the element and I found a JavaScript error so I jumped to the conclusion that this was broken because of some sort of JavaScript caching since we had been using an outside developer to help with optimizing our site.

When a few days had gone by and there was still no change with the full width display, I asked the backend developer that I work with for a suggestion. He took a look and low and behold I was told that you can’t use special character of numbers within an anchor tag.

Thank goodness this was an easy fix. I had the anchor id labeled something like #example1+ and changed it to #exampleplus. It is alright to leave the anchor label with the special character or number included. Who would have though something so simple could throw off the JavaScript allowing a page to load full width. Chalk this up to a good learning experience and I am happy to share this information in case anyone else is struggling with the same situation.

Anchor tag post image

Leave a Reply

Your email address will not be published. Required fields are marked *