A Guide to Using External HTML Links

Reference an external website using anchor tags

HTML Code
kr7ysztof / Getty Images

To link to an external website, create an anchor in HTML that associates some specific text on your page to an external URL. When a visitor to your page clicks the associated text, he or she will jump to that link.

Creating Links in Content Management Systems

Most people create web content using a content management system. One of the most common, WordPress, powers a significant chunk of the web. To add a link, highlight some text then click an icon in the toolbar — the icons differ, but often look like a link of chain — then insert the URL of the external website into the pop-up box.

Although each CMS differs, if you hover your pointer over a link, you'll often see a pop-up link with a pencil and a broken chain link, to either edit the URL of the link or to remove it entirely.

Creating Links Using HTML

It's less common to insert links into a webpage using HTML, but quite a few use cases still justify this manual procedure.

To add a link manually, identify the word or phrase that will serve as the base of the link, as well as the full URL of the external site. For example, in the sentence, "Search for academic references using Google Scholar," you may link the term Google Scholar with the URL of that search service — https://scholar.google.com.

In the text-edit view of your website, where you see the underlying HTML code, you'll insert this example link as follows:

<p>Search for academic references using <a href="https://scholar.google.com>Google Scholar</a>.</p>

In this code, you see some HTML tags:

  • The paragraph tags, referenced with a p inside of angle brackets, set this sentence as its own paragraph on the page.
  • The anchor tag — an a inside of angle brackets — constitutes the link. The anchor tag takes an argument called href that points to the external website. You'll list the full URL (including the protocol) inside of double-quotation marks. When you close the opening anchor tag, all the text that follows until the closing anchor tag will appear as a selectable hyperlink on your page.

The anchor tag supports quite a few attributes that modify how the hyperlink works. Check out the W3Schools complete list of attributes for additional context.

To modify this link, simply tweak the HTML tags or the text that appears between them.

Using CMS versus HTML

It's usually best to use your CMS to modify hyperlinks because the CMS will verify that you haven't made any structural errors to the HTML tag that commonly occur during manual edits.