How to create an HTML link on a web page

Updated: 12/31/2022 by Computer Hope
HTML a href tag

Creating a link on your web page or blog requires an HTML a href tag to be inserted in the body section of the HTML source code. Once the link is created, a visitor can click or tap the link to open another web page or file. Below are two examples with additional information on the different types of links you can insert into a page.

Note

The methods on this page for adding an HTML link result in the linked text having an underline. If you do not want the linked text to have an underline, see: How to create a link with no underline in HTML.

Absolute HTML link example

<a href="https://www.computerhope.com/">Computer Hope</a>

In the example above, the external link is an absolute path link (external link) that points to the Computer Hope website's homepage, as shown below. As long as the Computer Hope website is up and running and you have an Internet connection, you can visit the link with no errors.

Example

Computer Hope

Tip

With an absolute link, you can link to any URL (uniform resource locator) shown in your Internet address bar. For example, if you wanted to link to this page, you could copy the "https://www.computerhope.com/issues/ch001657.htm" address and paste it in the href portion of the link.

Relative HTML link example

In the example below, this link is a relative path link. It points to a file in the same directory as the page with the link.

HTML a tag and link example.

If the file "hope.html" did not exist in the same directory as the page trying to link to the page, you would get a 404 error. What makes a relative link unique is that it lets you link to a page that works online and offline.

Linking local files

Doing a relative link (internal link) allows the link to work online or offline in a local folder as long as the file exists. However, you must never use an absolute path when creating local files. For example, if the link points to C:\html\example.html, the file may work for your computer, but if opened on a different computer, the link won't work.

Tip

If you're working with an HTML editor like Dreamweaver, you can specify the local site folder and make all links relative to that root. For example, if we stored all our files in the C:\ch folder, links can be made relative to that folder. In other words, the link /jargon/h/html.htm is c:\ch\jargon\h\html.htm when opened locally and online, is https://www.computerhope.com/jargon/h/html.htm. In this example, the first forward slash on the link tells the browser to start at the site's root directory.

How to link to the homepage

To link a page back to your website homepage depends on how you structure your links. Below are two examples of how you can link to a homepage. In the first example, we're using the relative root directory, which is only a forward slash.

<a href="/">Computer Hope</a>

Next, you can create an absolute link to the home page, like the example below.

<a href="https://www.computerhope.com/">Computer Hope</a>

In this example, you can replace our full URL with your website's homepage URL.

Additional anchor attributes

The anchor tag also supports other attributes. For example, when hovering the mouse pointer over the link, you could add the title attribute to describe the link, as shown in the link below. See the link below for additional attributes that can be added to the anchor.

How to modify a hyperlink

Any hyperlink can be modified by changing the address of the URL. If you're editing an HTML page through a text editor (e.g., Notepad), locate the links href and change it to the new location. If using a WYSIWYG (what you see is what you get), CMS (content management system), or online editor, move the cursor to the link and try using the keyboard shortcuts Ctrl+L or Ctrl+K keyboard shortcut. If neither of these shortcuts works, you'll need to find a button or option that allows the link to be changed or updated.

Modifying a hyperlink in Dreamweaver

For example, we could modify a hyperlink in Dreamweaver by doing the following.

  1. Locate the link in the Code view and modify the href text to point to the new location.

or

  1. In Design view, move the cursor to the hyperlink you want to modify.
  2. Press the keyboard shortcut Ctrl+L or Ctrl+K, depending on your keyboard shortcut settings. Point to the new location. If the keyboard shortcut does not work, click Edit in the file menu and select Link and then Change Link.