Course List

HTML Links

Links are the foundation of the internet. Because of links, we can jump from one web page to another, download files, send emails, or even move to a specific section within the same page. In HTML, we use the <a> tag (where “a” stands for anchor) to create links.

The Core Attribute of a Link: href

Every link must include the href attribute (Hypertext Reference), which specifies the destination address. For example, href="https://www.example.com" tells the browser to go to example.com.

1. Text Links

Text links are the most common form of link. The user clicks on underlined (usually) text and is taken to another page.

Use cases: navigation menus, references within an article, “Learn more” buttons, etc.

Key points:

  • The link text should clearly describe the destination, rather than vague phrases like “click here”. For example, “View our HTML tutorial” is better for search engines and screen readers than “click here”.

  • Default styling: Browsers typically show unvisited links as blue and underlined, visited links as purple, and active links as red. You can fully customize these with CSS.

Example

<a href="#">Link Text</a>

Copy this code and try running it.

Code Running Test

2. Image Links

An image link means using the image itself as a clickable link. When the user clicks on the image, they are taken to another page or resource.

Use cases: logo linking back to the homepage, banner ads, product images linking to detail pages, icon‑based social media buttons, etc.

How it works: Place the <img> tag inside an <a> tag, so that the <a> surrounds the image. The entire image then becomes a clickable area.

Key points:

  • Always provide an alt attribute for image links (alternative text). This is important not only for SEO but also for accessibility – if the image fails to load, users still know what the link does.

  • If you need to add a border or hover effect to an image link, you can do that with CSS.

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML Course(impressionnews.com)</title>
</head>
<body>
<p>Create a link to the image:
<a href="https://www.impressionnews.com/all-courses/">
<img src="https://www.impressionnews.com/wp-content/uploads/2026/05/html-courseimage.webp" alt="HTML Course" width="32" height="32"></a></p>

<p>Unframed image link:
<a href="https://www.impressionnews.com/all-courses/">
<img border="0" src="https://www.impressionnews.com/wp-content/uploads/2026/05/html-courseimage.webp" alt="HTML Course" width="32" height="32"></a></p>
</body>
</html>

Copy this code and try running it.

Code Running Test

3. Email Links

Email links (mailto:) are a special type of link. Clicking them automatically opens the user’s default email client (such as Outlook, Gmail web, etc.) and creates a new email message.

Use cases: Contact us, feedback, collaboration invitations, etc.

Format: href="mailto:someone@example.com".

Advanced usage:

  • You can pre‑fill the recipient, subject, and body. Example: mailto:name@example.com?subject=Course%20Question&body=Hello%2C%20I%20would%20like%20to%20ask...

  • Note: Multiple parameters are separated by &, and special characters in the subject/body must be URL‑encoded (spaces become %20, etc.). You don’t need to memorize all the encoding rules – many website builders handle this automatically.

Key points:

  • Email links depend on the user’s local email client configuration. If a user hasn’t set up any email software, clicking the link may not work. Consider providing a contact form as a fallback.

  • It is not recommended to expose a plain‑text email address directly on a public web page (it can be harvested by bots for spam), but the email link itself is safe – the user must actively click it.

Other Common Link Types (brief overview)

  • Anchor links (in‑page navigation): href="#section-id" – clicking scrolls to an element with that id on the same page. Often used for “back to top” buttons or table of contents.

  • Telephone links: href="tel:+1234567890" – on mobile browsers, clicking opens the dialer with the number pre‑filled.

  • Download links: Using the download attribute along with a file URL (e.g., href="file.pdf" download) prompts the browser to download the file instead of opening it directly.

Link Accessibility and Best Practices

  • Don’t remove the underline unless you provide another clear visual cue (e.g., color change on hover, bold text) to indicate clickability. Users are accustomed to underlines for links.

  • Make links large enough (especially on mobile) to be easily tapped with a finger.

  • Avoid “empty links” like href="#" or javascript:void(0) – they cause unexpected behavior. If a link has no destination yet, use a real placeholder URL or use a <button> instead.

  • External links: If a link points to another website, you may want to add target="_blank" to open it in a new tab. When doing so, also add rel="noopener noreferrer" for security and performance reasons.

Common Mistakes to Avoid

  • ❌ Placing multiple links right next to each other with no spaces or separators (users may click the wrong one).

  • ❌ An image link without an alt attribute – screen reader users won’t know where the link goes.

  • ❌ Writing an email address without mailto: – the browser will treat it as a relative path instead of opening the email client.

  • ✅ Correct approach: text links with clear meaning, image links with alternative text, email links using the mailto: format.