Working with HTML Hyperlinks
This guides examines how to add HTML hyperlinks to web pages, including options that include linking to 3rd party website and opening up new tabs when a link is clicked.
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
  • Complete the Exercise
Video locked
This video is viewable to users with a Bottega Bootcamp license

In this video, we will learn how to integrate links with HTML.

We'll start by creating a new <div> tag.

Next, to create a link we need to use a tag called <a href>, like this:

<a href = "your link"> content that needs to be linked </a> 
<div>
  My great <a href="http://google.com">article</a>
</div>

On the browser, there is a link* to the word "article".

medium

When you click on the underlined word, it'll take you to the link you desire. In this case, it is "www.google.com".

There are different options associated with the <a href> tag, and the most important one is target. You can give different variables for this target, though the most popular one is blank. What this means is that you're asking the browser to open the link in a new tab, so you don't have to leave your current page. This practice is considered a standard for both the user and owner. The owner of a page doesn't want the user to leave their page to view another link. This is where this target option plays a vital role.

<div>
  My great <a href="http://google.com" target="_blank">article</a>
</div>

That said, there are some situations when it is not the ideal option. For example, a user is in the home page of a website, and they want to navigate to the products page. In such a case, a new tab is not necessary. A rule of thumb is, use the target option when users are navigating to a different website, and not when they want to explore within the same website.

To recap, we use a tag called <a href> to include links to a web content. The most important attribute of this tag is target, to take the user to a different website. However, if the user is navigating within the same website, you may skip this option.