Text Links
Text links are the most common type of link on the web. They are created using the <a> (anchor) element. The text inside the anchor tag becomes clickable and acts as the link users interact with.
<a href="destination_url">Link Text</a>
- href specifies the destination URL
- The text between the tags is what users click
Example:
<a href="https://www.example.com">Visit Example.com</a>
In this example, clicking Visit Example.com will navigate the user to the specified website.
Best practice
Always use clear and descriptive link text so users know where the link will take them.
Image Links
Links don’t have to be text — images can also be clickable. To create an image link, place the <img> element inside an <a> element.
<a href="destination_url">
<img src="image_source" alt="Image Description">
</a>
Replace "destination_url" with the URL you want the link to point to. Set the "src" attribute of the <img> tag to the image source URL. The "alt" attribute provides alternative text for the image, serving as a description for visually impaired users or if the image fails to load.
Example:
<a href="https://www.example.com">
<img src="image.jpg" alt="Company logo linking to homepage">
</a>
In this example:
- The image becomes clickable
- Clicking the image navigates to the specified URL
- The alt attribute provides accessibility and fallback text
Image links are commonly used for logos, banners, and navigation icons.
Absolute and Relative URLs
Links can point to different web pages or sections within the same page. There are two types of URLs: absolute and relative.
Absolute URL/File Path
Absolute file paths specify the complete URL or file path from the root directory. They provide the full address for a file, including the domain name. Absolute file paths are useful when linking to external websites or when you want to specify the exact file location.
- An absolute file path begins with the protocol (http:// or https://) and includes the domain name. For example, "https://www.example.com/" points to the "www.example.com" domain.
Absolute Path Example:
<a href="https://www.example.com/about.html">About</a>
In this example, clicking on the "About" link will navigate to the "about.html" page on the "www.example.com" domain.
Relative URL/File Path
Relative file paths specify the location of a file relative to the current webpage's location. By using relative file paths, you can link pages within your website without relying on the complete URL.
Let's understand the concept of relative file paths.
- The file path "./" represents the current directory (folder). For example, "./about.html" points to an "about.html" file in the current directory.
- The file path "../" represents the parent directory (folder). For example, "../contact.html" points to a "contact.html" file in the parent directory.
Relative Path Example:
<a href="./about.html">About</a>
In this example, clicking on the "About" link will navigate to the "about.html" page in the current directory.
Additional Link Attributes
You can customize link behavior and appearance by using additional attributes:
- target: Specifies how the link opens. For example, you can set target="_blank" to open the link in a new tab or window. When opening links in a new tab, it’s best practice to use this intentionally and only when it benefits the user.
- download: Specifies that the linked resource should be downloaded when clicked. It is commonly used for file downloads.
Example:
<a href="https://www.example.com/some-pdf.pdf"
target="_blank" download>
Download Example
</a>
In this example, the link will open in a new tab or window when clicked, and if the linked resource is a file, it will be downloaded.
Remember to use descriptive and meaningful link text to improve accessibility and user experience.
Linking to a Specific Page Section
HTML also allows you to create links that navigate to specific sections within a single webpage.
To link to a specific section within the same webpage, you can use anchor links. Anchor links allow users to jump directly to a particular section by clicking on a link. They are created using the id attribute to identify the target section and the href attribute to specify the target with a preceding # symbol.
Example:
<a href="#section2">Go to Section 2</a>
In this case, the id attribute section2 should be assigned to the target section:
<section id="section2">
<h2>Section 2</h2>
<p>This is the second section of the webpage.</p>
</section>
When the anchor link is clicked, the webpage will scroll to the section with the id of section2.
If you would like to link to a specific page section on another page, all you have to do is specify the URL of the page followed by an anchor, like so:
<a href="./about-page.html#section2">Go to Section 2 on the About page</a>
Understanding file paths and creating links between HTML pages is essential for building a well-structured and interconnected website. Experiment with different file path techniques and explore the possibilities of linking pages together.
Congratulations on learning how to link HTML pages! In the next lecture, we'll explore HTML lists, which allow you to present information in organized and structured formats.
Keep practicing and implementing these techniques to enhance the navigation experience for your website visitors.
Conclusion
HTML links are the backbone of web navigation, connecting pages, sections, and resources into a usable website. By mastering text links, image links, URLs, and anchor links, you can create websites that are easy to explore and logically connected.
Understanding how links work also prepares you for more advanced topics like navigation menus, accessibility improvements, and SEO-friendly site structures.
In the next lesson, you’ll learn about HTML lists, which allow you to present information in structured and organized formats.
