* 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>
*. Advanced Link Attributes
- target: Specifies where to open the linked document.
- _blank: Opens the link in a new tab or window.
- _self: Opens the link in the same frame (default).
- _parent: Opens the link in the parent frame.
- _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.
- <a href="#section1">Go to Section 1</a>
- <a href="#section2">Go to Section 2</a>
- <h2 id="section1">Section 1</h2>
- <p>This is Section 1.</p>
- <h2 id="section2">Section 2</h2>
- <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.