Navigation
Learn how to use hyperlinks to connect different pages and create a navigable website.
Imagine a library where every book is glued shut unless you have a magic key to open it. Without hyperlinks, the internet would be exactly like that—a collection of isolated islands with no way to travel between them!
To create a link in HTML, we use the anchor tag, written as `<a>`. However, an anchor tag by itself doesn't know where to go. We must provide a destination using the href (hypertext reference) attribute. Think of the `<a>` tag as the 'hook' and the `href` as the 'address' of the house you want to visit. When you link to a website outside of your own project, it is called an external link. You must include the full URL, starting with `https://`, to ensure the browser finds the correct server across the vast web.
To link your users to a search engine, follow these steps: 1. Open the `<a>` tag. 2. Add the `href` attribute with the full URL. 3. Write the clickable text (the label). 4. Close the tag.
Code: `<a href="https://www.google.com">Search the Web</a>`
Quick Check
What does the 'href' attribute stand for and what is its purpose?
Answer
It stands for Hypertext Reference and it specifies the URL or destination of the link.
Most websites consist of multiple pages, like `index.html` for the home page and `about.html` for information. To connect them, we use internal links. Unlike external links, you don't need a full `https://` address. Instead, you use a relative path. If the files are in the same folder, the `href` is simply the name of the file. This creates a seamless navigation system for your users. If you have pages and want every page to link to every other page, you would need a total of links across your project!
Imagine you have two files: `index.html` and `gallery.html`. 1. In `index.html`, create a link to the gallery: `<a href="gallery.html">View Photos</a>`. 2. In `gallery.html`, create a link back home: `<a href="index.html">Go Home</a>`. 3. Ensure the filenames in your code match your actual files exactly, including lowercase letters.
Quick Check
If your file is named 'contact-us.html', what exactly should you put in the href attribute to link to it?
Answer
href="contact-us.html"
Sometimes you want a link to open in a new browser tab so the user doesn't lose their place on your site. This is common for external resources. To do this, we use the `target` attribute. By setting `target="_blank"`, you tell the browser to spawn a new window or tab for that specific link. Without this attribute, the browser defaults to `target="_self"`, which loads the new page in the same tab, replacing your current content.
Create a list where the internal link stays in the tab, but the external link opens a new one: 1. `<li><a href="about.html">About Us</a></li>` (Stays in tab) 2. `<li><a href="https://www.nasa.gov" target="_blank">Visit NASA</a></li>` (Opens new tab) 3. Note the underscore before the word 'blank'—it is required for the code to work!
Which of the following is the correct syntax for an external link?
When linking from 'index.html' to 'blog.html' in the same folder, what is the best href value?
The attribute target="_blank" is used to make a link open in the same window.
Review Tomorrow
In 24 hours, try to sketch the HTML code for a link that goes to 'portfolio.html' and opens in a new tab.
Practice Activity
Create a 'Mini-Web' project with three HTML files (Home, Hobbies, and Contact) and build a navigation menu that connects all of them.