HTML src Attribute

Posted in HTML Tutorial

Updated on Jan 29, 2024

By Mari Selvan

👁️ 33 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The src attribute is a crucial attribute in HTML that specifies the source URL of embedded content like images, scripts, iframes, audio, and video elements.

It plays a key role in linking external files to your HTML documents.

🎯 Purpose of src

The primary purpose of the src attribute is to define the source location of a resource that needs to be embedded or linked in an HTML document.

Depending on the HTML element it is used with, the src attribute points to different types of external content, such as images, scripts, multimedia files, or other documents.

💎 Values

The src attribute accepts various values depending on the element it is used with. Here are some common values:

URLs: For elements like images, audio, and video, the src attribute typically points to the URL of the external file.
Script Files: When used in script tags (<script>), the src attribute points to the URL of an external JavaScript file.
Iframes: The src attribute in the <iframe> tag points to the URL of the embedded content or web page.

📄 Example 1: Image Element

The HTML <img> element with src="example.jpg" specifies an image file named "example.jpg" as the source, displaying it on the webpage with alternative text An example image in case the image cannot be loaded.

src.html

Copied

<img src="example.jpg" alt="An example image">

📄 Example 2: Script Element

This HTML code includes an external JavaScript file, "script.js," using the src attribute within a <script> tag, allowing the browser to load and execute the specified script in the document.

src.html

Copied

<script src="script.js"></script>

📄 Example 3: Video Element

The HTML program embeds a video player with specified dimensions, allowing users to control playback, and sources the video content from the file "example.mp4" using the src attribute within the <source> element.

src.html

Copied

<video width="320" height="240" controls>
  <source src="example.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

🔄 Dynamic Values with JavaScript

You can dynamically set the src attribute using JavaScript.

This is useful when you want to change the source of an element based on certain conditions or user interactions. Here's a brief example:

src.html

Copied

<script>
  // Dynamically set the src attribute for an image element
  document.getElementById("dynamicImage").src = "new-example.jpg";
</script>

🧠 How it Works

In this script, the src attribute is dynamically set to new-example.jpg for an image element with the id "dynamicImage."

🏆 Best Practices

Ensure that the value provided to the src attribute is a valid and accessible URL or file path.
Use relative paths when linking to files within your project structure.
When linking external scripts or resources, consider using the async or defer attribute for better page loading performance.