How to create an HTML link on a web page

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

Creating a link on your web page or blog to another page requires an HTML a href tag to be inserted in the body section of HTML source code. Once the link is created, a visitor could 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 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

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 allows you to 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 then when 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.

Additional anchor attributes

The anchor tag also supports other attributes. For example, you could add the title attribute to describe the link, as shown in the link below, when hovering the mouse pointer over the link. 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, CMS, 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 work, 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 doing any of 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.