4. Links and Navigation

Welcome to the fourth section of the HTML course. Here, we are going to dive into one of the core features of the web—links and navigation. Links are what connect web pages to each other, making up the vast network we know as the internet. There are a few methods to create links and allow users to navigate between pages, within pages, and even link to external applications like an email address or phone number.

4.1 Creating Hyperlinks

The <a> tag (short for “anchor”) is probably one of the most basic HTML tags. It lets you create hyperlinks that connect web pages, documents, or even parts of the same page.

Anchor Tag Basic Structure:

The basics for the <a> tag look something like this

<a href="https://www.example.com">Click here to visit Example.com</a>

• href: This attribute defines the URL of the destination.
• Text Between the Tags: What the user will see in their browser as the clickable link

When the user clicks the text “Click here to visit Example.com,” the browser will go to the URL provided in the href attribute.

Linking to an External Website:

To link to another website, simply use the full URL in the href attribute.

<a href="https://www.google.com">Go to Google</a>

Opening Links in a New Tab:

You can make a link open in a new browser tab by adding the target=”_blank” attribute.

<a href="https://www.example.com" target="_blank">Visit Example.com in a new tab</a>

Security Note: Always pair target="_blank" with rel="noopener noreferrer" to protect your site from certain security risks.

<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">Visit Example.com</a>

Linking to a Page on Your Website:

When you’re linking to a page on the same website, you don’t need to use the whole URL-you can just use the relative path.

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

This will point to a page within the same directory or server.

Linking to a Particular Section of Another Page:

You can link to a specific portion of another web page with an id within that page.

<a href="page.html#section-id">Go to Section</a>

Activity:
Create an HTML page where you link both to external and internal pages. Using the target=”_blank” attribute opens links in new tabs, try experimenting with relative paths.

4.2 Bookmarking with Anchors

Anchors let you create “bookmarks” or internal links that allow users to go to certain parts of the same web page. This is very handy for long pages such as the FAQ sections or articles.

How Anchors Work:

To insert an anchor link, you will need two pieces:

1. A link to the anchor with a # symbol followed by an id:

   <a href="#contact">Go to Contact Section</a>

2. An element with the matching id where the page should scroll to:

   <h2 id="contact">Contact Us</h2>

If a user clicks a link, the page will scroll automatically toward an element with the matching id (in this case, the “Contact Us” section).

Creating a Table of Contents with Anchors:

Use anchor links to create a table of contents for a page so that users can skip directly to certain sections.

Example:

<a href="#section1">Go to Section 1</a>
<a href="#section2">Go to Section 2</a>

<h2 id="section1">Section 1</h2>
<p>Content for Section 1...</p>

<h2 id="section2">Section 2</h2>
<p>Content for Section 2...</p>

Interactive Activity:
Write a long HTML document with sections with anchor links at the top of the page to navigate to each one.

4.3 Linking to Email and Telephone

HTML does not only enable you to create hyperlinks but also initiate certain actions like opening the email application or dialing a telephone number.

Email Link

You may use mailto: protocol within the href attribute to style a hyperlink to open the recipient’s default email client with the recipient’s e-mail address already filled in.

Example:

<a href="mailto:someone@example.com">Send an email to us</a>

This link will automatically open the user’s email application – say, Gmail or Outlook-and automatically fill the “To” field with someone@example.com.

Fill the Subject and Body of Email also:

You can preset the subject line and the body of the email by including parameters like?subject=and&body=along with your mailto: link.

Example:

<a href="mailto:someone@example.com?subject=Inquiry&body=Hello, I have a question about...">Send an email with a subject</a>

Hyperlink Email to Phone Numbers:

You may use the tel: protocol to create a link that will solicit a phone call from the user on mobile devices.

Example:

<a href="tel:+1234567890">Call Us Now</a>

Upon being clicked on a mobile device, this link will prompt for making a call to the number specified.

Best practices with contact links

• Always offer alternative contact means in case the mailto: or tel: is not supported by the user’s device.
• Phone numbers must always be presented in plaintext for best readability.

Activity:
Try building an HTML page with you linking to both email addresses and phone numbers. Test these links out on different devices (mobile and desktop).

4.4 Creating a Navigation Menu

A navigation menu is a staple part of most websites. It’s what gives users an easy mechanism for navigating your site between different sections or pages. HTML lists and links are often used to create navigation menus.

Basic Navigation Menu:

The simplest way to create a navigation menu is through an unordered list of links.

Example:

<ul>
  <li><a href="index.html">Home</a></li>
  <li><a href="about.html">About</a></li>
  <li><a href="services.html">Services</a></li>
  <li><a href="contact.html">Contact</a></li>
</ul>

This produces vertically aligned list of links, but applying CSS you could easily change it to horizontal navigation.

Styling the Navigation Menu:

You may enhance this simple list and transform it into a stunning horizontal menu applying CSS .

Example:

<style>
  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
  }

  li {
    float: left;
  }

  li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }

  li a:hover {
    background-color: #111;
  }
</style>

<ul>
  <li><a href="index.html">Home</a></li>
  <li><a href="about.html">About</a></li>
  <li><a href="services.html">Services</a></li>
  <li><a href="contact.html">Contact</a></li>
</ul>

• List-style-type: none; removes the bullet points.
• Float: left; floats the list items horizontally.
• Display: block; fills up the area entirely of the list item. The entire area now is clickable.

Responsive Navigation Menu:

Nowadays, a proper navigation working on any screen size is of utmost importance. In mobiles, you could hide the menu and provide a “hamburger” icon to show it.

Example:

<style>
  /* Basic styles from the previous example */
  @media screen and (max-width: 600px) {
    ul {
      display: none;
    }
    .menu-icon {
      display: block;
      cursor: pointer;
    }
  }
</style>

<div class="menu-icon">☰ Menu</div>
<ul>
  <li><a href="index.html">Home</a></li>
  <li><a href="about.html">About</a></li>
  <li><a href="services.html">Services</a></li>
  <li><a href="contact.html">Contact</a></li>
</ul>

You may add JavaScript that would show or hide the menu when clicking the “menu-icon”.

Activity:
Try making your own navigation menu. Style it using CSS and try out responsive design techniques to make it work on mobile devices.

4.5 Conclusion

You have so far learned the basic techniques for creating links and navigation menus. Let’s recap what you’ve learned so far:

• Creating Links using the `<a

` tag.

• Bookmarking with Anchors to navigate around a page
• Linking to Email and Telephone to reach people directly.
• Creating Navigation Menus using lists and CSS for styling.

When you develop all of this, it’s going to end up creating websites with navigation components that are easier to use, making it a great experience for the end-users.

Now let’s learn to work with images and multimedia content in HTML in the next lesson.

Quiz Time:

This concludes the fourth chapter on Links and Navigation. You should now feel equipped to build effective, user-friendly links and menus for your web pages. Practice makes perfect, so keep at it, and remember to try out some styles and layouts to make your navigation menus stand out!