HTML Course 5. Links and navigation

HTML Course 5: Links and Navigation

1. The Anchor Element

The anchor (<a>) element is the primary way to create hyperlinks in HTML. At minimum, it requires an href attribute pointing to the link target, and link text for accessibility.

• href: URL of the resource.
• target: where to open the link (_self, _blank, _parent, _top).
• rel: relationship between current document and linked document (noopener, noreferrer, next, prev, etc.).
• download: suggests saving the resource.
• hreflang: language of the linked resource (e.g. en, fr).
• type: MIME type of the linked resource (e.g. application/pdf).

  Visit Example.com

2. Absolute vs. Relative URLs

Links can point to:

• Absolute URLs: complete paths including protocol (https://) and domain.
• Root-Relative URLs: start with a slash and are relative to the site’s root (/images/logo.png).
• Document-Relative URLs: relative to the current document’s folder (../about/team.html).

Products


Products


Products

3. Linking to Other Protocols

• mailto: opens default mail client.
• tel: dials a phone number on supported devices.
• ftp: links via FTP protocol.
• file: links to local files (rare on public sites).

  Contact Support




  Call Us

4. Fragment Identifiers (Internal Anchors)

You can link to specific sections within the same page or another page using #id. Ensure the target element has a matching id.

Features
Here are our features...


Jump to Features


Go to Features on Home Page

5. Download Attribute

The download attribute on an anchor suggests to the browser to download the resource rather than navigate to it. You can provide a filename.

  Download Our Brochure

6. Navigation Structures

Use the semantic <nav> element to wrap primary navigation. Combine with lists for structure.

7. Breadcrumbs

Breadcrumbs show users their location in the site hierarchy. Use an ordered list inside <nav> and link each step.

8. Pagination and Rel Attribute

For paginated content, use rel='next' and rel='prev' on links to help browsers and crawlers.

9. Accessibility Best Practices

• Provide descriptive link text—avoid “click here.”
• Use aria-label or title only when necessary for extra context.
• Ensure focus styles are visible (handled via CSS externally).
• For skip links, allow keyboard users to bypass repeated content.

  Skip to main content



  

10. SEO and Performance Considerations

• Use rel='canonical' in the <head> to avoid duplicate content.
• Lazy-load heavy resources linked in <a> tags if needed (via JavaScript).
• Minimize deep directory structures to keep URLs concise and user-friendly.

By mastering these link and navigation techniques, you’ll create well-structured, accessible, and SEO-friendly websites that guide users smoothly through your content.