src

The src attribute specifies the source of external resources like images, scripts, audio, and video in HTML elements, enhancing multimedia functionality.

src attribute

The src attribute in HTML defines the location of external resources, including images, scripts, audio, and video files. It is frequently used with elements such as <img>, <script>, <audio>, <video>, and <iframe>. Correctly using the src attribute is essential for enhancing a webpage's interactivity and functionality.

Syntax

index.html

<element src="URL"></element>

Example

audio tag

The <audio> element is used to embed sound content, such as music or voice recordings, on a webpage, enabling users to play <audio> files directly in their browsers. It supports formats like MP3, WAV, and Ogg.

Basic `<audio>` Example

index.html

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

An embedded image

index.html

<embed type="image/jpg" src="pic_trulli.jpg" width="300" height="200">

`<iframe>`

Embedding content with styling.

The iframe element + CSS

Example of an iframe with default borders:

An iframe with a thin black border:

An iframe with no borders:

index.html

<h1>The iframe element + CSS</h1>

<p>Example of an iframe with default borders:</p>
<iframe src="/default.asp" width="100%" height="300">
</iframe>

<p>An iframe with a thin black border:</p>
<iframe src="/default.asp" width="100%" height="300" style="border:1px solid black;">
</iframe>

<p>An iframe with no borders:</p>
<iframe src="/default.asp" width="100%" height="300" style="border:none;">
</iframe>

`<img>`

index.html

<img src="img.jpg" alt="Social media" />

`<input>`

Submitting a form with text direction.

index.html

<form>
  <label for="fruit">Fruit:</label>
  <input type="text" name="fruit" dirname="fruit-dir" value="cherry"><br><br>
  <button type="button">Submit</button>
</form>

`<track>`

index.html

<video controls>
  <source src="/cs/html/videos/video1.mp4" type="video/mp4">
  <track kind="subtitles" src="subtitles_en.vtt" srclang="en" label="English">
  <track kind="subtitles" src="subtitles_es.vtt" srclang="es" label="Spanish">
  Your browser supports the video tag.
</video>

`<video>`

index.html

<video width="220" height="140" controls>
  <source src="video.mp4" type="video/mp4" />
</video>

Applicable to

The src attribute can be applied to the following HTML elements:

Elements	Attribute
`<audio>`	src
`<embed>`	src
`<iframe>`	src
`<img>`	src
`<input>`	src
`<source>`	src
`<track>`	src
`<video>`	src

Conclusion

The src attribute is essential for embedding external resources like images, audio, video, and other content into an HTML document. It allows various elements to link to external files, enhancing webpage interactivity and functionality. Proper use of the src attribute ensures seamless integration of multimedia content.

spellchecker

The spellcheck attribute in HTML determines if the browser should check the spelling of the content in an input field, enhancing text accuracy and the overall user experience.

srcdoc

The srcdoc attribute allows you to embed HTML content directly within an <iframe>, specifying the content to display instead of an external source.

src

Basic <audio> Example

Basic `<audio>` Example