Web Development - HTML Links
HTML Links
Links are one of the most important parts of the web. They allow you to navigate between pages, websites, and even specific sections on a page.
Links are created with the <a> (anchor) element.
Basic Link
A link is defined with the <a> tag and the href attribute, which stands for hypertext reference.
Clicking this link will take you to the specified URL.
Target Attribute
The target attribute defines where to open the linked document.
_self- opens in the same tab (default)_blank- opens in a new tab or window
Example
Opening a link in a new tab:
<a href="https://www.w3schools.com" target="_blank">Visit W3Schools in a new tab</a>
Try it Yourself »
Tip: Use target="_blank" for external links to keep users on your site.
Absolute vs Relative URLs
A link can point to an absolute URL (a full web address) or a relative URL (a path to another file in your project).
Example
Absolute and relative links:
<a href="https://www.w3schools.com/html/">W3Schools HTML Tutorial</a>
<a href="mypage.html">My Web Page</a>
Try it Yourself »
- Absolute URLs link to an external website.
- Relative URLs link to a page inside your own site.
Image as a Link
You can use an image as a clickable link by placing an <img> element inside an <a>
element:
Example
Image link:
<a href="mypage.html">
<img src="avatar.png" alt="Go To My Web Page"
style="width:120px;">
</a>
Try it Yourself »
Bookmarks (Internal Links)
You can link to sections within the same page using bookmarks.
First, give an element an id, then link to it with #id.
Example
Internal page link:
<a href="#section1">Jump to Chapter 4</a>
<h2 id="C4">Chapter 4</h2>
<p>Welcome to section 4!</p>
Try it Yourself »
This is especially useful for long pages.
Link Colors
By default, browsers display links in different colors:
- Unvisited link - blue
- Visited link - purple
- Active link (clicked) - red
Tip: You can change these colors later with CSS.
Best Practices for Links
- Use clear and descriptive link text (not just "click here").
- Use
target="_blank"for external links. - Use relative paths for internal pages within your own website.
- Check that all links work before publishing your site.
Next, you'll learn how to add HTML Images - displaying pictures, logos, and photos on your web pages.
