HTML src Attribute
The essential attribute for embedding external resources into your web page.
What is the src Attribute?
The `src` attribute, short for "source", is a required attribute for elements that embed external content. It specifies the path or URL to the resource you want to embed. This attribute is fundamental for including images, videos, audio, scripts, and other external files in an HTML document.
Absolute vs. Relative Paths
- Absolute URL: A full web address to a resource on another website (e.g., `https://www.example.com/image.jpg`).
- Relative URL: A path to a resource on the same website. It can be relative to the current page (e.g., `image.jpg`) or to the root of the site (e.g., `/images/image.jpg`).
Common Usage Examples
Code:
<img src="https://via.placeholder.com/150" alt="Placeholder image" />Result:
Code:
<audio src="audio-file.mp3" controls />Result:
Browser default audio player. (No file loaded for this example).
Code:
<video src="video-file.mp4" width="320" height="240" controls />Result:
Browser default video player. (No file loaded for this example).
Code:
<iframe src="https://www.example.com" width="100%" height="200" />Result:
An iframe would load the specified page here.
Best Practices
- Accessibility: For `<img>` tags, always provide a descriptive `alt` attribute.
- Valid Paths: Ensure the URL in the `src` attribute is correct to avoid broken resources and 404 errors.
- Performance: Use relative paths for local resources to make the site more portable and slightly faster. Optimize file sizes for images, audio, and video to reduce page load times.
Tag & Attribute Support
The `src` attribute is universally supported by all browsers. However, support depends on the element it is used with. The tags that use `src` (like `<img>`, `<audio>`, `<video>`, `<iframe>`, `<script>`) are all part of the HTML standard and are fully supported in all modern browsers.