What’s the Difference Between Links and URLs?

What’s the difference between a link and a URL, and does it matter?

The difference between a link and a URL doesn’t matter if you’re just having a casual conversation about getting a direct path to some content on a web page. Like if you’re sharing a great article with one of your buddies.

From a high (non-technical) level, a link refers to a clickable user interface that will take you to a specific location. The location is defined by a URL.

Visually, a link could be represented by a text element, an image, a button, or other UI elements — which are all defined by HTML code (more about that later).

If it’s clickable and has a URL behind the surface, it’s a link.

Both techies and non-techies use the terms link and URL interchangeably, much in the same way that people refer to typefaces and fonts as the same thing (even though they’re not, technically.). There is however a difference between URLs and links when you start to break it down technically.

Okay, let’s get a little more technical.

The technical structure of a URL

A URL typically consists of the following elements, a protocol, a domain name, a top-level domain, and a slug. Let’s use a URL to one of my typography tutorials as an example:

https:/techstacker.com/typography-italic-vs-bold

• https:// is the protocol
• techstacker is the domain name
• .com is the top-level domain
• typography-italic-vs-bold is the slug

Btw, URL stands for Universal Resource Locator.

In normal-speak the above is commonly referred to as a link. From a non-technical perspective, it’s not wrong. Technically, however, the URL is just one part of what makes up a link. To make the URL above an interactive, clickable link, we need to combine it with another element, and that’s what HTML is for.

How HTML defines a link/URL

Usually, when you see a link on a website, you see it as a highlighted part of a sentence. Like this text that leads to TechStacker’s front page.

• Visually the highlighted text above appears as a clickable link.
• Below the visual surface, there’s a URL with a location

Both the link text and the URL are defined within an HTML anchor element <a>.

The HTML anchor element contains a href attribute with a value as its source — and the value is the URL that takes the person clicking on it to the destination you have defined.

Here’s the HTML code for the paragraph with the link to the TechStacker front page:

<p>
  Usually when people talk about links, they refer to a highlighted part of a
  sentence, like <a href="https://techstacker.com">this text</a> that leads to
  TechStacker’s front page.
</p>

You can use other UI elements than text to create links

Let’s say you want to make an image work as a link, and lead the user to some location when they click on it. To do that, you simply take your image element <img> and wrap it inside an anchor element.

So take the anchor element from the HTML example above:

<a href="https://techstacker.com">this text</a>

And this image element:

<img
  src="https://upload.wikimedia.org/wikipedia/en/7/77/EricCartman.png"
  width="150"
  height="150"
  alt="Eric Cartman"
/>

Now simply replace this text with your image element like this:

<a href="https://techstacker.com">
  <img
    src="https://upload.wikimedia.org/wikipedia/en/7/77/EricCartman.png"
    width="150"
    height="150"
    alt="Eric Cartman"
  />
</a>

And the result, an image that works as a link:

Try moving your mouse over the image, and you’ll see the URL to this website displayed in the bottom left corner of your browser.

If you click on the image you’ll be taken to the front page, because of the specified URL within the anchor element. To open the link in a new browser tab, hold CMD (Mac) or CTRL (Windows) while you click on it.

To conclude link vs URL

If you ask most people, techies or non-techies:

• “Please give me the URL the website about X”
• “Please give me the link to the website about X”

The person on the other end will typically go to their browser address bar and copy-paste the URL to you. What they’re providing you is technically a URL, but if you call it a link, no harm is done, the result is the same.

If however you’re asked to insert a link in a blog post, there could be a number of things besides the URL that is relevant for you to consider:

• Should the link open a new browser tab when you click on it?
• Should it be a follow or no-follow link (SEO related)?
• What type of content should the link wrap around? Text? An image?
• Etc.

So yes, once you start talking about how a link should behave, the technicalities become relevant, and it’s no longer enough to just talk about providing URL or a link. You also have to understand the context of how you’re both using and presenting the path to the location where you want the user to go.