What is src in HTML? Uses in 5 different ways

What is src in HTML? If you’ve ever worked with HTML, you’ve probably come across the src attribute. But what does src do? Why is it so important? And how to use src effectively in your web pages?

What Does src Mean in HTML?

The src attribute in HTML stands for “source.” It is used to specify the file path or URL of external resources like images, audio, video, scripts, and iframes.

In simple terms, the src attribute tells the browser where to find and load a particular resource. Think of it like giving a delivery address—the browser knows where to go to fetch the right content.

What Does src Stand For in HTML?

src is short for “source.” It acts as a pointer, telling the browser:

“Hey, this is the file you need to load!”

Without src, the browser wouldn’t know where to find images, videos, or scripts. Imagine writing a letter but forgetting to mention the recipient’s address—nobody would receive it! That’s exactly what happens when you forget to include src in elements that require it.

Common Use Cases of src in HTML

The src attribute is used in several important HTML elements. Let’s look at where and how it’s commonly applied.

1. Using src with Images (<img> tag)

The <img> tag requires the src attribute to load an image from a specified location.

Example: Displaying an Image

<img src="image.jpg" alt="A beautiful landscape">

• src="image.jpg" tells the browser where to find the image.
• alt="A beautiful landscape" provides alternative text for accessibility.

If the image is in another folder or an external URL, the src must reflect that:

<img src="images/nature.jpg" alt="Green forest">
<img src="https://example.com/photo.jpg" alt="Online image">

💡 Pro Tip: Always use a valid image path to avoid broken images!

2. Using src with Audio (<audio> tag)

The <audio> element uses src to specify a sound file.

Example: Adding an Audio File

<audio controls>
  <source src="music.mp3" type="audio/mpeg">
</audio>

• controls allows users to play, pause, and adjust volume.
• src="music.mp3" loads the audio file.

For better browser compatibility, you can add multiple <source> elements:

<audio controls>
  <source src="music.mp3" type="audio/mpeg">
  <source src="music.ogg" type="audio/ogg">
  Your browser does not support the audio tag.
</audio>

If one format isn’t supported, the browser tries the next one.

3. Using src with Videos (<video> tag)

Just like with audio, the <video> tag relies on src to load video files.

Example: Embedding a Video

<video width="600" controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  Your browser does not support the video tag.
</video>

• The width="600" sets the video width.
• The controls attribute adds play/pause buttons.
• The multiple <source> elements improve compatibility.

4. Using src with Scripts (<script> tag)

JavaScript files are linked using the <script> tag and the src attribute.

Example: Adding an External JavaScript File

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

Instead of writing JavaScript directly in HTML, it’s best to keep it in a separate .js file and reference it using src.

You can also load scripts from CDN (Content Delivery Network):

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

This speeds up page loading by fetching scripts from high-speed servers.

5. Using src with Iframes (<iframe> tag)

The <iframe> tag allows embedding other web pages using the src attribute.

Example: Embedding a Website

<iframe src="https://www.example.com" width="800" height="600"></iframe>

• src="https://www.example.com" loads an external webpage.
• width & height define the iframe’s size.

You can also embed Google Maps, YouTube videos, and more using <iframe>.

Example: Embedding a YouTube Video

<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" allowfullscreen></iframe>

This loads the video directly inside your page.

Key Takeaways

• src stands for “source” and tells the browser where to fetch external resources.
• It is commonly used in <img>, <audio>, <video>, <script>, and <iframe> tags.
• Always use valid file paths to avoid errors.
• For media files, consider multiple formats for better browser support.
• External JavaScript and iframe content should be loaded via src for organization and performance.