Introduction

Editors

Basics

HTML Basics

Elements

Attributes

Heading

Paragraph

Text Formatting

Block & Inline Elements

Charsets

Structure & Elements

Lists

Ordered Lists

Unordered Lists

Description Lists

Colors

Links

Images

Favicon

HTML Video

Visuals & Media

Tables

iframes

Layout

File Paths

Layouts & Designs

Forms

Semantics

URL Encoding

Responsive Web Design

Projects for Beginners

Projects & Advanced Topics

Global Attributes

HTML5

HTML5 MathML

DOM Audio/Video

SVG Element

SVG Attribute

SVG Property

Canvas

Tutorial References

Placement 360 Course

MERN Full Stack Course

Courses

Web Technologies

HTML

DSA / Placements

DA / Data Science & AI

Development

DevOps Course

All Courses

Python

Java

ML & Data Science

Programming Languages

Web Development

CS Subjects

DevOps

Software and Tools

School Learning

Tutorials

Interview Corner

Practice DSA

GfG 160

Problem of the Day

Interview Prep

The HTML src attribute specifies the source or location of an external resource to be loaded by an element. It is commonly used to link images, media files, scripts, and embedded content.<ul><li value="1"> Defines the URL or path of the resource to be loaded. </li><li value="2"> Used with elements such as &lt;img&gt;, &lt;audio&gt;, &lt;video&gt;, &lt;script&gt;, and &lt;iframe&gt;. </li><li value="3"> Supports both relative and absolute URLs.</li></ul>Syntax:<pre>&lt;element src="url"&gt;</pre><h3 id="html-src-attribute-supported-tags" style="text-align:left">HTML src attribute Supported tags</h3><table><thead><tr><th style="text-align: center;">Tag</th><th style="text-align: center;">Description</th></tr></thead><tbody><tr><td style="text-align: center;"><a href="https://www.geeksforgeeks.org/html/html-audio-src-attribute/" rel="noopener" target="_blank">&lt;audio&gt;</a></td><td style="text-align: center;">Embeds sound content for playback in a webpage.</td></tr><tr><td style="text-align: center;"><a href="https://www.geeksforgeeks.org/html/html-embed-src-attribute/" rel="noopener" target="_blank">&lt;embed&gt;</a></td><td style="text-align: center;">Integrates external applications or content.</td></tr><tr><td style="text-align: center;"><a href="https://www.geeksforgeeks.org/html/html-iframe-src-attribute/" rel="noopener" target="_blank">&lt;iframe&gt;</a></td><td style="text-align: center;">Embeds another HTML document within the current one.</td></tr><tr><td style="text-align: center;"><a href="https://www.geeksforgeeks.org/html/html-frame-tag/" rel="noopener" target="_blank">&lt;frame&gt;</a></td><td style="text-align: center;">Deprecated. Divides the browser window.</td></tr><tr><td style="text-align: center;"><a href="https://www.geeksforgeeks.org/html/html-img-src-attribute/" rel="noopener" target="_blank">&lt;img&gt;</a></td><td style="text-align: center;">Embed images for display.</td></tr><tr><td style="text-align: center;"><a href="https://www.geeksforgeeks.org/html/html-input-src-attribute/" rel="noopener" target="_blank">&lt;input&gt;</a></td><td style="text-align: center;">Creates interactive control elements in forms.</td></tr><tr><td style="text-align: center;"><a href="https://www.geeksforgeeks.org/html/html-script-src-attribute/" rel="noopener" target="_blank">&lt;script&gt;</a></td><td style="text-align: center;">Embeds or links to external scripts.</td></tr><tr><td style="text-align: center;"><a href="https://www.geeksforgeeks.org/html/html-source-src-attribute/" rel="noopener" target="_blank">&lt;source&gt;</a></td><td style="text-align: center;">Specifies alternative media resources.</td></tr><tr><td style="text-align: center;"><a href="https://www.geeksforgeeks.org/html/html-track-src-attribute/" rel="noopener" target="_blank">&lt;track&gt;</a></td><td style="text-align: center;">Provides text tracks for multimedia elements.</td></tr><tr><td style="text-align: center;"><a href="https://www.geeksforgeeks.org/html/html-video-src-attribute/" rel="noopener" target="_blank">&lt;video&gt;</a></td><td style="text-align: center;">Embeds video content for playback in a webpage.</td></tr></tbody></table><h3 id="attribute-values" style="text-align:left">Attribute Values</h3>It contains a single value URL that specifies the link of the source file. There are two types of URL links which are listed below:<table><thead><tr><th style="text-align: center;">Term</th><th style="text-align: center;">Description</th></tr></thead><tbody><tr><td style="text-align: center;">Absolute URL</td><td style="text-align: center;">Points to a resource outside the current website/domain.</td></tr><tr><td style="text-align: center;">Relative URL</td><td style="text-align: center;">Points to a resource within the same website/domain.</td></tr></tbody></table><h2 id="example-of-html-src-attribute" style="text-align:left">Example of HTML src attribute</h2>Example 1: In this example we displays GeeksforGeeks heading and an audio player with multiple source files for playback control.[GFGTABS]<gfg-tabs data-mode="light" data-run-ide="true">
 <gfg-tab slot="tab">html</gfg-tab>
