Overview
Links are what we use to move around the web. In this lesson you will learn how to create a link to a web page, a link to a specific section of a web page, and an email link.
Hyperlinks
Hyperlinks are a foundational part of the World Wide Web. In essence, the web is a bunch of hypertext documents connected by hyperlinks. When you click one of these links, you are typically directed to a new web page, or moved to a different section of the page you are on. Other times, the link opens an email client.
Link Tags
To create a link, we use the <a> tags. The opening tag requires the href attribute. The value of the href is the URL of the page you want to open. If you are unfamiliar with the term URL, you can think of it as the address or location of the page or file you want to access. The example below shows how to create a link to IMDB’s website.
<a href="https://www.imdb.com">IMDB</a>
Notice the letters IMDB that are placed between the opening and closing tags. This text will appear on the screen. The link does not have to be a text link though. You can wrap an image, an image and text, or just about any other element that you want to turn into a link. If you move your mouse over a link, the arrow turns into a hand, indicating that the element is clickable. You can test this on the link below.
Link To A Page On Another Site
The example above uses an absolute URL. In order to link from one website to another, the href must point to the full web address (absolute URL). For example, to create a link on another website that points to this page, it would need to include the protocol (https://), the domain name (www.wombaco.com), and the path (/2020/05/16/html-links). So, the absolute URL for this web page is https://www.wombaco.com/2020/05/16/html-links and the link would look like this
<a href="https://www.wombaco.com/2020/05/16/html-links">This Post</a>
Open A Link In A New Tab
Often, when linking to another website, you will want to keep your own website open in the user’s browser so they can easily get back to it. One way to do this is to add the target attribute with _blank as the value. This will cause a new tab or new window to open, depending on the user’s browser settings.
<a href="https://www.wombaco.com/2020/05/16/html-links" target="_blank">Click here</a>
Click here to open this post in a new tab.
Link To A Page On The Same Site
If you want to create a link to a page within the same site you can use a relative URL. The relative URL is simply the path. For example, a link from this page back to the html course page would only require an href value of /html and the link would look like this
<a href="/html">HTML</a>
Link To A Section Of A Page
At times you may want to link to a particular section of a page. You can do this by adding a # at the end of the URL, followed by the id of the element you want to scroll to.
<a href="/html#lesson-7" target="_blank">Go to lesson 7 on the HTML page</a>
Click the link below to test this out. Notice when it opens, it does not put you at the top of the page, but scrolls down to Lesson 7.
Go to lesson 7 on the HTML page
Create an Email Link
You can create an email link by giving the href a value of mailto: followed by an email address. For example, to create a link that opens an email addressed to support@wombaco.com, the link would look like this
<a href="mailto:support@wombaco.com" target="_blank">Contact Support</a>
Click the link below to test it out. Feel free to send me a message!
Summary
Links are what we use to move around the web. We create links using <a> tags, which require the href attribute. The value of the href attribute needs to be an absolute URL to link to a page on another site. You can use a relative URL to connect to a page on the same site. You can link to a specific element on a page by adding a hashtag at the end of the URL, followed by the element’s id. To create an email link, you use mailto: followed by an email address. To open a link in a new tab or window, add target=”_blank”.