Valid-o-Link

Small tool for quick replacement of all spaces in a link-code by the 'unbreakable' URL-code %20, and all & signs by the valid html-notation &‍amp;

Background

I made a webpage which was passing the html-validator perfectly. Three months later I was checking again, coincidentally. What? A bunch of errors! But I just added some new links, carefully copied from the address bar of the browser.
The culprit? The "ampersand", the & sign, which has to be a &‍amp; for valid URL-encoding

In the names of maps or files in a site, empty spaces can bring on a broken link (and pages vanishing into space, or untraceable documents; especially in e-mails), which can be avoided by the use of the %20 code.

With this small tool you'll get rid of both inadequacies.

Entering the URL

Paste your link-code here:

Result

Your corrected URL-code is here:

Copy this code, and paste it in your html-editor.

Remarks

• With a click on a thus made link-URL (or a click on the button 'Try the link'), the page will be the same in all browsers, but the address line in the browsers can be different.
  Firefox is showing again the spaces instead of the %20 sign, and is showing a common & instead of the &‍amp;.
  Internet Explorer is showing also a common & instead of the &‍amp; in the link, but doesn't replace the %20 signs by spaces.
  The Opera address line is using as well the %20 signs as the &‍amp; of the link.
  And so on: all browsers are singing their own melody.
• The & is invalid html, but spaces in an URL are valid html (compare the html-validator).
• The & signs in parameters of an URL emerge particularly (and often: repeatedly!) in long URL's which are generated by a CMS or database.
• Example: the URL's produced by Google Maps.

Remarks for links to Google Maps

In pages of Google Maps a mini menu 'Link' is visible; in a pop-up the options are given: 'Paste link in e-mail or chat message' and 'paste HTML in website'.

• The second option has already the &‍amp; notation, the first hasn't!
• But the first option is the "pure link", which can be pasted somewhere: this one has to be thrown in this Valid-o-Link to get a valid html page.

The second option has the intention to put a Google Map directly in a box in a html page, by means of an <iframe>. Unfortunately, when you are using the recommended Strict DOCtype, this is delivering invalid html as well. To embed a Google Map in this way, a Transitional DOCtype is needed.

• See the Valid DOCtype page of W3C.
• The best method would be the embedding of the Google Map as <object>, but Internet Explorer 7 and before can not handle this.
• Workaround: embed the Google Map as <object>, and do it with a Conditional Comment as <iframe> for IE7 and before. With this workaround a Strict DOCtype can be maintained.

Tip

In your own site, you should never use a & sign in a directory name or file name, and never use a space in a directory name or file name!

francky,
july 2010