HTML Course 5.2: Internal and External Links
The <a> element is the cornerstone of web navigation. In this lesson, we will explore:
- External links (absolute URLs, protocols, security concerns)
- Internal links (relative paths, root-relative, document-relative)
- Fragment identifiers (anchors to sections on the same page)
- Special protocols (mailto, tel, file)
- <base> element usage
- Accessibility, SEO and security best practices
1. External Links
External links point to resources outside the current website. They require an absolute URL, specifying the protocol (http, https, etc.).
| Attribute | Purpose |
|---|---|
href |
The full URL of the external resource. |
target |
Where to open the link (e.g., _blank to open in a new tab). |
rel |
Relationship metadata. For _blank, use noopener noreferrer for security. |
title |
Additional information on hover (accessibility & SEO). |
Visit Example.com
Notes on rel when using target='_blank':
noopenerprevents the new page from accessingwindow.opener.noreferrerprevents theRefererheader from being sent.
2. Internal Links
Internal links navigate within the same site. They use relative URLs, which come in two flavors:
- Root-relative paths: Begin with
/, from the domain root. - Document-relative paths: Based on the current file’s location, using
../to go up a level.
| Type | Example | Description |
|---|---|---|
| Root-relative | /about/team.html |
Always starts at the root folder of the site. |
| Document-relative | ../contact.html |
Moves one directory up, then to contact.html. |
Product List Home Page
3. Fragment Identifiers (Anchors)
Use fragments (#id) to jump to specific sections on the same page or another page that contains the target id.
Go to Section 3Section 3 Title
Content for Section 3…
You can also link to a section on another page:
See Code Examples in Chapter 2
4. Special Protocols
mailto:Opens the user’s email client.tel:Initiates a phone call on supported devices.file:Links to local files (rarely used on public sites).
Email Us Call +1 (234) 567-890
5. Using the <base> Element
The <base href='…'> tag sets a default base URL for all relative links in the document. Place it inside the <head> (not shown here).
6. Accessibility, SEO & Security Best Practices
- Add
titleoraria-labelfor clarity, especially on generic text like ‘Click here’. - Use descriptive link text for screen readers and better SEO.
- Validate URLs and escape query parameters (e.g.,
?q=HTML%20Links). - For external links, always pair
target='_blank'withrel='noopener noreferrer'. - Test
mailtoandtellinks on multiple devices.
Leave a Reply
You must be logged in to post a comment.