Creating Hyperlinks (<a>)
Linking to other pages on the same site (relative URLs)
A relative URL specifies a link to another page or resource within the same website. This path is relative to the current page's location, making the site more portable.
Example:
<a href="about.html">Learn About Us</a>
Explanation The <a> tag, or anchor tag, creates a hyperlink. The href attribute is set to "about.html", a relative path, which tells the browser to find this file in the same folder as the current page.
Example:
<a href="pages/contact.html">Contact Us</a>
Explanation This link navigates into the pages folder to find contact.html. This is useful for organizing your website's files into different directories.
Example:
<a href="../index.html">Back to Homepage</a>
Explanation The ../ tells the browser to go up one level from the current directory. This is commonly used to link back to a main page from a page within a subfolder.
Linking to external websites (absolute URLs)
An absolute URL provides the full web address (including the protocol like https://) to an external website. Use this to direct users to resources on different domains.
Example:
<a href="https://www.google.com" target="_blank">Visit Google</a>
Explanation The href attribute contains the complete URL for the external site. The target="_blank" attribute is a common and important addition that opens the linked page in a new tab, keeping your site open.
Example:
<a href="https://en.wikipedia.org/wiki/HTML" target="_blank">Read about HTML on Wikipedia</a>
Explanation This example shows that an absolute URL can point to any specific page on the web, not just a homepage. It provides a direct reference to an external resource.
Example:
<a href="https://www.w3.org/TR/html52/html52.pdf" target="_blank">Download HTML5.2 Spec (PDF)</a>
Explanation Absolute URLs can also point directly to files like PDFs. Using target="_blank" ensures the user's browser will likely open the PDF in a new tab for viewing or downloading.
The href, target, and rel attributes
The href attribute is essential, defining the link's destination URL. The target attribute specifies where to open the link (e.g., _blank for a new tab), and rel defines the relationship between the current page and the linked document, which is important for SEO.
Example:
<a href="https://developer.mozilla.org" target="_blank" rel="noopener noreferrer">MDN Web Docs</a>
Explanation href points to the MDN website, target="_blank" opens a new tab, and rel="noopener noreferrer" is a security best practice that prevents the new page from accessing the original page's window object.
Example:
<a href="http://example.com" rel="nofollow">Example Site</a>
Explanation The rel="nofollow" attribute tells search engines not to pass any ranking authority (or "link juice") to the linked page. This is often used for paid links or untrusted content.
Example:
<a href="/gallery" target="_self">View Gallery</a>
Explanation target="_self" explicitly tells the browser to open the link in the current window or tab. This is the default behavior for anchor tags, so it is often omitted.
Linking to email addresses (mailto:) and phone numbers (tel:)
You can create links that open a user's default email client or phone dialer. The mailto: and tel: protocols are used within the href attribute to enable this direct communication functionality.
Example:
<a href="mailto:contact@example.com">Email Us</a>
Explanation Using mailto: followed by an email address in the href attribute creates a basic email link. Clicking it opens the user's configured email application with the 'To' field pre-filled.
Example:
<a href="mailto:support@example.com?subject=Inquiry%20About%20Services">Contact Support</a>
Explanation You can add a ?subject= to the mailto: link to pre-populate the email's subject line. %20 is used to encode a space character within the URL.
Example:
<a href="tel:+15551234567">Call Us at (555) 123-4567</a>
Explanation The tel: protocol followed by a phone number creates a clickable call link. This is especially useful on mobile devices, as it will open the phone's dialer app.
Creating bookmark links within a page
Bookmark links, or fragment identifiers, allow users to jump to a specific section of the same page. This is achieved by linking to an element's id attribute.
Example:
<a href="#section-2">Go to Section 2</a>
<h2 id="section-2">Section 2</h2>
Explanation The href attribute is set to # followed by the id of the target element (section-2). When the user clicks this link, the browser will scroll the page to bring the element with that id into view.
Example:
<a href="#conclusion">Jump to Conclusion</a>
<p id="conclusion">This is the final paragraph of the document.</p>
Explanation A bookmark link is not limited to headings. It can target any element, like a <p> or <div>, as long as that element has a unique id attribute.
Example:
<a href="faq.html#q3">See Answer to Question 3</a>
Explanation You can combine a relative URL with a fragment identifier. This link will first navigate to the faq.html page and then immediately scroll down to the element with the id="q3".