How To Create An HTML Link On A Web Page - Computer Hope

How to create an HTML link on a web page Updated: 12/31/2022 by Computer Hope

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 home page, 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.

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 home page

To link a page back to your website home page depends on how you structure your links. Below are two examples of how you can link to a home page. 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 home page 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.

• HTML <a> tag information.

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.

Related information

• How to link an image to another page in HTML.
• How to create a link that opens a new web page window or tab.
• How to create links to sections on the same page in HTML.
• How to change the color of links on a web page.
• What is a naked URL?
• See our hyperlink definition for further information and related links.
• HTML and web design help and support.