1. Links (<a> Tag)

Links let users navigate between pages and resources.

Basic Link Syntax

syntax:

<a href="https://www.example.com">Visit Example</a>

• href = destination URL

• Text between tags = clickable link text >> i.e Visit Example is clickable in this example.

Link Types

Link Attributes

sample code:

<a href="page.html" target="_blank" rel="noopener">Open in New Tab</a>

• target="_blank" = opens in new tab

• rel="noopener" = security for new tabs

• title="Tooltip" = hover description

2. Images (<img> Tag)

Embed pictures in your webpage.

Basic Image Syntax

sample code:

<img src="cat.jpg" alt="A fluffy orange cat">

• src = image file path

• alt = description for accessibility (required!)

Image Attributes

sample code:

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

• width/height = dimensions in pixels

• loading="lazy" = delays loading until visible

Image Formats

3. Multimedia (Video/Audio)

Embed videos and audio players.

Video (<video>)

sample code:

<video controls width="400">
  <source src="movie.mp4" type="video/mp4">
  Your browser doesn't support videos.
</video>

• controls = shows play/pause buttons

• Always include fallback text

Audio (<audio>)

sample code:

<audio controls>
  <source src="song.mp3" type="audio/mpeg">
  Audio not supported.
</audio>

Embedding YouTube Videos

sample code:

<iframe width="560" height="315" 
        src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
        frameborder="0" allowfullscreen>
</iframe>

Key Notes

✔ Always include alt text for images (screen readers need this)
✔ Use relative paths (images/photo.jpg) for local files
✔ For videos, provide multiple formats (MP4 + WebM) for compatibility
✔ target="_blank" links should have rel="noopener" for security