<gfg-panel slot="panel" data-code-lang="html" data-main-code-start="19" data-main-code-end="22">
 <code class="language-html"><div class=highlight><pre>&lt;!--Driver Code Starts--&gt;
&lt;!DOCTYPE html&gt; 
&lt;html&gt; 
&lt;head&gt; 
 &lt;title&gt; 
 HTML audio src Attribute 
 &lt;/title&gt; 
&lt;/head&gt; 

&lt;body style=&quot;text-align:center;&quot;&gt; 
 
 &lt;h1 style=&quot;color:green&quot;&gt;
 GeeksforGeeks
 &lt;/h1&gt; 
 
 &lt;h2&gt; 
 HTML audio src Attribute 
 &lt;/h2&gt; 
 
&lt;!--Driver Code Ends--&gt;

 &lt;audio controls muted&gt; 
 &lt;source src=&quot;GFG.mp3&quot; type=&quot;audio/mp3&quot;&gt; 
 &lt;source src=&quot;GFG.ogg&quot; type=&quot;audio/ogg&quot;&gt; 
 &lt;/audio&gt; 

&lt;!--Driver Code Starts--&gt;
&lt;/body&gt; 
&lt;/html&gt; 

&lt;!--Driver Code Ends--&gt;
</pre></div></code>
</gfg-panel></gfg-tabs>[/GFGTABS]Example 2: In this example image linked via the "src" attribute with an alternative text.[GFGTABS]<gfg-tabs data-mode="light" data-run-ide="true">
 <gfg-tab slot="tab">html</gfg-tab>
<gfg-panel slot="panel" data-code-lang="html" data-main-code-start="10" data-main-code-end="20">
 <code class="language-html"><div class=highlight><pre>&lt;!--Driver Code Starts--&gt;
&lt;!DOCTYPE html&gt; 
&lt;html&gt; 

&lt;head&gt; 
 &lt;title&gt; 
 HTML img src Attribute 
 &lt;/title&gt; 
&lt;/head&gt; 

&lt;!--Driver Code Ends--&gt;

&lt;body&gt; 
 &lt;h1 style=&quot;color:green&quot;&gt;
 GeeksforGeeks
 &lt;/h1&gt; 

 &lt;h2&gt;HTML img src Attribute&lt;/h2&gt; 

 &lt;img src= 
&quot;https://media.geeksforgeeks.org/wp-content/uploads/20190506164011/logo3.png&quot;
 alt=&quot;GeeksforGeeks logo&quot;&gt; 
&lt;/body&gt; 

&lt;!--Driver Code Starts--&gt;
&lt;/html&gt; 

&lt;!--Driver Code Ends--&gt;
</pre></div></code>
</gfg-panel></gfg-tabs>[/GFGTABS]

Your All-in-One Learning Portal: GeeksforGeeks is a comprehensive educational platform that empowers learners across domains-spanning computer science and programming, school education, upskilling, commerce, software tools, competitive exams, and more.

HTML src attribute - GeeksforGeeks

HTML src attribute

HTML Tutorial

Web Tutorial

Javascript

React

A to Z Guide

Exercises

Projects

Interview Questions

Examples

Color Picker

HTML-Attributes

og:title

description

https://www.geeksforgeeks.org/html/html-src-attribute/

og:url

HTML src attribute, external resource, media files, embedded content, relative URL, absolute URL, audio playback, image embedding, interactive control elements, multimedia elements, HTML audio example, HTML img example, source file link, browser window division

keywords

og:site_name

https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png

og:image

article:section

article:tag

og:type

og:locale

article:published_time

article:modified_time

og:updated_time

og:image:secure_url

og:description

WebTechnologies

Html

HtmlAttributes

The HTML src attribute specifies the source or location of an external resource to be loaded by an element. It is commonly used to link images, media files, scripts, and embedded content. Defines the URL or path of the resource to be loaded. Used with elements such as &amp;lt;img&amp;gt;, &amp;lt;audio&amp;gt;,

GeeksforGeeks

Sandeep Jain

html-src-attribute