How to make HTML Links

The link. Let’s talk about how to make HTML Links on the page. In this lesson, we’ll cover the most common uses of links that every webmaster needs to know. 

Links allow you to connect your page with to resources anywhere on the internet, you can click on a link and jump to another document. The code for creating a link is fairly simple.

How to make HTML Links – steps

To make a link, we use the A element <a>. A stands for anchor. On the opening tag, we need an href attribute. H-R-E-F equals quote quote.

Href stands for Hypertext Reference, this points to where we want the link to go.

Between the opening and closing A tags, put whatever it is that you want to be clickable, this could be text, an image, a movie, literally anything that can be displayed on your page can become the label for your link.

<a href="http://example.com">this is a link</a>

The phrase, this is a link, is now a link. If we click on it, it goes to the website at example.com. By default, the A element is an inline element. And it easily goes in the midst of the flow of some text, like this.

All of these are what’s called an absolute URL. You point to a specific place on the web, an absolute place. You must include the HTTP or the HTTPS in an absolute URL. When we use a modern browser these days, we can get away with just typing example.com up in the URL bar and the browser will fill in the rest. But when we make a link as a developer or someone adding content to the website, we need that HTTPS:// or HTTPS:// part.

Absolute URLs and Relative URLs

Both examples above are using an absolute URL (a full web address) in the href attribute.

A local link (a link to a page within the same website) is specified with a relative URL (without the “https://www” part):

<h2>Absolute URLs</h2>
<p><a href="https://www.w3.org/">W3C</a></p>
<p><a href="https://www.google.com/">Google</a></p>
<h2>Relative URLs</h2>
<p><a href="html_images.asp">HTML Images</a></p>
<p><a href="/css/default.asp">CSS Tutorial</a></p>

HTML Links – The target Attribute

By default, the linked page will be displayed in the current browser window. To change this, you must specify another target for the link.

The target attribute specifies where to open the linked document.

The target attribute can have one of the following values:

  • _self – Default. Opens the document in the same window/tab as it was clicked
  • _blank – Opens the document in a new window or tab
  • _parent – Opens the document in the parent frame
  • _top – Opens the document in the full body of the window
<a href="http://www.webseoforbeginners.com" target="_blank">Visit WebSEO.com!</a>

Leave a Reply