P1.2: Links & Media

Webpages are interconnected using links and enriched with multimedia. In this lesson, we will master how to connect pages and embed rich media assets.

1. HTML Links (<a>)

The anchor tag (<a>) is used to link from one page to another. The most important attribute is href (Hypertext Reference), which specifies the destination URL.

Absolute vs. Relative Paths

• Absolute URL: Points to a full web address (e.g., href="https://nextsem.online/profile"). Used to link to external websites.
• Relative URL: Points to a local file within the same website (e.g., href="/about" or href="./contact.html").

<!-- External Link (opens in a new tab) -->
<a href="https://nextsem.online" target="_blank" rel="noopener noreferrer">Visit Nextsem</a>

<!-- Internal Link -->
<a href="/profile">Go to Dashboard</a>

2. Dynamic Media Usage Share

Multimedia elements drive user engagement and are crucial for modern visual web layouts.

Sarah DrasnerView Profile 🔗

Real-World Developer Case Study

15 Years Exp

RoleDirector of Engineering

Salary₹85 Lakhs/yr equivalent

CompanyGoogle

Core Tech Stack

HTML5 MediaSVGsCSS AnimationsWebGL

“SVGs are not just images; they are code. Mastering vector graphics and media integration is what separates basic layouts from premium, responsive interactive interfaces.”

3. Images & Vector Graphics (<img> & <svg>)

• <img> Tag: Used to embed raster images (PNG, JPEG, WebP).
• <svg> Tag: Inline vector graphics that scale infinitely without losing quality.
• Important Alt Attribute: Always provide an alt description for screen readers and SEO indexers.

<img src="/logo.svg" alt="Nextsem Logo" width="120" height="40">

4. Audio & Video Embedding (<audio> & <video>)

HTML5 introduced native audio and video players without requiring flash plugins.

<!-- Native Video Player with controls -->
<video src="/walkthrough.mp4" controls width="480">
  Your browser does not support the video tag.
</video>