The src attribute, short for “source,” tells an HTML element where to find the file it should use. For an img element, the browser retrieves the image and displays it where the element appears. section 6.1
Choose the src value according to where the file lives:
- Use a full URL when the image is on a remote server. section 6.1
- Use the filename when the image is in the same directory as the HTML file. section 6.1
- Use the path and filename when the image is in another folder, such as /images/logo.png. section 6.1
- Use a placeholder URL when the final image is not ready but its dimensions are known. section 6.1
An image with a source
Use <img src="/images/atomic-logo.png" alt="Atomic Web Design logo" title="Logo for Atomic Web Design">. The src points to the image; alt supplies replacement text, and title provides optional hover text. Tiny attribute, big responsibility. section 6.1
The same idea works with video and audio. A single-format video or audio element can carry src directly; when several formats are offered, put a src on each nested source element instead. section 6.15 section 6.16
<img
src=”/images/atomic-logo.png” #1
alt=”Atomic Web Design logo” #2
title=”Logo for Atomic Web Design”> #3
<span>Atomic Web Design</span>
Inspect the complete img example to see src alongside accessibility and tooltip attributes. section 6.1
