HTTP and HTTPS tags without using JavaScript

Very neat trick I found out recently is that if you omit the protocol from an HTML src tag it will use the same protocol as the current URL, which is ideal if you need to have one universal HTML tag that works with both HTTP and HTTPS without having to use JavaScript tricks to detect the protocol.
This is great to use with ad server tracking pixels for example, or any other images:

Standard HTML code:
<img src="http://www.google.co.uk/intl/en_uk/images/logo.gif">

Relative protocol version:
<img src="//www.google.co.uk/intl/en_uk/images/logo.gif">

A few important details:

  • The browser will use the same protocol for the image call as the base URL where the tag is on, akin to a relative-path URL. This means e-mail clients and the sorts (like file explorers) will not be able to use this (as there is no base URL)
  • Tested on IE6 + 7, FF2 + 3 and Safari 2 + 3.
  • Syntax is part of the HTML spec since 1995, just not widely used (don’t know why)

Posted

in

,

by