5. Links and Navigation

*  Links and Navigation 💝

In HTML, links and navigation elements are used to create a structured and easily navigable website. Here’s a basic overview of how they work:

# LINKS

Links in HTML are created using the <a> (anchor) tag. The href attribute within the <a> tag specifies the URL of the page the link goes to.

Example:

<a href="https://www.example.com">Visit Example</a>

href="https://www.example.com" : The URL the link points to.

Visit Example: The text that will be displayed as the clickable link.

*. Advanced Link Attributes

1. target: Specifies where to open the linked document.
2. _blank: Opens the link in a new tab or window.
3. _self: Opens the link in the same frame (default).
4. _parent: Opens the link in the parent frame.
5. _top: Opens the link in the full body of the window

1. target="blank" : Opens the link in a new tab or window.

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

2.  ' rel ' :Specifies the relationship between the current document and the linked document. Common values include noopener, noreferrer, and nofollow.

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

# Navigation : 

In HTML, the <nav> tag defines a section of a page that contains navigation links. These links can be for the current document or for other documents.

Common examples of navigation sections include menus, tables of contents, and indexes. 

Example :

<nav>

  <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>

</nav>

<nav> :  Defines a block of navigation links.

  <ul>  :  Defines an unordered list.

   <li>  :  Defines a list item.

   <a> : Defines the actual link. 

* Navigation with Internal Links : 

Internal links are used to navigate to different sections within the same page. This is done using IDs.

1. <a href="#section1">Go to Section 1</a>
2. <a href="#section2">Go to Section 2</a>
4. <h2 id="section1">Section 1</h2>
5. <p>This is Section 1.</p>
7. <h2 id="section2">Section 2</h2>
8. <p>This is Section 2.</p>

href="#section1": Points to an element with the ID section1.

* Responsive Navigation  : 

To create responsive navigation that adapts to different screen sizes, CSS and JavaScript are often used.

<nav>
  <ul class="navbar">
    <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>
  <button class="menu-toggle">Menu</button>
</nav>

<style>
  .navbar {
    display: flex;
  }
  .menu-toggle {
    display: none;
  }
  @media (max-width: 600px) {
    .navbar {
      display: none;
    }
    .menu-toggle {
      display: block;
    }
  }
</style>

<script>
  document.querySelector('.menu-toggle').addEventListener('click', function() {
    document.querySelector('.navbar').classList.toggle('open');
  });
</script>

In this example, CSS media queries and JavaScript are used to toggle the display of the navigation menu on smaller screens.

Visit Our homepage VISIT TO COMPILER

Go to Link