Src means source: it gives certain HTML elements the URL of a resource to load. An img loads an image, a script can load code, and audio/video can load media. The valid attributes and loading behavior depend on the element.

Load a self-contained image

This img uses a data URL so the copied example needs no separate image file. Real sites commonly use a local or absolute image URL instead.

Image source URLLink

HTML and CSS

HTML

<img
  src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22180%22%20height%3D%22100%22%3E%3Crect%20width%3D%22180%22%20height%3D%22100%22%20fill%3D%22%23eff6ff%22%2F%3E%3Cpath%20d%3D%22M20%2080%20L70%2030%20L100%2060%20L130%2020%20L165%2080%20Z%22%20fill%3D%22%232563eb%22%2F%3E%3C%2Fsvg%3E"
  width="180"
  height="100"
  alt="Blue illustration with three peaks"
/>

CSS

img {
  max-width: 100%;
  height: auto;
}

Edit HTML or CSS to update the preview as you type. Copy code snippet copies the selected tab. Preview spacing and font defaults are not included.

Resolve a resource URL

A URL such as images/example.svg is relative to the document’s base URL. A root-relative /images/example.svg begins at the origin’s root. An absolute https URL specifies its origin too. A base element can change resolution, so inspect the resolved URL when a file appears missing.

Src does not always mean an external website: a resource may be on the same origin, embedded as data, or selected through a different mechanism. Responsive img can use srcset/sizes, and picture/source can supply alternative candidates; src is normally the fallback image source. Media elements may use child source elements rather than their own src.

Src and href do different jobs

An a uses href for a link destination; clicking it navigates. An img uses src for content it embeds. Link uses href for a related resource such as a stylesheet, while iframe uses src or srcdoc for an embedded document. Do not add src to an anchor and expect a hyperlink.

For external scripts, inspect async/defer/module behavior and trust the code being loaded. A resource URL can create a network request; a missing file, blocked request, or unsupported media type can prevent rendering. Alt text and visible media fallbacks remain important.

Learn relative paths, href, and script.

Sources

Reference 1 Reference 2 Reference 3 provide the technical details and current compatibility information.