HTML Course 5.1 The a tag and href attribute

HTML Course 5.1: The <a> Tag and href Attribute

The <a> element (anchor) defines a hyperlink, which is used to link from one page to another.
The most important attribute of the <a> tag is href, which specifies the URL of the page the link goes to.

1. Basic Syntax

A simple link:


Visit Example.com

2. Absolute vs. Relative URLs

Absolute URL: Full path including protocol.
```
Go to Page
      
```

Relative URL: Path relative to current document.


About Us


Contact


Widget Details

3. Protocols and URL Types

Protocol	Use Case	Example
http / https	Web pages	<a href=’https://site.com’>Secure Site</a>
mailto:	Email link	<a href=’mailto:info@site.com’>Email Us</a>
tel:	Telephone link (mobile)	<a href=’tel:+1234567890′>Call Us</a>
file:	Local files (not recommended on web)	<a href=’file:///C:/path/to/file.txt’>Open File</a>

4. Fragment Identifiers

Link to a specific section (anchor) within a page using #id.

Section 2

Details of section 2...

Jump to Section 2

5. Link Attributes for Behavior and Accessibility

target: Where to open the linked document.
- _self (default): Same tab/window.
- _blank: New tab/window.
- _parent, _top: Parent frames.
```
Open in New Tab
      
```
rel: Relationship between current and linked document. Improves security when using _blank.
- noopener: Prevents new page from accessing window.opener
- noreferrer: No referrer information is passed.
```
  Secure External Link

      
```
title: Provides advisory information (tooltip text).
```
Privacy Policy
      
```
download: Prompts download rather than navigation (works with same-origin or CORS).
```
Download Report (PDF)
      
```

6. Linking to Sections on Another Page

Features

Details of features...

See Features on Page 2

7. Dynamically Generated Links (JavaScript)

You can create or modify links via JavaScript at runtime.

8. Best Practices and Accessibility

Use meaningful link text (avoid ‘click here’).
Ensure href is valid; remove placeholder href='#' if not linking.
Include rel='noopener' when using target='_blank' for security.
Use aria-label if link text alone is not descriptive enough.