Fix Error: HTML Hyperlink Being Appended To Current URL

html 5When working with HyperText Markup Language (HTML) a common error for newbies is the use of hyperlinks. Hyperlink allow you to link from one page to another using the <a> tag.

Sometimes, when using the <a> tag, users find their hyperlink being appended to the URL of the current page they are on. Usually, given that there is no underlying issue, this can be fixed fairly easily.

There are three reasons why users will find their hyperlink being appended:

  • invalid URL
  • anchor URL
  • preceding slash

Invalid URL

In it’s simplest term, the <a> tag must take an argument of the URL you want your text or image to link to. This URL belongs to the href attribute and must be one of the following formats:

  • <a href=”http://www.technouz.com”>
  • <a href=’http://technouz.com’>

Notice that in both cases, the URL starts with the HyperText Transfer Protocol identifier (HTTP). This is essential in order to tell your browser that it must use the HTTP protocol to open an external webpage.

In addition the URL must be consistently wrapped with either a single or double apostrophe. This is crucial for those who may draft content in word processing applications such as Microsoft Office Word where the apostrophes are automatically converted to speech marks for punctuation. Your browser does distinguish between them and may not recognise the link between two punctuation symbols. This could very easily result to a hyperlink being appended to your URL and is difficult to troubleshoot with the eye.

Anchor URL

If your href attribute contains a number sign (#) the browser will look for the anchor link within the same page. Therefore ensure that your intended external URL does not contain a number sign, or that you have not mistakenly included one in your code.

By default, anchor links with no preceding URL value will result in the hyperlink being appended to the current URL.

Preceding Slash

If your href attribute starts with a slash, this tells your browser to look within a local directory.

For example:

  • <a href=”/images/photo.jpg”>
  • <a href=”../subfolder/file.html”>

Is telling the browser that the link is within a local directory. The first example is explicitly directing the browser to a subfolder of the current working directory, so naturally it will append to the current URL, whereas the second example will go up a directory before navigating to the linked file.

Subscribe to Email Updates