Avoid Empty src or href

When an HTML tag contains an attribute with no value set, it is referred to as an empty attribute. In this case, src is the abbreviation for source and href is the abbreviation for hypertext reference. In the case of src, it is intended to be used to replace the current element and direct the browser to the appropriate external source, whether it is an image, JavaScript, etc. When the user’s browser processes this element, it pauses loading all other resources until that resource loads. On the other hand, href points and creates the connection to a location, or URL, where resources are located. Once those resources are recognized by the client (browser), they are downloaded in parallel. So, href is used to download the resources and then run the code. In the case of src, it loads all the resource first before running any code.

Where this really matters depends on which browser, and specifically which browser version, your users are coming in from. Some browsers, like Opera, handle this without issue, however, late versions of Internet Explorer, and now Edge, will make a request to the directory where the page is located. The Chrome and Safari browsers are different. These browsers make a request to the page itself. Early versions of Firefox also did this, but it has been subsequently fixed. So, depending on which browser you are utilizing, the outcome could be different, but an empty src and href can lead to corrupting user data, or like we mentioned earlier, causing the server to simply process unnecessary requests, which in turn looks like traffic, albeit unnecessary traffic, to your page. In a worst-case, if your website regularly gets a few million visitors a day, and this happens, you could very easily run out of system capacity. So, with that said, best practices would say to avoid empty source and link attributes altogether and not risk the potential headache.