Links, Images & Favicon

Links

Links are created with the <a> (anchor) tag. The href attribute tells the browser where it goes.

<a href="https://example.com">Visit Example</a>
<a href="/courses">All Courses</a>
<a href="mailto:someone@example.com">Send an Email</a>
<a href="tel:+911234567890">Call Us</a>
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Opens in new tab</a>

• target="_blank" — opens in a new tab
• href="#section-id" — jumps to an element with that id on the same page
• rel="noopener noreferrer" — recommended alongside target="_blank" for security

Images

<img> is a self-closing "empty" element — no closing tag needed.

<img src="logo.png" alt="Company logo" width="200" height="100">

• src — the image file path
• alt — describes the image for screen readers, shows if it fails to load. Never skip this.
• width / height — prevents the page "jumping" while the image loads

Make an image clickable by wrapping it in a link:

<a href="/courses">
  <img src="banner.png" alt="Browse all courses">
</a>

Favicon

The small icon shown in a browser tab, bookmarks, and history:

<head>
  <link rel="icon" type="image/png" href="/assets/img/favicon.png">
</head>

• Use a square image — 32×32px or 64×64px works well
• PNG or .ico format both work
• Put the <link> in a shared header include so it applies site-wide automatically