Skip to content
HTML Course

External links

Intro

Now let’s go over how to create an external link. An external link is a link to a web page on a different website.

Steps

Copy URL

To create an external link, first you need to copy a URL using your browser.

Go to your browser and then open up the site you want to link to. For this example, I’m using example.com. You can use the same site or a different one.

Copy the URL from the address bar, then go back to VS Code.

Create a new line after the first anchor element, type a, and then press Tab.

<a href="about.html">About</a>
<a href=""></a>

Add the URL in between the quotes.

<a href="about.html">About</a>
<a href="https://example.com/"></a>

Then add your link text. I’ll write External link.

<a href="about.html">About</a>
<a href="https://example.com/">External link</a>

If you check the preview, you should see a new link appear on the home page.

Open preview in browser

Now if you go to the preview and click on the link, a dialog will pop up. Unfortunately we’re not able to visit example.com inside of the live preview.

You can just click on the button that says Open Externally and it should open in your browser. Now you can click on the External link and it should take you to example.com.

You could also click Cancel on the dialog and select the URL from the address bar and use Control + C or Command + C to copy it. Then you could go to your browser, open a new tab, then use Control + V or Command + V to paste the address and hit Enter to visit the preview in your browser.

End

So that’s how you can create external links using HTML.

Final code

Check the last code snippet for the code that should be in between the body tags.