HTML in 1 Day: Chapter 4: Links and Navigation
By Shahin Mannan on
June 1, 2024
- Frontend Development
Creating Hyperlinks
Links are essential for navigating the web. They allow users to move between pages and sites, making the web a connected space. In this chapter, you'll learn how to create hyperlinks and build navigation menus.
Anchor Tags
The <a> tag, or anchor tag, is used to create hyperlinks. The href attribute specifies the URL of the page the link goes to.
Basic Example:
<a href="https://www.example.com">Visit Example</a>
Absolute vs. Relative URLs
- Absolute URLs: These are full URLs that include the protocol (http or https), domain name, and path. They are used for linking to external sites.
- Relative URLs: These are partial URLs that link to pages within the same site. They are shorter and more flexible, making site maintenance easier.
Examples:
Absolute URL:
<a href="https://www.example.com/page.html">Visit Example Page</a>
Relative URL:
<a href="/page.html">Visit Internal Page</a>
Opening Links in a New Tab
To open a link in a new tab, use the target="_blank" attribute. This enhances user experience by keeping the current page open.
Example:
<a href="https://www.example.com" target="_blank">Visit Example</a>
Building Navigation Bars
Navigation bars are essential for website usability, allowing users to move easily between different sections of a site.
Simple Navigation Bar Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Navigation Bar Example</title>
</head>
<body>
<nav>
<ul>
<li><a href="/home.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>
</body>
</html>
In this example, the <nav> element contains an unordered list (<ul>) with list items (<li>) that link to different pages.
Practical Exercise
- Create a New HTML File: Save it as
navigation.html. - Add Links: Create links using both absolute and relative URLs.
- Open Links in New Tab: Add links that open in a new tab using the
target="_blank"attribute. - Build a Navigation Bar: Create a simple navigation bar with links to Home, About, Services, and Contact pages.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Links and Navigation</title>
</head>
<body>
<h1>Links and Navigation</h1>
<p><a href="https://www.example.com" target="_blank">Visit Example</a></p>
<p><a href="/about.html">About Us</a></p>
<nav>
<ul>
<li><a href="/home.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>
</body>
</html>
Save and open this file in your browser to see the links and navigation bar in action.
Key Takeaways
- The
<a>tag is used to create hyperlinks. - Absolute URLs link to external sites, while relative URLs link within the same site.
- The
target="_blank"attribute opens links in a new tab. - Navigation bars improve website usability by providing easy access to different sections.
Next Steps
In the next chapter, we’ll explore how to add images and other media to your web pages, enhancing their visual appeal and interactivity. Keep practicing to master creating links and building navigation bars in HTML.
Please Sign In to post a comment.